本文共 8454 字，大约阅读时间需要 28 分钟。

模板语法https://juejin.im/user/580327ee0e3dd900570cf3ab

1.文本

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：

Mustache 标签将会被替代为对应数据对象上 world 属性的值 ,而且一直会监听world的值，一但改变会跟着改变

应用场景 ： 可以说处处都用的到

以上用了四种写法

第一种“Mustache” 语法（双大括号）写法 第二种 用v-text的指今写法 第三种和第四是对es6写法的拓展写法，称模板字符串

2.v-once

通过指令我们可以对文本值进行一次性赋值操作，只进行第一次的数据渲染，如果再次改变值，文本值也不会改变

应用场景 ： 一般是用在组件树中传递时，导致组件数据一层一层传递时，变改了不需要改变的场景，用v-once可以避免在组件数中只需用一次性赋值操作

我们再次点击button时，我们会发现没有任何改变，值行了所谓的一次性赋值

3.纯html

我们在解析的不是文件而是一个html格式的时候放在v-text中或者{

{}}就会被当作一个文本解析，所以我们此时要用v-html指令进行解析，在1.0中支持{ { {}}}这种格式，为了防止xss功击，去除了这个功能

常用场景 ： 当我们在跟前后台对接口数据时，后台会返回一个html格式，一般是后台操作界面编译的样式文本，此时我们就要用v-html来进行解析

此时在界面我们就能看到显示红色的字你就解析成功了这几个字样，就是被成功解析了

4.属性

在vue中属性这个东西很关健，在组件与组件中数据传递时会很有用，但是对于属性的解析我们不能用{

{}}“Mustache” 语法（双大括号）写法，我们同时还是要用指令去解析，那就是v-bind:*,同时我们可以简写用v-bind语法糖 ：即可 如果我们先不考虑组件传递，我们就是考虑简单的给元素加属性

应用场景 在组件中传递时需要用,其它元素上的绑定属性都需要这个功能

我们在属性中支持number string boolean类型，以上显示能在界面中看出都能正常进行和原本属性所预期的，不用：来绑定的属性可以直接属性赋值，如果一定要通过data数据选项中返回的值一定要加 ：

5.使用javascript表达式

应用场景 ：

在业务场景中一些方法判断或者简单的过滤，那我们可以用javascript表达式，能让代码更简洁，更清晰，比方说用一个三元表达式。。等等

在id:method1 里，我们做了一个对count进行+1，对count进行三元表达式来进行判断做出不同的显示

在id:method2 里，我进行了v-model指令和h1里message进行了双向绑定，随着message的改变h1里的值随着表达式的的改变而改变 注意示项，在官方提出来的这几种是不可行的

这是语句，不是表达式 {
  { var a = 1 }}流控制也不会生效，请使用三元表达式 {
  { if (ok) { return message } }}

6.修饰赋

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

应用场景 ：

对于一些特殊的指令操作时需要，比方说对组件加事件，组织元素的默认行为，组织冒泡。。等等一系列，官方文档有详细解说每一个修饰赋的具体用途

再次提示主逻辑代码都是写在.App.vue中,所有其它的组件代码都是写在componentes里

首我们先对components文件夹中创建一个myButton组件

再在app.vue中写入

我们可以尝试一下如果我们去掉.native的话你会发现组件根本出alert(原生点击)的弹框，这是为什么呢，正常的情况在一个单个组件内部自己使用v-on的事件，ok都不会有问题，如果在一个组件上定义一个指令事件，必须要用.native，这里大家一定要注意

####推荐很实用的demo

我们用jquery的时候经常会遇到这种场景，当我们一个layer层弹出来的时候，内部是一个超过整个屏幕长度的滚动，当我们滑动layer的时候会导致里面的滚动也会一起滚动起来，这个是一件很操蛋的事，在网上也有着很多相关解决的办法，vue可以通过修饰符来解决这个问题 index.html文件中加一个视口度适配，更好的来查看效果

app.vue文件中

此时我们打开chrome调试工具的时候我们会发当我们滑动layer层的，里面的滚动不会再滚动了，我们再试着把.prevent给去掉，会发现滚动再次出现，这个原理就是event.preventDefault来阻止默认事件事执行的。

实现原理，我们对layer层把它的touchmove滑动事件给干掉了，就不会触发滚动区域的滑动事件，个人认为这个场景每个项目都会用的到

再做一个表单的简单示例

