前端框架Vue自学之Vue基础语法（二）
终极目标：掌握和使用Vue（全家桶：Core+Vue-router+Vuex）
本博客目的：记录Vue学习的进度和心得（Vue基础语法）
内容：通过官网说明，掌握Vue基础语法。
正文：
Vue基础语法
一、插值语法
1、Mustache，即双大括号{{}}。 括号里面可以是变量，也可以是简单的表达式。（tips:复杂的表达式不再适合，我们可以考虑使用计算属性，后面会说）（Mustache：胡子）
2、v-once。通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
3、v-html。原始HTML：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用v-html指令。注意：站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击（Cross Site Scripting，攻击全称跨站脚本攻击）。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
4、v-text。与Mustache类似，接受一个string类型。但灵活性不够Mustache，尤其是字符串拼接下。用的比较少。
5、v-pre。跳过这个元素和它子元素额编译过程，用于显示原来的Mustache语法，即原封不动把内容显示出来。
6、v-cloak。当浏览器可能直接渲染出未编译的Mustache语法（可能网页卡了或者什么原因），会不好看，用上v-cloak可以过渡显示得过程，待渲染编译完Mustache语法后，才显示结果。 用得比较少。（cloak：斗篷）
二、绑定属性
当我们不再是简单往HTML元素使用插值语法动态绑定其模板的内容，而是想根据某些需求动态的改变元素属性时，例如动态绑定a元素的href属性等，需要使用绑定属性。在实际开发中，数据都不是简单的绑死的，而是动态由服务器请求来的数据去传到对应的部分，进行渲染的。
1、v-bind指令。作用：动态绑定属性。缩写（一个语法糖）：：（冒号）。注意，Mustache语法是在元素内容里面用。属性绑定时，用v-bind:属性=‘变量名’，这样变量（在程序编译时）就绑定了对应属性。（tips：变量名内如果是有引号译为字符串，没有就译为变量）
2、动态绑定class（class属性）。也可以用v-bind简单绑定。
3、动态绑定class对象语法：也可以绑定为一个对象并把布尔值放在vue实例中的data里面控制对应class是否加入到元素class属性中，如{类名1：布尔值1，类名2：布尔值2}当布尔值1为true时，即把类名1（所代表的的类添加到这个Html元素中去），同样的类名2也是。（tips：直接通过{}绑定一个类；也可以通过判断，传入多个值；与普通类同时存在，并不冲突；如果过于复杂，可以放在一个methods或者computed计算属性里）
4、动态绑定class数组语法：也可以绑定为一个数组，与上述对象语法类似，可以放在一个methods或者computed计算属性里。
5、动态绑定style：多用于组件化开发的定制样式渲染。也是存在对象语法和数组语法。对象语法：{key:value}，与class绑定不一样，style的对象是{css属性名：属性值}。属性值通常是动态变化的，所以属性性一般是变量，在vue实例的data属性里面对其控制，类似渲染模板的意味。数组语法用的比较少，也是相当于先以数组形式进行绑定，然后在vue的data属性定义为对象（tips：变量名内如果是有引号译为字符串，没有就译为变量）
三、计算属性
我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但在某些情况，我们可能需要对数据进行一些转换后再显示，或者需要将多个数据结合起来进行显示。因而可以使用到计算属性computed（在Vue实例中）。
1、在计算属性computed中定义显示数据的属性，然后在对应HTML元素位置调用。有点类似与方法定义（简写的时候），但是和方法不一样。
2、计算属性的setter和getter。完整写法是在具体计算属性变量中定义一个对象，对象里面包含set方法和get方法。一般只实现get方法，此时计算属性相当于只读属性（也就是先前简写方式所对应内在联系）。如果是需要改变的话，就需要set方法，通常也是方法是需要参数的，然后在定义具体方法。
3、计算属性和方法methods对比。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数，大大影响性能。
四、事件监听
1、在前端开发中，我们需要经常和用于交互，因而我们必须监听用户发生的事件，比如点击、拖拽、键盘事件等。所以，我们可以使用v-on实现事件监听。
2、v-on。作用：绑定事件监听器。缩写：@（也是一个语法糖）。参数：event。绑定事件到vue实例中的methods。
3、v-on的使用注意参数问题。如果方法不需要额外参数，那么方法后面的（）可以不添加。在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候，Vue会默认将浏览器产生的event事件对象（例如点击时，浏览器会产生一个MouseEvent事件对象）作为参数传入到方法。如果需要同时传入某个参数，同时需要event时，可以手动设置通过$event作为参数传入事件。类似于：<button @click='btnClick(参数1,$event)'></button> （tips:如果当一个函数需要参数，但是没有传入，那么函数的形参为undefined）
4、v-on的修饰符。修饰符是由点开头的指令后缀来表示的：.stop ，.prevent ，.capture，.self， .once， .passive等。.stop 会调用event.stopPropagation()，阻止事件冒泡。.prevent 会调用event.preventDefault()，阻止默认事件。.{keyCode|keyAlias}只当事件是从特定键触发时才触发回调。.native监听组件根元素的原生事件。.once 只触发一次回调。注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
五、条件和循环
1、v-if。条件判断某元素是否能被渲染输出。（有一个小tip，vue的底层是先构建虚拟DOM，在进行渲染，其会对比要改变的DOM和原来的DOM，尽可能地只把改变的部分渲染，保留原有没有改变的部分。如果我们需要元素都要重新渲染而不是让Vue出现类似重复利用的问题，则需要加上key属性并key属性的值不一样。）
2、v-else。通常与v-if配合使用。当元素中条件为真，执行v-if块，否则，执行v-else块。
3、v-else-if。通常也是与v-if配合使用。如果判断逻辑过于复杂，我们可以转而使用计算属性。
4、v-show。另一个用于根据条件展示元素的选项是v-show指令。不同的是带有v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display。注意，v-show 不支持<template> 元素，也不支持v-else。当需要在显示与隐藏比较频繁时，用v-show。当只有一个切换时，使用v-if。（通常v-if使用比较多）
5、v-for。v-for遍历数组。遍历中，可以获取索引下标值。v-for遍历对象。在遍历对象过程，如果只是获取一个值，获取的是value。如果两个参数，用（key,value）。如果是三个参数，用（key,value,index）。
6、组价的key属性。官方推荐我们在使用v-for时，给对应的元素或组件添加上一个：key属性。这个与vue的虚拟DOM的DIff算法有关系。通过使用：key来给每一个节点做一个唯一标识（绑定之前要展示的变量）。从而高效地更新虚拟DOM。
7、哪些数组的方法是响应式的？可以响应的：push方法,pop,shift,unshift,splice,sort,reverse。不可以响应的：通过索引值修改数组中的元素（如果想要响应式修改数组元素，应该使用splice方法。或者是使用Vue.set函数）。
六、表单绑定
表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单（input标签等）。Vue中使用v-model指令来实现表单元素和数据的双向绑定。（通过input标签的type属性选择单选框，复选框等）
1、v-model的基本使用及原理。在表单元素中设置v-model=‘变量名’（变量是在vue实例中的data里面），就表单元素与数据data双向绑定。（v-model其实也是一个语法糖，其本质包含两个操作：通过使用v-bind绑定变量响应式地渲染表单元素，然后用v-on绑定事件并传入event事件参数，当表单元素变化，能同步修改data中的数据（event.target.value））
2、v-model结合radio类型。radio是单选框。通过v-model绑定表单的变量（例如当使用v-model绑定input标签的某个变量，就可以形成互斥（即不再需要在多个单选框中的name属性定义一样的值），从而实现单选，并且绑定对应变量）
3、v-model与checkbox类型。checkbox是复选框，分为单个勾选框，多个勾选框。注意结合label的使用（通过label的for属性赋值为input标签的id属性值，从而在点击input标签内容（label）的时候也能够选中勾选框）。
4、v-model与select类型（select-option）。分为单选和多选。多选就是在select标签中添加multiple属性（通过ctrl键实现多选）。
5、值绑定。即动态地给input标签赋值。在真实开发中，这些input的值可能是从网络获取或定义在data中的，所以我们可以通过v-bind:value动态地给value绑定值。例如：
<label v-for="item in OriginItems" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="Items">{{item}}
</label>
v-model绑定data中的items（数组），然后通过v-bind动态地给value绑定为item值。
6、v-model的修饰符。主要用三个：.lazy,.number,.trim。
lazy修饰符。之前v-model是实时绑定的（默认是在input事件中同步输入框的数据的，一旦有数据改变，对应的data数据就会自动发生改变），当我们不想实时绑定（例如在输入中，我们想按回车或者是失去焦点再进行绑定），就可以使用v-model.lazy。
number修饰符。默认下，v-model绑定的变量是字符串类型，如果需要数值型，则用.number修饰符。
trim修饰符。除去input的内容左右两边的空格去掉。
应用案例（含源码）：（综合应用上述vue基础语法，做出一个图书购物车）
要求：1、正确显示购物车书单内容并且计算出总价格；2、购买数量栏中存在加减按钮，并且控制购买数量不能减至0以下；3、使用移除按钮去除对应购物列表；4、价格显示要保留两位小数，并且显示￥符号。
涉及的知识：v-for，遍历对象；v-on，监听事件，包括参数传入问题；v-bind，绑定属性；methods，方法；computed，计算属性；filters，滤波器；for循环的使用let的块作用域等。
源码：在我的Github上：图书购物车。
