vue基础篇-数据绑定和第一个 Vue 应用（第二章）

一、Vue 实例与数据绑定
Vue. 最核心的功能 ：数据的双向绑定在输入框输入的内容会实时展示在页面的标签内。
1.1 实例 数据
Vue js 应用的创建通过构造函数 Vue 就可以创建 Vue 的根实例，并启动 Vue
var app ＝new Vue({
／／选项
})
变量App 就代表了这个vue 实例

注：el必不可少的
el 用于指定 个页面中己存在的 DOM 元素来挂载 Vue实例
通过 Vue 实例的 data 选工页，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都
预先在 data 声明，这样不至于将数据散落在业务逻辑中，难以维护。

1.2 生命周期
1.2.1 jQuery 的生命周期钩子

1.2.2 Vue 的生命周期钩子 比较常用的有：

• created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用，后面章节将有介绍．
• mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始
• beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

1.3 插值与表达式
使用双大括号（ Mustache 语法）“｛｛｝｝”是最基本的文本插值方

1.3.1 v-html:输出 HTML，link 的内容将会被渲染为 个具有点击功能的 标签，而不是将数据解释后的纯文本

<span v-html=”l ink”></span> 

<div id=” app” >
<span v-html=”l ink”></span>
</div>
<script>
var app =new Vue({
el :’#app ’,
data: {
link: ’<a href ＝”＃”＞这是 个连接 la
})
</script>

注：使用 v-html 输出后， 般可将尖括号“<> ”转义

1.3.2 v-pre 跳过这个元素 它的子元素 编译过程，显示｛｛｝｝标签，而不进行替换

 <span v-pre >｛｛这里的内容是不会被编译的 }  }</ span>

1.4 过滤器
过滤器可以用在两个地方：双花括号插值和v-bind表达式。 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器也可以串联，而且可以接收数据，例如：

<!-- 串联 -->
{{ message | filterA | filterB }}

<!-- 接收参数 -->
{{ message | filterA('arg1', 'arg2') }}

这里的字符串 arg1 和 arg2 将分别传给过滤器的第二个和第三个参数，因为第一个参数是数据本身。
过滤器应当用于简单的文本转换，如果要实现复杂的数据变换，应当使用计算属性。
二、指令与事件
Vue.js 内置了很多指令，常用指令:

1. v-if ：条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素，是true则渲染元素，false则将元素注释掉
2. v-show：与v-if类似，true就渲染，但是false并不是注释掉，而是通过display:none;来将元素隐藏，如果需要来回切换，使用v-show更好。
3. v-else： 必须跟在v-if/v-show指令之后，不然不起作用.
4. v-for ：类似JS的遍历，用法为 v-for=“item in items”, items是数组，item为数组中的数组元素。
5. v-bind：这个指令用于响应地更新 HTML 特性，比如绑定某个class元素或元素的style样式
6. v-on:给标签绑定函数，可以缩写为@，例如绑定一个点击函数

三、语法糖
v-bind:可以缩写为冒号:

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

v-on:可以缩写为@

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->