vue学习笔记（二）

接上篇
1.vue模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
（1）插值（基本的数据绑定）

对应的数据随绑定值的变化而变化
不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。
（2）使用 JavaScript 表达式
对应数据绑定有特定的js表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析，但是每次解析只能是一个表达式，否则失效。
（3）指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
3-1 v-if
v-if是条件渲染指令，它根据表达式的真假来删除和插入元素
基本语法：
v-if=“a”
a是一个返回布尔值的表达式，通过返回值的真假判断是否执行后续代码。

<div id="app">
            <div v-if="isMale">正确</div>
            <div v-if="age>=10">age:{{age}}</div>
        </div>
        
var vm = new Vue({
            el: '#app',
            data: {
                age:5,
                isMale:true,
            }
        })

3-2 v-show
v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染。

当条件不成立时，v-if不渲染页面，而v-show渲染页面，只是在页面中添加css样式(display:none)将内容隐藏起来。
v-else
通常配合v-if或v-show使用。当条件不成立时出现。

3-3 v-for
一个基于数组循环的指令，通常用于渲染列表，它和JavaScript的遍历语法相似；
v-for=“item in list” list是一个数组，item是当前遍历的数组元素
v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始


3-4 v-bind
用于动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: class
class可以和v-bind:class同时存在 ，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名。


3-5 v-on
用于监听DOM事件,用法和v-bind类似。