Vue基础一文速通（基础语法篇）

目录

一、插值表达式

二、指令

         2.1  v-text

2.2  v-html

2.3 v-cloak

2.4  v-once

2.5  v-bind

2.6  v-on

2.6.1  语法

2.6.2  v-on的修饰符

2.6.3  v-on的事件对象event

2.6.4  v-on的按键修饰符

​2.7  v-model

2.7.1  v-model的解释

2.7.2  v-model 普通文本框

2.7.3  v-model 单选/复选框

2.7.4  v-model 表单修饰符

2.8  v-for

2.8.1 v-for  循环遍历数组

2.8.2 v-for  循环遍历对象

2.9  v-if 

2.10  v-show

2.11  自定义指令 

2.11.1  定义

2.11.2  钩子函数

2.11.3  全局指令 

2.11.4  局部指令 

2.12   computed计算属性

 2.13  watch监听属性

2.13 .1  语法一

2.13 .2  语法二  

2.14  filter过滤器

三、总结

---

一、插值表达式

是vue框架提供的一种在HTML模板中绑定数据的方式，也叫 “Mustache”语法,。

使用{{变量名}}方式绑定Vue实例中data中的数据变量，会将绑定的数据实时的在视图中显示出来。

    
    {{msg}}

    
    {{bool ? '我是true打印的文字' : '我是false打印的文字'}}

    
    {{bool && 'bool为真才显示我'}}

    
    {{bool || 'bool为假才显示我'}}

    
    {{ getName() }}

二、指令

2.1  v-text

相当于JavaScript中的innerText。不能解析标签。

2.2  v-html

相当于JavaScript中的innerHtml。能够解析标签。

注意！！！该方法的安全隐患非常大，一般开发中不会使用！！！仅做了解！！！

2.3 v-cloak

用于解决浏览器在加载页面时，因时间差而存在而产生的闪动问题。

  {{ message }}

2.4  v-once

只渲染元素或者组件一次，之后元素或组件将失去响应式功能。

    
    

    
    
{{msg}}

2.5  v-bind

动态的绑定一个或者多个attribute，实现了可以允许我们在HTML内置的属性值中使用的变量。

2.6  v-on

绑定事件 JavaScript中的各类事件，点击事件，键盘事件等等

2.6.1  语法

    

        
        点我一下1

        
        点我一下2

        
        点我一下3
        
{{msg}}
    
    

2.6.2  v-on的修饰符

v-on的修饰符有以下四种

• .self          自身调用执行，阻止冒泡事件，一般运用在父盒子上
• .stop         阻止冒泡时间，一般运用在子盒子上
• .once        该事件类型的函数只执行一次
• .prevent    默认事件阻止

    

        
        
        

            
123
            
456
            
789
            
12345
        

        
        

            
123
            
456
            
789
            
12345
        

        
        点击

        
        跳转

    
    

2.6.3  v-on的事件对象event

vue的事件对象就是原生的JavaScript事件对象

        
        点我一下
        再点我一下

        
        
        还点我一下
    
    

2.6.4  v-on的按键修饰符

这里注意案件修饰符修饰的必须是按键事件（这里只列举常用的几个案件修饰符，更多修饰符请查看官网）

• .enter       按下回车键时调用
• .delete     按下删除键时调用
• .shift        按下shift时调用
• .ctrl         按下ctrl时调用
• .数字        按下对应键值时调用

2.7  v-model

2.7.1  v-model的解释

表单元素的绑定，实现了双向数据绑定，通过表单项可以更改数据。

v-model会忽略表单元素的value,checked，selected特性的初始值，而总是将Vue市里的数据作为数据来源，应该在data中声明初始变量。

2.7.2  v-model 普通文本框

v-model 在普通文本框上的使用

在input textarea select中    v-model绑定的是value

    {{msg}}


    
    
    

2.7.3  v-model 单选/复选框

v-model 在复选框上的使用

在checkbox radio 中 绑定的checed属性

    

        
        {{msg}}


        北京
        上海
        深圳
        杭州


        
        {{radioMsg}}


        男
        
        女
        
    
    

2.7.4  v-model 表单修饰符

