Vue基础之插值表达式的另一种用法！附加变量的监听！
Vue基础之插值表达式的另一种用法！附加变量的监听！
讲这个之前我们先回顾一下原来的用法！
<body>
<!-- Vue.js的应用可以分为两个重要的组成部分
一个是视图!
另一个是脚本!！ -->
<!-- 下面的就是视图！ -->
<div id="app">
<h1>{{message}}</h1>
</div>
<!-- 下面的就是脚本！ -->
<script type="text/javascript">
//
var app = new Vue({
el:'#app', // 这个就是你要操作的元素！
data: {
message: 'lvhang'
} // data用于保存数据！插值表达式！我们在视图中声明了那些变量， 就需要在data中注册同名的变量，并且对变量进行赋值！
})
</script>
</body>
原来的插值对象表达式是写在一个大的对象里面的！就是在app 下面的data属性里面的！
新的方式是在外面创建一个对象， 然后把新创建的对象放在data 属性的后面！
<body>
<div id="app">
{{name}}
</div>
<script type="text/javascript">
// 每个Vue的应用都是通过Vue函数创建一个新的Vue实例开始的!
// 通常我们都会创建一个变量来接受Vue返回的一个对象！
// 当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中，当这些属性的值发生改时，视图将会产生响应，及匹配为更新的值!
var data = {
name: 'lvchengxin'
}
var app = new Vue({
el: '#app',
data: data
})
// data.name = 'daxia'
// data.$name = 'lvhang!'; // lvchengxin
// app.name = 'chengdu'
// 上面的就是 数据属性！
// 除了数据属性，Vue实例还暴露了一些有用的实例属性与方法，它们都有前缀$.以便与用户定义的属性区分开来，例：
// $watch 是一个实例方法! 方法要放在你监听的变量名或属性名之前!
// 第一个参数就是你要观察那个变量的变化！
// 第二个参数就是回调函数！回调函数有两个参数，第一个是最新的值， 第二个是原来的值！
app.$watch('name', function(newVal, oldVal) {
console.log(newVal) // xiaoxia
console.log(oldVal) // lvchengxin
} )
app.$data.name = 'xiaoxia'; // xiaoxia
</script>
</body>
最后还附加一个监听变量的一个方法， 上面已经给出来了！最重要的就是这个方法使用的时候要放在变量的前面!
Vue基础之插值表达式的另一种用法！附加变量的监听！的更多相关文章
- vue简介，插值表达式，过滤器
目录 VUE框架介绍 what?什么是vue? why?为什么要学习vue? special特点? how如何使用? 下载安装? 导入方式? 挂在点el 插值表达式 delimiters自定义插值表达 ...
- Blazor和Vue对比学习（基础1.8）：Blazor中实现计算属性和数据监听
1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...
- vue路由钩子拦截器beforeEach和afterEach及页面路由变化路由监听
在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...
- [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]
[Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...
- （day65、66）Vue基础、指令、实例成员、JS函数this补充、冒泡排序
目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
- Vue基础认识
一:什么是Vue? vue是一个渐进式的JavaScript框架,采用的是MVVM模式.Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整 ...
- vue基础指令了解补充及组件介绍
v-once指令 """ v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) """ <di ...
随机推荐
- 1.Redis基础命令
重要概念 redis是单线程模型,所有命令都会进入一个队列,然后依次被执行. 全局命令 >>>select dbindex #切换数据库,默认有16个库,库标识符为0-15 > ...
- springBoot整合Sentinel实现降级限流熔断
由于hystrix的停止更新,以及阿里Sentinel在历年双十一的贡献.项目中使用了Sentinel,今天我们来讲讲Sentinel的入门教程,本文使用1.6.3版本进行讲解 本文通过Sentine ...
- 《深入理解 Java 虚拟机》读书笔记
第二章 Java 内存区域与内存溢出溢出 程序计数器 程序计数器是一块较小的内存空间,它可以看作是当前线程所执行的字节码的行号指示器.字节码解释器工作时就是通过改变这个计数器的值来选取下一条需要执行的 ...
- Qt学习笔记-Qt-4.8.6+phonon+mplayer
首先,用phonon播放音乐时,可以使用mplayer.首先,你的设备上需要安装一个mplayer并测试能用. 然后安装后端播放插件. 我用的是网上找的phonon-mplayer. 按照网上的方法, ...
- JTable写入数据库内容
/*JTable中导入数据库数据. 创建2个Vector col和dat col存入字段名 dat存入数据内容. dbname=new JTable(dat,col); */package demo; ...
- Redis 设计与实现 6：五大数据类型之列表
列表对象有 3 种编码:ziplist.linkedlist.quicklist. ziplist 和 linkedlist 是 3.2 版本之前的编码. quicklist 是 3.2 版本新增的编 ...
- eclipse下的jetty远程调试设置
在windows下的jetty远程调试设置1.首先说明的是windows下的jetty是通过命令java -jar start.jar来启动的,因此要想设置成远程调试模式,则要改用命令java -X ...
- 算法历练之路——入学考试（JAVA）
入学考试 时间限制: 1Sec 内存限制: 128MB 提交: 42 解决: 18 题目描述辰辰是个天资聪颖的孩子,他的梦想是成为世界 上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断 ...
- Mysql-Incorrect string value
[问题描述] com.mysql.jdbc.MysqlDataTruncation: Data truncation: Incorrect string value: '\xF0\x9F\x8E\x8 ...
- .NET 调整图片尺寸(Resize)各种方法
本文中如无特别说明 .NET 指 .NET 5或者更高版本,代码同样可用于 .NET Core 前言 调整图片尺寸最常用的场景就是生成缩略图,一般为保持纵横比缩小,如果图片放大会使图片变得模糊,如果确 ...