灵魂拷问：你是否懂得所有的Vue模板语法呢？

作者 | Jeskson

掘金 | https://juejin.im/user/5a16e1...

Vue.js的创建者为尤雨溪，2014年，Vue.js正式发布，2015年，正式发布1.00版本。VUE.JS为渐进式的JavaScript框架，声明式渲染，组件系统，客户端路由，集中式状态管理，项目构建。

vue.js是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue被设计可以自底向上逐层应用，vue.js的核心库只关心视图层，很容易上手，也便于和第三方库或者是既有的项目整合。

vue的优点，易用，就是可以快速上手vue，灵活，就是可以在一个库和一套完整框架之间自入伸缩，高效，文件大小20kb运行大小，提供超快的虚拟DOM。

传统开发模式的代码：

JavaScript原生代码：

<div id = "msg"> </div>

<script type="text/javascript">
 var msg = 'hello dada';
 var div = document.getElementById("msg");
 div.innerHTML = msg;
</script>

jquery代码：

<div id="msg"></div>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
 var msg = "hello da";
 $('#msg').html(msg);
</script>

Vue的基本操作，向世界问好！

<div id="app>
 <div>{{msg}}</div>
</div>

<script type="text/javascript" src="js/vue.js"></script>

<script type="text/javascript">
 new Vue({
  el: '#app',
  data: {
   msg: 'hello world'
  }
 })
</script>

vue的使用过程，需要提供标签用于填充数据，引入vue.js库文件，可以使用vue的语法做功能，把vue提供的数据填充到标签里面。

el属性，元素的挂载位置，值可以是css选择器或者是dom元素

data属性，模型数据，值是一个对象

插值表达式用法

将数据填充到HTML标签中，插值表达式支持基本的计算操作

vue代码运行的原理

vue语法到原生语法，vue的语法通过vue框架编译成原生的代码。

vue的模板语法

如何理解前端渲染？

把数据填充到HTML标签中

模板和数据-》前端渲染-》静态HTML文件

前端渲染方式：原生js拼接字符串，使用前端模板引擎，使用vue特有的模板语法

原生js拼接字符串，就是将数据以字符串的方式拼接到HTML标签中。

什么是指令？什么是自定义属性，指令的本质就是自定义的属性，指令格式以v-开头

指令v-cloak

插值表达式存在一个问题，“闪动”问题，就是刷新的时候会出现闪动的效果，如何解决问题，使用v-cloak指令，解决这个问题的原理，先隐藏，替换好值之后再显示最终的值。

v-cloak，不需要表达式，用法，这个指令保持在元素上直到关联实例结束编译，和css规则如 [v-cloak] {display: none} 一起用时，这个指令可以隐藏未编译的mustache标签直到实例准备完毕。

示例：标准的属性选择器

[v-cloak] {
 display: none;
}

<div v-cloak>
 {{message}}
</div>

不会显示，直到编译结束。

v-cloak指令的用法

第一步使用提供的样式

[v-cloak] {
 display: none;
}

第二步，在插值表达式所在的标签中添加v-cloak指令

本质原理，先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后在显示最终的结果。

数据绑定的指令

v-text填充纯文本，v-html填充HTML代码，v-pre填充原始信息

v-text，string，更新元素的textContent

示例：

<span v-text="msg"></span>

<span>{{msg}}</span>

v-html，string，更新元素的innerHTML，内容按照普通HTML插入，不会作为vue模板进行编译，如果试图使用v-html组合模板，可以重新考虑是否通过使用组件来替代。

在网站上动态渲染任意HTML是很危险的，容易导致xss攻击，只在可信内容上使用v-html，永不用在用户提交的内容上。

在单文件组件里，scoped的样式不会应用在v-html内部，因为那部分HTML没有被vue的模板编译器处理，如果你希望针对v-html的内容设置带作用域的css，你可以替换为css modules或用一个额外的全局<style>元素手动设置类似bem的作用域策略。

v-html填充HTML片段，存在安全问题的，只有在本网站内部数据可以使用，第三方的数据不可以使用。

v-pre填充原始信息

什么是原始信息，就是如果是，不用编译，跳过编译过程

<div v-pre>{{msg}}</div>

会导致显示结果为： {{msg}}

指令

数据响应式，HTML5中的响应式，数据的响应式，什么是数据绑定？v-once只会编译一次。HTML5中的变化，屏幕尺寸的变化会导致样式的变化，数据的响应式指数据的 变化导致页面中内容的变化。

数据绑定如何理解，就是插值表达式是将数据填充到标签中。

