总结: Vue2中基础语法(一)

总结: Vue2中基础语法(二)_hmxs_hmbb的博客-CSDN博客

总结: Vue2中基础语法(三)_hmxs_hmbb的博客-CSDN博客

总结: Vue2中基础语法(四)_hmxs_hmbb的博客-CSDN博客

总结: Vue2中基础语法(五)_hmxs_hmbb的博客-CSDN博客

这里总结vue指令和基础API.

目录:

        1.插值表达式

        2.指令v-bind

        3.指令v-for

        4.指令v-text和v-html

        5.指令v-if和v-show

        6.指令v-if, v-else-if和v-else

        7.指令v-on和methods

        8.指令v-on事件对象,事件修饰符和按键修饰符

        9.指令v-model双向绑定和v-model修饰符

        10.动态修改标签的class样式

        11.动态修改标签的style样式

        12.计算属性

        13.计算属性完整的写法

        14.vue2中过滤器(v3已废弃)

        15.vue监听器

        16.深度监听和立即执行

1. 插值表达式

        插值表达式就是vuejs实现将数据渲染到页面上的方式, 不需要再通过DOM的操作; 它里面可以执行简单的js代码. 也就是使用{{ }}语法的就是插值表达式.

格式: {{ 数据 }}

        也就相当于在页面上占个位置, 然后将data中的数据渲染到页面.

里面可以写什么:

        可以是三元, 算术运算, 逻辑运算, 拼接等等, 只要console.log可以输出的都可以在里面实现.

不可以写什么:

        里面不能出现循环, 分支, 函数, 声明变量等等.

2. 指令v-bind

        动态绑定标签上的属性值, 属性值一般是获取data中的数据. 标签上的属性值不能使用插值表达式来设置.

格式:

        ① <img v-bind:src = "data中的数据">        ②<img :src = "data中的数据">

3. 指令v-for

        用于循环, 一般是对页面元素进行循环渲染; 循环的次数根据数据的数量来决定.

格式:

        <li v-for = "(item, index) in 数据" :key = "唯一值"> </li> 

其中的数据可以是什么:

        数据可以是数组, 对象和数字, 数组是最常用的.

 4. 指令v-text和v-html

        跟innerText和innerHTML一样使用.

格式:

        <p v-text="vue变量"> </p>        <html="vue变量"> </p>

5. 指令v-if和v-show

        控制标签的可见和不可见, 区别(我会单独写一篇博客). 

格式:

        这个 "vue变量" 的结果一定是一个布尔值, true就是可见; false就是不可见.

        <p v-if="vue变量"> </p>        <p v-show="vue变量"> </p>

 

6. 指令v-if, v-else-if和v-else

        和js中的分支结构是一样的

格式:

        <标签 v-if="条件"> </标签> 
        <标签 v-else-if="条件"> </标签> 
        <标签 v-else-if="条件"> </标签> 
        <标签 v-else> </标签>

 

 7. 指令v-on和methods

        给标签绑定事件, 和DOM中的事件是一个性质.

        methods是一个对象, 配合v-on一起使用; 在里面可以使用this访问当前组件的所有成员.

格式:

        ①<button v-on:事件名="少量的代码"> </button>

           <button v-on:事件名="methods中的代码"> </button>

           <button v-on:事件名="methods中的代码(参数)"> </button>

        ②<button @事件名="少量的代码"> </button>

           <button @事件名="methods中的代码"> </button>

           <button @事件名="methods中的代码(实参)"> </button>

 

8. 指令v-on事件对象,事件修饰符和按键修饰符

        跟DOM中的event事件对象是一样的.

        事件修饰符就是在事件名后面加上 ".修饰符" . 例如: stop(阻止事件冒泡), prevent(阻止默认行为), once(只执行一次). <标签 @事件名.修饰符="methods里函数" /> .

        按键修饰符跟事件修饰符一样".按键修饰符", 作用就是监听某一个按键. 例如:@keyup.enter, @keydown.esc.

格式:

        ①没有参数, 形参中直接使用        ②有参数, 形参中传入"$event"指代事件对象

