Vue.js实战第一章第二章笔记

1.1Vue.js是什么
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
提供了现代Web开发中常见的高级功能，比如：
（1）解耦视图与数据
（2）可复用的组件
（3）前端路由
（4）状态管理
（5）虚拟DOM

1.1.1 MVVM
MVVM模式→当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然。
View和ViewModel之间通过双向绑定建立联系

1.1.2 Vue.js有什么不同
Vue.js用过MVVM的模式拆分成视图与数据两部分，并将其分离

1.2如何使用Vue.js
1.2.1 传统的前端开发模式
Jquery+RequireJS（SeaJS）+artTemplate（doT）+Gulp（Grunt）

1.2.2 Vue.js的开发模式
引入Vue.js框架后，在body底部使用new Vue()的方式创建一个实例
2.1Vue实例与数据绑定
2.1.1实例与数据
var app = new Vue({

})
变量app→代表了这个实例

var app = new Vue({ el:document.getElementById('myname') 或 el:'#myname' }) el→用于指定一个页面中已存在的DOM元素来挂载Vue实例

{{a}}

var app = new Vue({ el:'#myname', data:{ a:2 } }) 通过vue实例的data选项，可以声明应用内需要双向绑定的数据 *建议所有会用到的数据都预先在data内声明

2.1.2生命周期
jQuery的生命周期钩子
$(document).ready(function(){
//dom加载完后，会执行这里的代码
})
Vue的生命周期钩子
• created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， KaTeX parse error: Expected '}', got '#' at position 166: …new Vue({ el :’#̲app ’, data: {…el); //

}
})
这些钩子与 el 和 data 类似，也是作为选项写入 Vue 实例内，并且钩子的 this 指向的是调用它 的 Vue 实例

2.1.3插值与表达式
使用双大括号（Mustache 语法）“{{}}”是最基本的文本插值方法，它会自动将我们双向绑 定的数据实时显示出来
v-html→输出 HTML，而不是将数据解释后的纯文本
<span v-html=”l ink”>
v-pre→跳过这个元素和它的子元素的编译过程
<span v-pre＞{{这里的内容是不会被编译的}}＜／span>

2.1.4过滤器
Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ （|） ” 对数据进行过滤，经常用于格式化文 本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的， 通过给 Vue 实例添 加选项 filters 来设置

2.2指令与事件
v-bind →动态更新 HTML 元素上的属性，比如 id、 class 等，
v-bind:href
v-bind: src
v-on→绑定事件监听器
v-on:click

2.3语法糖
v-bind：缩写为：
v-on：缩写为@