编译，vue的模板内容就要通过vue的编译过程，v-once只编译一次，显示内容之后不再具有响应式功能。

双向数据绑定

v-model指令的用法

<input type="text" v-model="name"/>

MVVM设计思想：把不同的功能代码放到不同的模块里面

M,model
v,VIEW
VM，view-model

模型，数据，用到的数据，视图，就是dom元素，模板，vm，两者的结合，把两者联合到一起。

核心思想，分而食之，事件监听，数据绑定。

事件绑定，如何处理事件，v-on指令的用法

<input type="button" v-on:click="num++"/>

<input type="button" @click="num++"/>

事件函数的调用

直接绑定函数名称

<button v-on:click="da">dada</button>

调用函数

<button v-on:click="da()">dada</button>

事件函数参数传递

普通参数和事件对象

<button v-on:click='da("da",$event)'>da</button>

阻止事件冒泡

dada: function(event) {
 event.stopPropagation();
}

事件修饰符

.stop 阻止冒泡
<a v-on:click.stop = "dada">跳转</a>

.prevent 阻止默认行为
<a v-on:click:prevent="dada">跳转</a>

事件处理

监听事件

可以用v-on指令监听dom事件，并在触发时运行一些JavaScript代码。

示例：

<div id="dada">
 <button v-on:click="counter += 1">da da</button>
 <p>dada {{counter}} </p>
</div>

var vm = new Vue({
 el: '#dada',
 data: {
  counter: 0
 }
})

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联的JavaScript语句中调用方法

<div id="da">
 <button v-on:click="say('hi')">dada</button>
</div>

new Vue({
 el: '#da',
 methods: {
  say: function(message) {
   alert(message)
  }
 }
})

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

.stop

.prevent

.capture

.self

.once

.passive

// 阻止单击事件继续传播
<a v-on:click.stop = "doThis"></a>

// 提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>

// 修饰符可以串联
<a v-on:click.stop.prevent="doThis"></a>

// 只有修饰符
<form v-on:submit.prevent></form>

// 添加事件监听时使用事件捕获模式
// 即为元素自身触发的事件先在此处理，然后才交由元素进行处理
<div v-on:click.capture="doThis"></div>

// 只当在event.target是当前元素自身触发处理函数
// 即事件不是从内部元素触发的
<div v-on:click.self="doThat">..</div>

按键修饰符

// .enter 回车键
<input v-on:keyup.enter="submit">

// .delete删除键
<input v-on:keyup.deleter="handle">

使用修饰符要注意顺序，相应的代码会以同样的顺序产生。

v-on:click.prevent.self 会阻止所有的点击

v-on:click.self.prevent 只会阻止对元素自身的点击

全部的按键别名：

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

自定义按键事件修饰符

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用v-on:keyup.f1

Vue.config.keyCodes.f1 = 112

<body>
 <div id="app">
  <input type="text" v-on:keyup.aaa="handle" v-model="info">
 </div>
 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript">
 Vue.config.keyCodes.aaa = 65
 var vm =  new Vue({
  el: '#app',
  data: {
   info: ''
  },
  methods: {
   handle: function(event) {
    console.log(event.keyCode)
   }
  }
 });
</script>

应用实例，简单的计算器

需求，实现简单的加法计算，分别输入数值a和数值b，点击计算按钮，结果显示在下面

<body> 
<div id="app">
<h1>计算器</h1>

<div>
<span>数值a</span>
<span>
<input type="text" v-model="a">
</span>
</div>

<div>
<span>数值b:</span>
<span>
<input type="text" v-model="b">
</span>
</div>

<div>
<button @:click="handle">计算</button>
</div>

<div>
<span>计算结果：</span>
<span></span>
</div>
</div>

<script type="text/javascript" src="js/vue.js"></script>

<script type="text/javascript">
 var vm = new Vue({
  el: '#app',
  data: {
   a: '',
   b: '',
   result: ''
  },
   methods: {
    handle: function() {
     // 实现计算逻辑
     this.result = parseInt(this.a) + parseInt(this.b);
    }
   }
 });
</script>

属性绑定

vue如何动态处理属性呢？

// v-bind指令
<a v-bind:href="url">跳转</a>

// 缩写方式
<a :href="url">跳转</a>

考察v-model指令的本质

<body>
<div id="app">
<input type="text" v-bind:value="msg" v-on:input="handle">
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">

var vm = new Vue({
 el:'#app',
 data: {
  msg: 'dada',
 },
 methods: {
  handle: function(event) {
   this.msg = event.target.value;
  }
 }
})

