Vue模版指令

前言

这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题

于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。

微信小程序搜索：Python面试宝典

或可关注原创个人博客：https://lienze.tech

也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习

基本语法

每个vue应用都是通过实例化一个新的vue对象开始的

第一个模板语法，首先页面中要具有vue可以操作的主对象元素

这个dom下的元素将会被vue接管

<div id="content">
    {{ message }}
    <!-- 这个也叫做插值表达式 -->
</div>

接管该标签，初始化vue实例对象

var vm = new Vue({ 
    // vm这个变量不允许使用连字符，可以使用下划线，比如vm-data是不允许的
    el: "#content", 
    // 对应document中的一个标签，当vue对象创建后，这个标签内的区域就被接管
    data: {
        message: "这是vue里的变量"
    }
})

当一个vue实例被创建时，vue的响应式系统中加入了对其data对象中能找到的所有属性

当这些属性值被改变时，视图也会发生相应，并将对应属性更新为新的值

模版指令

模板语法指的是如何将数据放入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>