数据绑定

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

 <div id="app">
{{ message }}
</div>
 var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

执行结果:Hello Vue!

除了上面的绑定方式,还有另外一种:

 <div id="app">
<span v-bind:title="message">
</span>
</div>

 v-bind 特性被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。

以上代码也可以简写为:

 <div id="app">
<span :title="message">
</span>
</div>

对于html的绑定,还可以用到v-html

 <div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>test</h1>'
}
})
</script>

响应式

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter

这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在属性被访问和修改时通知变更。

每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

此外,我们也可以自定义watcher针对某一个data进行监控,当值改变时进行一些逻辑操作,后文我们会专门探讨。

由于vue是响应式的,JavaScript中message值的变化会立即影响到UI中的内容。反过来,UI中message的变化也可以立即同步到JavaScript中的值,这就需要用到另一个绑定方式:v-model

我们可以尝试一个例子:

 <div id="app">
<input type="input" v-model="message">
{{message}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'test'
}
})
</script>

执行结果(输入框值改变时右侧内容同步改变):

Vue入门教程 第二篇 (数据绑定与响应式)的更多相关文章

  1. Vue入门教程 第一篇 (概念及初始化)

    注:为了本教程的准确性,部分描述引用了官网及网络内容. 安装Vue 1.使用npm安装vue: npm install vue 2.下载使用js文件: https://vuejs.org/js/vue ...

  2. vue入门教程 (vueJS2.X)

    vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...

  3. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  4. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  5. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  6. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  7. webpack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  8. webpack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  9. webpack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

随机推荐

  1. 【Offer】[53-1] 【数字在排序数组中出现的次数】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 统计一个数字在排序数组中出现的次数.例如,输入排序数组{1,2,3,3,3,3,4,5}和数字3,由于3在这个数组中出现了4次,因此输出 ...

  2. python自学Day02(自学书籍python编程从入门到实践)

    第三章 列表简介 3.1 列表是什么 按特定顺序排列的元素组成. 元素类型可以是任意数据类型. 元素之间没有任何的关系. 在python中用中括号 [] 括起来并用 ,号隔开 3.1.1 访问列表元素 ...

  3. zabbix监控nginx脚本

    ~]# cd /etc/zabbix/scripts/ scripts]# ls nginx_status.sh scripts]# cat nginx_status.sh ############# ...

  4. VUE中CSS样式穿透

    VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...

  5. 【UEFI】---BIOS中UserPassword的重复校验总结

    UEFI作为目前较为流行的一套X86架构初始化的标准框架,已受到业界内的广泛认可.而其中很多编程所采用的思想确实值得学习.今天总结下UEFI的框架下修改代码的一点小经验,仅供菜鸟参考. 先列干货,具体 ...

  6. Mac破解软件下载的几个网站

    一.关于破解(盗版)软件的个人看法(可忽略,网址在文末): 1.在经济(预算)允许的范围内,尽量支持正版: 2.软件如衣服,在不同的季节,不同的店铺买价格不一样,国内的一些代理网站经常会打折: 3.作 ...

  7. webview与webApp页面交互传参

    参考网址:https://blog.csdn.net/books1958/article/details/44747045 上一篇说了Android集成极光推送获取了RegistrationId推送标 ...

  8. 关于解决web编码问题的总结

    网页的编码问题,一般分为两个方面 1 是网页本身的编码格式, 一般不同的操作系统网页文件存取的编码是不一样的, 但一般来说, 新建网页文件一般都和IDE有关,因为我们平时我是使用编辑工具新建网页文件. ...

  9. 浅谈PHP反序列化漏洞原理

    序列化与反序列化 序列化用途:方便于对象在网络中的传输和存储 0x01 php反序列化漏洞 在PHP应用中,序列化和反序列化一般用做缓存,比如session缓存,cookie等. 常见的序列化格式: ...

  10. error LNK1104: 无法打开文件“opencv_world331.lib” LINK : fatal error LNK1104: 无法打开文件“opencv_world331.lib”,程序报这个错误时应该怎么解决?

    这几天被这个错误搞得很头大,看了很多大神的解决办法,涉及到opencv的版本的windows的操作系统等各种知识,但是我尝试了很多办法最终都没有解决.今天晚上突然想到之前遇到这种无法打开lib文件时, ...