表单修饰符：用来处理表单的一些特定行为

• .lazy            默认情况下Vue的数据同步采用input事件，使用.lazy将其修改为失去焦点时触发
• .number      自动将用户的输入值转为数值类型
• .trim            自动过滤用户输入的首位空白字符

    


        
    {{msg1}}

        


        
    {{msg2}}

        


        
    {{msg3}}

        


    
    

2.8  v-for

根据一组数组或对象的选项列表进行渲染

2.8.1 v-for  循环遍历数组

v-for（i参数1,参数2 ）in/0f    需要循环的数组对象
参数1：循环遍历数组的内容
参数2：循环遍历数组的索引下标

    

        
        
        

            
 
                姓名：{{item.name}}

                年龄：{{item.age}}

                索引下标：{{index}}
            
        
    
    

2.8.2 v-for  循环遍历对象

v-for  （参数1，参数2，参数3）  in/of    需要循环的数组对象
参数1：对象的属性值
参数2：对象的属性
参数3：对象属性索引下标

 

        
        

            

                索引下标：{{index}}
                属性：{{key}}
                属性值：{{val}}
            
        
    
    

2.9  v-if 

v-if  

v-else-if

v-else   后跟判断条件

    

        
        你好
        大聪明
        码农
        徐

    
    

2.10  v-show

    

        
        你好
        大聪明
        码农
        徐

    
    

2.11  自定义指令 

2.11.1  定义

除了核心功能默认内置的指令，Vue也允许开发者注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令绑定到元素上执行相关操作。

自定义指令分为：全局指令和局部指令，当全局指令和局部指令同名时以局部指令为准（局部指令的优先级高于全局的）。

2.11.2  钩子函数

• bind：在指令第一次绑定到元素时调用（在该环节中是获取不到父节点的，父节点是null）
• inserted：被绑定元素插入父节点时调用（在该环节中是可以获取到父节点的)
• update：数据更新时调用（该环节会重复触发）
• componentUpdated：指定元素及子节点更新完成后会触发
• unbind：取消绑定后触发

2.11.3  全局指令 

// 无参
Vue.directive('指令名',{
    钩子函数名: function(el){
        // 业务逻辑
        // el参数是挂载到的元素的DOM对象
        //

123

    }
}

// 传参
Vue.directive('指令名',{
    钩子函数名: function(el,binding){
        let param = binding.value
        // 业务逻辑
    },
    ....
}

2.11.4  局部指令 

directives: {
  指令名: {
    // 指令的定义
    钩子函数名: function (el,binding) {
      // 业务逻辑
    }
  }
}

2.12   computed计算属性

当涉及计算的属性发生改变，当前页面会刷新。

computed首次会执行，但是，当重复调用，且变量不改变时，后面就会直接调用缓存。不会再次执行。

    
    

         
{{ num }}
         
{{ doubleNum }}
         
{{ doubleNum }}
         
{{ doubleNum2() }}
         
{{ doubleNum2() }}
         
{{ JSON.stringify(obj) }}
         
         +1
    
    

 

 2.13  watch监听属性

watch作用：某个数据变量发生改变，我们监听他的改变的同步事件。

2.13 .1  语法一

             watch:{
                 msg:(newval,oldval)=>{//msg发生改变执行当前函数内容
                     console.log('msg发生改变了');
                     console.log(newval); //新的值  改变之后的值
                     console.log(oldval); //旧的值  改变之前的值
                 }
             }

 

2.13 .2  语法二  

使用该种语法的好处是可以进行深度监听。

 
    

       change2
    
    

2.14  filter过滤器

作用：对某个数据进行过滤，格式化，大小写，中英文，日期转换。钱格式化。

全局过滤器：

      Vue.filter(过滤器名，(val)=>{

          return  val进行处理

      })

   局部过滤器：

     new Vue({

         filters:{

             过滤器名:(val)=>{

                 return val进行处理

             }

         }

     })

    
    

        
{{ msg | toUpper }}
        
{{ my | toLower }}
    
    

三、总结

Vue的基础语法总结到此结束，后续还会更新Vue的底层原理篇，敬请期待~~~