标签：总结 vue DOM 插值 学习 Vue 指令 msg data
vue学习总结（三）
模板语法
官方：
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
意思是说Vue可以通过模板语法来根据Vue实例数据更改DOM的渲染，底层用了虚拟DOM技术比较虚拟DOM来计算DOM的改变，从而能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
文本插值：{{}}
官方：
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
文本插值不单单可以写data对象中的属性也可以写js表达式，但不能写js语句
以下可以：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
以下不行：
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
指令（部分）（更多请看官方API）
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
v-once
刚才说到绑定的数据对象上的属性(对应插值处的属性)发生了改变，插值处的内容都会更新，可以使用v-on指令使得绑定的数据对象上的属性(对应插值处的属性)发生了改变，插值处的内容不更新。即插值处中只会保持data对象的属性(对应插值处的属性)的初始值。
示例：
<body>
<div id="app">
<span v-once>这个将不会改变: {{msg}}</span>
<button @click="handleClick">点击改变</button>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'Hello'
},
methods: {
handleClick: function() {
this.msg = 'zds'
}
}
})
</script>
运行效果：
发现点击按钮插值文本没有改变。其中选项对象中的method属性是存放方法函数的地方，@click表示监听dom的点击事件，@是v-on:的缩写，v-on指令是监听事件的指令。
v-html
插值文本是不能识别html标签的，比如：
<body>
<div id="app">
<span>{{msg}}</span>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '<span>Hello</span>'
},
})
</script>
运行截图：
而使用v-html指令则可以：
<body>
<div id="app">
<span v-html="msg"></span>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '<span>Hello</span>'
},
})
</script>
运行截图：
有v-html的标签会覆盖其中的内容：
<body>
<div id="app">
<span v-html="msg">hhh!</span>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '<span>Hello</span>'
},
})
</script>
运行截图：
官方：
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。(这个指令对可信内容使用，如果是用户提供的内容不要使用这个指令)
v-if
v-if 指令将根据data中 seen 的真假来决定插入还是移除 < p > 元素。
点击按钮切换seen的真假值示例：
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<button @click=handleClick>切换</button>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
seen: true
},
methods: {
handleClick: function() {
this.seen = !this.seen
}
}
})
</script>
初始时：
点击切换后：
发现有v-if指令的标签在v-if为假值时标签没有渲染
v-show
官方：
根据表达式之真假值，切换元素的 display CSS property
<body>
<div id="app">
<p v-show="seen">现在你看到我了</p>
<button @click=handleClick>切换</button>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
seen: true
},
methods: {
handleClick: function() {
this.seen = !this.seen
}
}
})
</script>
初始时：
点击切换后：
发现标签在v-show为假值时，标签任然渲染，只是添加了一个内嵌的css属性：display:none;所以如果涉及到频繁切换的标签用v-show能减少dom重绘重排。
v-bind
用于绑定标签属性，使得标签的属性的值随着data对象对应的属性的值变化而变化。
实例：
<a v-bind:href="url">...</a>
简写：
<a :href="url">...</a>
v-bind绑定动态属性：
<a :[attributeName]="url">...</a>
data {
attributeName: 'href',//必须为字符类型
url: 'xxx'
}
v-on
用于绑定事件监听事件，使得标签的监听事件的值随着data对象对应的属性的值变化而变化。
实例：
<a v-on:click="doSomething">...</a>
简写：
<a @click="doSomething">...</a>
v-on绑定动态监听事件
<a @[eventName]="doSomething">...</a>
data {
eventName: 'click',//必须为字符类型
url: 'xxx'
}
标签：总结,vue,DOM,插值,学习,Vue,指令,msg,data 来源： https://blog.csdn.net/zdshhh/article/details/118516313
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。