VUE模版指令

模版指令

模板语法指的是如何将数据放入html中

Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层 Vue 实例的数据

所有Vue的模板都是合法的 HTML ，所以能被遵循规范的浏览器和HTML 解析器解析

差值表达式

数据绑定最常见的形式就是使用Mustache语法(双大括号) 的文本插值，也就是上面示例中的{{ message }}

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

在vue中定义插值表达式message对应的变量

var vm = new Vue({
    el: "#app", // getElementById('app')
    data: {
        message: "vue",
    },
})

函数返回值

除了插值表达式，函数的返回值也可以直接在页面调用渲染

<div id="app">
    <h1>{{ classType }}学习</h1>
    <p>{{ content }}</p>
    <span>{{ describe() }}</span>
</div>

describe是一个方法，可以直接在双大括号的表达式中进行调用

var vm = new Vue({
    el: "#app", // getElementById('app')
    data: {
        classType: "vue",
        content: "这是vue的一个测试",
    },
    methods:{
        describe:function(){
            return "这是一个函数的返回值"
        },
    }
})

v-html

将内容按照html格式进行插入，经常用于富文本数据的渲染

<div id="app">
    <p v-html="content"></p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
      content: "<b>段落标签</b>文本内容"  
    },
})

注意，在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击

v-html一般只用在可信内容中，永不用在用户提交的内容上

v-text

将内容按照文本格式进行插入，但会覆盖原有标签内的内容，不会有加载的闪烁问题

<div id="app">
    <p v-text="contetn"></p>
    <p>
       	{{ gender ? '男' : '女' }}
        <!-- ok? true:false -->
    </p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
      	gender: true, // 变量值为true时，显示模板变量中左边的值
      	content: "<b>段落标签</b>文本内容"  
    },
})

但是不会解释文本内容为实际的html标签等样式效果

v-cloak

解决使用差值表达式时页面渲染过程，由于变量没有初始化而导致的闪烁问题，可以通过设置浏览器网速效果进行复现

通俗的来说，比如{{ message }}变量的实际内容没有被创建，那么此时页面只会展示出{{ messsage }}这样的效果，之后当变量初始化之后，{{ message }}将变化为实际的值，此时变化的过程我们称作闪烁

v-cloak指令可以隐藏未编译的标签直到实例准备完毕

<div id="app">
    {{ message }}
</div>
<script>
    new Vue({
        el: "#app",
        data:{
            message: "测试",
        }
    })
</script>

在上面的代码中，如果网速够慢的清空下，页面首先加载显示出的内容是{{ message }}

解决办法：通过v-clock指令，在使用到模板变量的标签上写入，并设置一个v-clock的类样式

<style type="text/css">
    [v-cloak]{
        display: none;
    }
</style>

<div v-cloak id="app">
	<p v-cloak>{{ message }}</p>
</div>