这个我们能发现当加入.trim的修饰符的时候给到第二个input的时候都是去掉前后空白符的，这个功能也就是去掉前后空白符，这也是很常用的场景，一些表单当用户输入的时候，有些用户会打出一个前后空白符，有一次我保用户数据给数据库，操作的时候还代码还好好的，突然一个空白字符引发的一场血案，要注意细节点

6. 过滤器

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：

其实本质上过滤器也就是一个或多个表达式，但是有极条件控制的表达式或者长业务逻辑的表达式写在mustache不够清楚，明了

在v-bind中也就是2.10的时候才支持这个功能，这个大家要对这个版本有一定的了解，正确的使用

应用场景 ：

我说说我遇到过的应用场景，再把我应用的场景再加深一点逻辑 1.首先我们从后台拿到10个用户的手机，但是要把前7位掩码，做成*，然判断如果手机尾数是偶数的话，我们就显示已中奖，不是的话显示谢谢参与

代码会析，在filters选项里有个newtel的函数，value则是函数中固定的一个参数，代码过滤前的值，但最后在管道符里我们不用把这个固定的参数写在调用里面，如果没有，则返回"",我们再取后四位，在前7位拼接7个*,这里我用到了es6新特性，repeat这个方法，原本我想用padStart可惜是es7的新性，babel不支持，再截取尾数，如果尾数%2是偶数则再后面加一个中奖，否则谢谢参与，最后把这个value的最终值返回出去

7.结合过滤器参数与v-bind过滤

以上过滤器原理也跟大家说了，我们进一步深化一下，如果两都结合使用

应用场景

当后台传给很多链接的地址的时候，每个链接要带上不同的参数，比如https//www.baidu.com?user=ziksang&age=20,针对于这种场景我给大家实战一下

在v-bind管道符中的getquery(第一个参,第二个参)

第一个参就是传给fitler里getquery里的第二个参数，就是name 第二个参就是传给fitler里getquery里的第三个参数，就是age 因为第一个参数是默认的 这里我大量用了v-for来进行循环,如果有看不懂的话，等讲到第基础二或者三的时候再回头看看这里的v-for用法你就一目了然了

8.缩写

这没有什么可以多讲的，就是一个语法糖，方便大家书写

写到这里，只是简单的讲一下模板语法，但是我个人认为，还展拓了很多其它知识点，刚好如果那些知识点你不会的，可以去查一查做一个预热，在接下来几天中，我们把上出第二篇基础（v-for 列表渲染）

v-for 列表渲染

1. v-for array 数组渲染

我们用v-for指令根据一组数组的选项列表进行渲染。 v-for指令需要以item in items形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

应用场景：

通常情况下，进入一个活动要展示出所有参加活动的人员，里面有姓名，年龄，报名时间等等，就先举这三个列子，那后台肯定会返回一个arraylist数组集合，集合中每个元素肯定是一个对象，那我们如何去把这个数组集合高效率，合理的渲染到页面上，,再拿到用户id去到下一个页面查询memberDetail祥情，用过jq的同学肯定知识很烦繁，一般肯定是用arttemplate这种模板引擎

我觉得这个demo太常用了，逐行分析

1.如果在template模板里面用到了数据必须先在data选项里先声明赋值，我们先给memberList给予一个[]数组 2.在created函数里我们就当作模拟从后台拿到的数据，然后赋值给data选项里的memberList，此时memberList就有后台拿到的值了 3.(item,index) in memberList是vue自己封装的一个语法结构 一.item代表集合中的每一个元素，此时每一个元素就是一个对象 二.index代表集合每一个元素的下标 三.memberList是所要循环的数组 4.为什么我们要把 (item,index) in memberList放在每一个循环dom上，那就是li标签 只有在li循环体节点上和循环体所有子节点上拿到item这个对象里面的所有属性 5.@click="memberDetail(index)" 这里用了一个点击方法，我们把index作为了方法的参数，目的是什么，这个index代表每一个循环出来dom的下标，通过点击，我们可以拿到对应的用户id可以说拿到每一个用户的任意值，然后在methods我们进行操作，我们可以能过sessonStorage来存放，用来过度到下一个用户祥情页，来获取所有用户详情，我们可以打开谷歌浏览器，当我们用鼠标点击的时候，可以发现sessionStorage里的变化

整个流程是无论是开发任意中型项目必备的

2.template v-for

如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块，循环块区域

应用场景 ：

当我们循环渲染时，我们如果有多个欠套不合理的关系下，一般情况下肯定是在最外层套一个div元素，这个我认为显的不是很清楚，我们用template来代替渲染，不但能省去很dom节点，而且也能解决欠套不合理的情况