优化：

<input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">

样式绑定

class样式处理

对象语法

<div v-bind:class="{ active: isActive }"></div>

数组语法

<div v-bind:class="{activeClass, errorClass}"></div>

数组绑定样式的语法：

<div v-bind:class="[activeClass, errorClass]'>dada</div>

var vm = new Vue({
 el: '#app',
 data: {
  activeClass: 'active',
  errorClass: 'error'
 },
 methods: {
  handle: function(){
   this.activeClass= '',
   this.errorClass= '',
  }
 }
});

对象绑定和数组绑定可以结合使用，class绑定的值可以简化操作。

v-bind:class="[activeClass, errorClass, {test: isTest}]"

// 数组的简化
arrClasses: ['active', 'erro'],

// 对象的简化
objClass: {
 active: true,
 error: true
}

style样式处理

// 对象语法
<div v-bind:style=" { color: activeColor, fontSize: fontsize }"></div>

// 数组语法
<div v-bind:style="[baseStyle, overridingStyles]"></div>

分支循环结构

v-if
v-else
v-else-if
v-show

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>

也可以用 v-else 添加一个“else 块”：

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

v-if和v-show的区别

v-if控制元素是否渲染到页面

v-show控制元素是否显示，已经渲染到了页面

循环结构

// v-for遍历数组
<li v-for="item in list">{{item}}</li>

<li v-for="(item, index) in list">{{item}}+","+{{index}}</li>

<li :key="item.id" v-for="(item,index) in list">{{item}}</li>

key的作用：帮助vue区分不同的元素，从而提高性能

v-if和v-for的使用

// v-for遍历对象
<div v-for="(value, key, index) in object"></div>

// v-if和v-for
<div v-if="value==12" v-for="(value,key,index) in object"></div>

for...in...循环不建议遍历数组，只遍历对象

实例：

Vue实现Tab选项卡

主要思路:

点击不同 tab

获取 tab 选项卡下标并为其动态绑定一个class(选中状态时的样式)

点击时使 tab 对应的内容下标与 tab 选项卡下标保持一致

使用 v-show / v-if 指令控制内容显示与隐藏

<div class="parts">
    <span @click="func('A');" v-bind:class="{'active':(active=='A') }">A</span>
    <span  @click="func('B');" v-bind:class="{'active':(active=='B') }">B</span>
    <span  @click="func('C');" v-bind:class="{'active':(active=='C') }">C</span>
</div>

<div class="block block1" v-if="block=='A'">
    A block
</div>
<div class="block block1" v-if="block=='B'">
    B block
</div>
<div class="block block1" v-if="block=='C'">
    C block
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            active:'A',
            block:'A'
        },
        filter:{
 
        },
        watch:{
 
        },
        methods: {
            func:function(c){
                this.active=C;
                this.block=C;
            }
        }
    });
</script>

<template id="tp1">
    <div id="nav">
        <ul>
            <li v-for="item in array" @click="choose(item)" :class='content===item?"pink":"blue"'>{{item}}</li>
        </ul>
        <div id="div">{{content}}</div>
    </div>
</template>

<script>
    //创建一个组件
    var component=Vue.extend({
       template:"#tp1",
        data:function () {
            return{
              content:"北京",
              array:["北京","上海","杭州","广州","深圳"]
           }
        },
        methods:{
           choose:function (item) {
            this.content=item;
           }
        }
    });
    //注册一个组件
    Vue.component("test",component);
    new Vue({
        el:"#app",
        data:{
            name:"选项卡组件案例"
        }
    });
</script>

<template>
    <div>
      <div id="tab">
        <div class="tab-tit">
          
          <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
          <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
          <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
          <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
        </div>
        <div class="tab-con">
          
          <div v-show="curId===0">
            html<br/>
          </div>
          <div v-show="curId===1">
            css
          </div>
          <div v-show="curId===2">
            javascript
          </div>
          <div v-show="curId===3">
            vue
          </div>
        </div>
      </div>
    </div>
</template>

在博客平台里，未来的路还很长，也希望自己以后的文章大家能多多支持，多多批评指正，我们一起进步，一起走花路。

非常感谢读者能看到这里，如果这个文章写得还不错，觉得「达达」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话， 求点赞👍 求关注❤️ 求分享👥 对暖男我来说真的

非常有用！！！

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info：

【作者】：Jeskson
【原创公众号】：达达前端小酒馆。
【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
【转载说明】：转载请说明出处，谢谢合作！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客