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

1. Vue基本使用

1.1 Hello World基本步骤

    
   
        
    
     {  {msg}}
    
        
    
     {  {1 + 2}}
    
        
    
     {  {msg + '----' + 123}}
    
    
   
        

（1）实例参数

• el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
• data：模型数据（值是一个对象）

（2）插值表达式

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

（3）Vue代码运行

• 编译（Vue语法→原生JS语法）

2. Vue模板语法

2.1 前端渲染

2.2 模板语法概览

• 差值表达式
• 指令
• 事件绑定
• 属性绑定
• 样式绑定
• 分支循环结构

2.3 指令

• 指令的本质就是自定义属性
• 指令的格式：以v-开始（比如：v-cloak）

2.3.1 v-cloak指令

解决插值表达式存在的问题：“闪动”。

原理：先隐藏，替换好值之后再显示最终的值。

    
               
   
        
    
     {  {msg}}
    
    
   
        

2.3.2 v-text指令

• v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
• 如果数据中有HTML标签会将HTML标签一并输出，不会解析
• 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

   
    
        
    
    
    
        
             {  {msg}}    
   

2.3.3 v-html指令

• 用法和v-text相似，但是他可以将HTML片段解析并填充到标签中
• 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
• 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行HTML解析，但v-html会将其当HTML标签解析后输出。

   
    　　
    
 
        
    
{  {message}}
 
    　　
    
 
    
   

2.3.4 v-pre指令

• 显示原始信息跳过编译过程
• 跳过这个元素和它的子元素的编译过程
• 一些静态的内容不需要编译加这个指令可以加快渲染

   
    
    {  { this will not be compiled }}    	
    	
    {  {msg}}       
    
   

2.3.5 v-once指令

只编译一次，执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

   
  
      
    {  {msg}}
   

2.3.6 双向数据绑定v-model

MVVM设计思想：

• M (model)
• V (view)
• VM (View-Model)

低层实现原理：

上面两行等价

2.4 事件绑定

2.4.1 基本用法

   
    
    
     {  {num}}
    
    
    
        
     点击        
     点击1        
     点击2        
     点击3    
    
   

var vm = new Vue({       el: '#app',    data: {           num: 0    },    // methods中主要是定义一些函数    methods: {           handle: function() {               // 这里的this是Vue的实例对象+            console.log(this === vm);            //   在函数中想要使用data里面的数据,一定要加this             this.num++;        }    }});

2.4.2 传递参数

   
    
    
     {  {num}}
    
    
    
        
             
     点击1        
             
     点击2    
    
   

var vm = new Vue({       el: '#app',    data: {           num: 0    },    methods: {           handle1: function(event) {               console.log(event.target.innerHTML)        },        handle2: function(p, p1, event) {               console.log(p, p1)            console.log(event.target.innerHTML)            this.num++;        }    }});

2.4.3 事件修饰符

• .stop 阻止冒泡

跳转

• .prevent 阻止默认行为

跳转

2.4.4 按键修饰符

• .enter 回车键
• .esc 退出键
• .delete 删除键

自定义按键修饰符：

Vue.config.keyCodes.f1 = 112   // 全局定义

2.5 属性绑定

跳转

缩写形式：

跳转

2.6 样式绑定

2.6.1 class样式处理

对象语法：

数组语法：

2.6.2 style样式处理

对象语法：

数组语法：

2.7 分支结构

   
    优秀
   
   
    良好
   
   
    一般
   
   
    比较差
   
   
    测试v-show
   

v-show 和 v-if 的区别

• v-show本质就是标签display设置为none，控制隐藏
• v-show只编译一次，后面其实就是控制css，而v-if不停地销毁和创建，故v-show性能更好一点
• v-if是动态向DOM树内添加或者删除DOM元素
• v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

2.8 循环结构

（1）v-for遍历数组

{  {item}}
{  {item}} + '---' +{  {index}}

key的作用：

• key来给每个节点做一个唯一标识
• key的作用主要是为了高效的更新虚拟DOM，提高性能

   
  
    
...
   

（2）v-for遍历对象

   
    {  {v + '---' + k + '---' + i}}
   
   

（3）v-if和v-for结合使用（不推荐，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级）

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