9. 指令v-model双向绑定和v-model修饰符

        它是对双向的数据绑定, 通常使用在表单控件里面; 因为只有表单控件才可以接受到用户输入的信息.

• 数据变化 -> 视图自动同步
• 视图变化 -> 数据自动同步

        v-model修饰符和事件修饰符相似, 也是在后面加上".修饰符". 例如: v-model.number(转换为数字类型), v-model.trim(去除首尾空格), v-model.lazy(当前元素失去交单的时候视图修改数据)

 

10. 动态修改标签的class样式

        配合v-bind动态绑定标签的class样式. 它们可以和静态的class样式共存, 样式有冲突的地方依据就近原则, 后面会层叠掉上面的样式.

格式:

        ①<标签 class = "style中的类名"> </标签 > (直接定死)

        ②<标签 :class = "data中的变量"> </标签 > (变量的值是style中的类名(字符串的形式))

        ③<标签 :class = "data中的数组"> </标签 > (数组中的值直接是style中的类名)

        ④<标签 :class = "data中的对象"> </标签 > (以键值对形式存在, 类名: true/false)

 

 

11. 动态修改标签的style样式

        它是行内样式, 比css样式使用的少; 通常我们会直接传入一个对象进去. 如果类名中带有"-"改为小驼峰命名法.

格式:

        <标签 :style="{css属性名: 值}" />

 

 12. 计算属性

        如果有一个数据需要依赖原有的数据通过一些逻辑处理得到的话, 就需要计算属性.

        简单的说, 就是从已有的数据A处理后得到的数据B, 它就需要计算属性.

        它和函数很相似, 但是不同; {{ fn( ) }}, {{ sum }} 前面是函数的调用, 后面是计算属性的调用方法. 在vue中会自动调用函数, 不能加小括号调用.

        它需要写在computed属性里面, 大对象包含方法. 函数内部必须有return返回. 并且有缓存.

        例如: 本次计算属性的方法以及执行过一次, 下次项目中在遇见同样的需求的话; 会先调用缓存, 这样可以提高渲染性能.

格式:

        {
    data(){},
    methods: {}
    // 声明计算属性
    computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        计算属性名1 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }，
        计算属性名2 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }
    }
}

 

13. 计算属性完整的写法

        在一般的情况下, 我们直接调用的是get()方法; 其实它还有一个成员就是set(), 在没有声明set()的时候去修改计算属性的值会报错.

        当数据发生变化的时候, set方法会去设置get方法中的数据

        通常我们会将v-model动态绑定到计算属性上面(也就是这里的age).

格式:

        computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

14. vue2中过滤器

        它就是在数据在被渲染之前, 做一个格式转换. 被定义在filters中, 它在vue3中已经被废弃了.

格式:

        {
    data(){},
    computed:{},
    methods:{},
    // 定义过滤器
    filters: {
      // 属性名称（过滤器名称）：属性的值（过滤器处理函数）
      myFilter:function(value,其它参数){
           return 过滤后的结果
      }
    }
}

15. vue监听器

        监听器又被叫为侦听器, 它是监听数据值的改变(如: data, computed等等). 数据的类型有基本数据类型和应用数据类型. 被定义在watch大对象中.

格式:

        data(){},
        computed:{},
        methods:{},
        filters:{},
        watch: {
             "被监听的属性名" (newVal, oldVal){
     }
 }

 

 

 

16. 深度监听和立即执行

         如果监听一个基本数据类型, 直接使用watch监听是可以的; 但是如果监听的数据是一个引用数据类型的话, 就不可以了.

        因为引用数据类型中存的是内存地址, 只有改变地址才会被监听到; 所以需要深度监听.

        监听的属性名要和监听对象的名字要一样.

        立即执行就是, 当页面一加载完就被执行一次; 因为页面数据从无到有是一次变化.

格式:

        watch: {
            "要监听的属性名": {
               immediate: true, // 立即执行
               deep: true, // 深度监听复杂类型内变化
               handler (newVal, oldVal) {
        }
    }
}