Vue笔记 内置指令 v-text v-html v-cloak v-once v-pre

v-bind：单向绑定解析表达式，可简写为：xxx

v-model:双向数据绑定

v-for：遍历数组/对象/字符串

v-on：绑定事件监听，可简写为@

v-if：条件渲染（动态控制节点是否存在）

v-else：条件渲染（动态控制节点是否存在）

v-show：条件渲染（动态控制节点是否展示）

1、v-text

向其所在的节点中渲染文本内容,

与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}不会，还是插值语法用的多

{{name}}

2、v-html

{{name}}



new Vue({
   el:'#root',
   data:{
   name:'翘阳',
   str:'
你好啊
'
   }

})

浏览器登录页面时，会自动给你保存cookies，非常重要，包含着你的信息。

v-html的安全性问题：

      （1）在网站上有动态渲染任意HTML是非常危险的，容易导致XSS攻击

      （2）一定要在可信的内容上使用v-html，永远不要在用户提交的内容上。

3、v-cloak

      （1）本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-claok属性

      （2）使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

{{name}}


 //服务器有5s的延迟，会导致页面闪现

 4、v-once

     （1）v-once所在节点在初次动态渲染后，就视为静态内容了

     （2）以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

5、v-pre 

     （1）跳过其所在节点的编译过程

     （2）可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译