标签：DOM vue clock 绑定 Vue msg 模板

Vue模板

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

模版语法

• 插值表达式
• 指令
• 事件绑定
• 属性绑定
• 样式绑定
• 分支循环结构

什么是指令？

指令是一种特殊的自定义属性，其本质就是自定义属性，指令格式由：v-开始。（例如：v-cloak)

v-cloak指令

作用：解决插值表达式的闪动问题。

现象：F5不断刷新的过程中，差值表达式：{{msg}} 和 hello,world 会偶尔交互出现。原因：vue先展示{{msg}},然后再渲染成具体的html。

背后原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果。

例子

<style>
    //添加css样式
    [v-cloak] {
        display: none;
    }
</style>
<div id='app'>
    <!-- 插值表达式，div中添加v-cloak属性 -->

    <div v-cloak >{{msg}}</div>
    <!-- 插值表达式，msg在F5刷新的时候会不断地闪动（一会儿是{{msg}}一会儿是"hello world" -->
    <div>{{ msg }}</div>
</div>

<!-- 先下载vue.js -->
<script type='text/javascript' src='js/vue.js'></script>
<script>
//1. html中书写标签
//2. 引入vue.js
//3. 使用vue进行数据渲染。
var vm = new Vue(
    {
        el: '#app', //绑定到id选择器
        data: {
           "msg": "hello world"
        }
    }
)
</script>

传送门：2021最新测试资料&大厂职位

博主：测试生财（一个不为996而996的测开码农）

座右铭：专注测试开发与自动化运维，努力读书思考写作，为内卷的人生奠定财务自由。

内容范畴：技术提升，职场杂谈，事业发展，阅读写作，投资理财，健康人生。

csdn：https://blog.csdn.net/ccgshigao

博客园：https://www.cnblogs.com/qa-freeroad/

51cto：https://blog.51cto.com/14900374

微信公众号：测试生财（定期分享独家内容和资源）

标签：DOM,vue,clock,绑定,Vue,msg,模板
来源： https://www.cnblogs.com/qa-freeroad/p/14620293.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。