模板语法和计算属性

模板语法

内容

vue中的元素内容使用mustache模板引擎进行解析

mustache : https://hithub.com/janl/mustache.js

指令

指令会影响元素的渲染行为，指令始终以v-开头

基础指令：

• v-for 循环渲染指令

v-for = "(abc, i) in product"
abc:临时变量，随便什么字符都可以
i:下标(可省略)
product:数组可循环的/可迭代的

• v-html

<div v-html="<p style="color:"red">good!<p>"</div>
文本直接显示到内容部分会将原文本进行编码，这是出于安全性的考虑。而使用v-html则将文本变成真实的代码,将<p style="color:"red">good!<p>作为div元素的innerHTML来渲染

• v-on :注册事件

<button v-on:click=" ">内容</button>

• 该指令由于十分常用，由此提供了简写@
• 事件支持一些指令修饰符，如prevent它可以阻止浏览器默认行为
• 事件参数会自动传递

• v-bind ：绑定动态属性
  • 该指令由于十分常用，因此提供简写:
• v-show :控制元素的可见度 （无论是否能被看见，元素都存在）
• v-if、v-else-if、v-else ：控制元素生成 （当元素不被看见时，元素不存在）
• v-model : 双向数据绑定
  • 该指令是v-on和v-bind的复合版

进阶指令
v-slot
v-text
v-pre
v-cloak
v-once
自定义指令

特殊属性

最重要的属性：key
该属性可以干预diff算法，在同一层级，key值相同的节点会进行对比，key值不同的节点则不会

在循环生成的节点中,vue强烈建议给予每个节点唯一且稳定的key值

计算属性

computed : {
    //仅访问器
    prop() {
        return ...
    }
    //访问器 + 设置器
    fullProp : {
        get(){
            return ...
        },
        set(val){
            ...
        }
    }
}

计算属性和方法的区别：

• 计算属性可以赋值，而方法不行
• 计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算
  属性和方法的区别：
• 计算属性可以赋值，而方法不行
• 计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算
• 凡是根据已有数据计算得到新数据的无参函数，都应该尽量写成计算出属性，而不是方法，以此来提高效率