Vue实例
新建一个Vue实例
-
每个Vue应用都是通过
Vue函数创建一个新的Vue实例开始的：let data = {a: 1} let vm = new Vue({ //数据实例一 data: data //数据实例二 data:{ newTodoText: '', visitCount: 0, hideCompletedTodos: false, todos: [], error: null } })
数据与方法
- 当一个Vue实例被创建时，它向Vue的响应式系统中加入了新建对象的
data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生响应，即匹配更新为新的值。（上一篇介绍中写了个小型的响应demo） - 若数据单一的时候可直接使用数据实例一。但若数据多或者某些数据需要某个操作触发才有效，可先定义并且赋初值，如数据实例二。
- Vue实例还暴露了一些有用的实例属性与方法，他们都有前缀
$，以便于与用户定义的属性区分开来。例如：-
vm.$data === data//=>true -
vm.$sl === document.getElementById('example')//=>true -
vm.$watch('a' , function(newValue , oldValue){})//监听变量的变化，以便于dom的响应。
-
模板语法
- Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有的Vue.js的模板都是合法的HTML，所以都能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用状态改变时，Vue能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。
插值
文本
- 数据绑定最常见的形式是使用“Mustache”语法（双大括号）的文本插值：
-
<span> Message: {{ msg }}</span>类似angular的双向绑定，只要一边发生改变，另一边也会做出相应的变化。
-
原始HTML
- 双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用
v-html指令：-
<div v-html="realHTML"></div>这个div的内容将会被替换成为属性值realHTML，直接作为html会忽略解析属性值中的数据绑定。注意，不能使用v-html来符合局部模板，因为vue不是基于字符串的模板引擎。反之，对于用户UI，**组件更适合作为可重用和可组合的基本单位 **。
-
特性
- Mustache语法不能作用在HTML特性上，遇到这种情况应该使用
v-bind指令：-
<div v-bind:id="dynamicId"></div>若绑定的是bool类型的值，则结果为控制特性的使用/消失。
-
使用javascripts表达式
- 对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持，正确的表达式会在所属的Vue实例的数据作用域下作为js被解析。但是有个限制，就是每个绑定都只能包含单个表达式。
指令（Directives）
- 指令是带有
v-前缀的特殊属性。指令属性的值预期是单个js表达式（v-for除外）。指令的职责是当表达式的值改变时，将其产生的连带影响，响应式地作用与DOM。回顾上一篇的例子：<p v-if="seen">here</p >
- 这里，根据seen的值为true/false来插入/移除
<p>元素
指令的缩写
v-bind缩写<!--完整语法--> <a v-bind:href="url"></a > <!-- 缩写 --> <a :href="url"></a >-
v-on缩写<!--完整语法--> <a v-on:click="dosomething"></a > <!-- 缩写 --> <a @click="dosomething"></a > 再来一遍，文档！文档！文档！左转vue.js