如果我们不想多创节点，又不想让p元素做为根节点，我们就可以用template来做渲染，在chorme开发者工具上，也能证实，最外层的的template会自动消失，不会创造出多余的节点。

3. v-for Object 对象渲染

你也可以用 v-for 通过一个对象的属性来迭代。

应用场景 ：

就像第一个列子如果到了详情页，我们要展示一个用户详情，如果后端都给你排好序了，如何正确的方便展示出来，用最快，最便捷的方法那就是v-for 迭代对象，一般情况下展示一个用户详情，后台肯定返回一个用户对象给你

1.(value,key) in memberDetail

value代表属性值 key 代表属性, index代表每个dom节点的下标索引 两者都是一一对应的，通过第一个例子讲解，我相信这个例子很简单了

4. v-for 整数迭代

这个看看demo就可以了，我几乎没用过

   
  
    {
   { n }}
   

4. v-for 和 组件

在自定义组件里，你可以像任何普通元素一样用 v-for 。

应用场景 ：

比方拿掘金来说，每个用户展现的文章列表中，每个用户的文章可以做成一个统一组件，通过父组件来进行数据的传递，循环出所有人的文章，就形成了文章列表，而且可以在热门，最新，或者专栏里面复用，只需要通过数据传递，是一种相当好的模式

在components文件夹里创一个myArticle文件

用props选项来接收父组件传入的数据，渲染组件

App.vue文件

这个需要逐行分析

1.首先们引入组件 2.v-for来循环组件 3.把每个文章的数据用 :art-list='item'传给myArticle组件 如我们进行下拉加载和上拉刷新的话，只要把取到的数据再次从新赋给子组件就可以了，而且我们还可以在各个页面来重复复用这个组件，减少开发工作量

4. 数组更新检测

1.数组变异

说的通俗一点，实是就是我们用Array.prototype里提供的原型方法里我们能直接改掉data选项里的数据，触发了视图更新，那就是叫数组变异方法

官方给大家列了只有那些方法能触发视图更新 1.push() 2.pop() 3.shift() 4.unshift() 5.splice() 6.sort() 7.reverse()

应用场景，我们比方说我们是绝境的后台控制者，我们无聊看那个文章不爽，我们对文章进行操作，这个只是我瞎说玩玩的场景，就是用情景去模拟用法的场景

App.vue文件

我们发现我们点这些按钮的时候，myArticle的视图同时跟着改变，这就是我们需要的效果就是变异方法根本的意思，能通过Array.prototype里的原形方法改变data选项artList数组触发视图改变的方法就是变异方法

2.数组非变异

no-mutation methods(非变异方法)，不能通过Array.prototype里的原形方法改变data选项artList数组触发视图改变的方法就是非变异方法，其余的方法都是操作后，形成一个返回值，所有操作只是返回了一个新数组，而不会触发视图更新

有1.filter(), 2.concat(), 3.slice(), 4.map()

那我们最终目的还是要通过方法来改变视图更新，怎么办，很简单，只要把形成的返回值再从新赋值给data选项里的数组就可以了，看api文档说起来很高深的样子，但根本原理就是Array.prototye原型上方法导的鬼，我相信大家肯定很清楚了，上面我还在代码中对...解构新特性给大家演示了一个例子

4. 注意示项

官方提示：

由于 JavaScript 的限制， Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength

在

这里因为操作问题我就在代码中直接写了注释，更加能让大家清楚的了解，如何通过那些方法改变数组的长度，改变下标的某一个元素

5. 显示过滤/排序效果

对于我的理解我就定义他叫副本过滤，在不改动data选项原数组的同时，对新数组进行改变，同时也不创造出多余的数据值，那我们这里就要用到一个基础3所要讲的计算属性

应用场景 ： 我在这里做了一个小demo当原数组里面随机改变值的同时，副本基于原数组的创建出一个副本数组跟着过滤的不同而改变 有两个视图： 1.第一个视图，我们点击按纽改变1-10的随机数 2.第二个视图，随着随机数的改变来判断是否为偶数是偶数的则过滤出来

随着我们点击按钮的同时，两个视图同时更新，本质上就是在data选项里过滤出一个新数组，同时这个新数组不会影响到data选项里的数组，这个就叫做副本过滤，通过自己的想像可以做出很多不同的demo例子

转载地址：http://kseni.baihongyu.com/