vue系统指令

用于表单的数据绑定,这个指令需要些在表单标签中；作用:监听表单中值的变化,把表单中的变化的值给对应的数据；表单中的值 <=> 数据得我变化、这种关系就叫做 数据绑定。

vue系统指令

• 1.v-model 指令
  • 用于表单的数据绑定,这个指令需要些在表单标签中
  • 作用:监听表单中值的变化,把表单中的变化的值给对应的数据
  • <input type="text" v-model="data中的键"/>
  • 表单中的值 <=> 数据得我变化 这种关系就叫做 数据绑定
• 2.v-pre 指令
  • 原样输出,如果需在在vue的操作范围内就想输入 {{name}} 让vue不解析{{}}插值语法
  • 原样输出,
• 3.v-html 指令
  • 指令 这个指令也是文本插值的一种
  • 语法格式: <元素 v-html="data中的数据"></元素>
• 4.v-if 指令
  • 是控制元素是否显示的,如果指令的指令值是true,那么就是显示该元素,如果值为false,那么就不显示该元素
• 5.v-show 指令
  • 是控制元素是否显示的,如果指令的指令值是true,那么就是显示该元素,如果值为false,那么就不显示该元素
• 6.v-cloak 斗篷的指令
  • 面试题:如果防止页面初始化闪动问题,可以使用斗篷
    • 1.我们在开发中,引入的js文件(js的框架文件),建议写在后边,如果写在前边,容易出现网络不好,导致的这个文件 加载比较慢,如果这个文件没有加载完成,会直接影响后边的页面渲染
  • 斗篷起到了什么作用:
    • 就会在vue的文件没有加载完成,并没有实例化的时候,先将元素隐藏起来,然后如果加载完成,并完成了实例化, 那么就让隐藏属性失效
  • 斗篷在使用的时候语法格式:
    • <style> [v-cloak]{ display:none; } </style> <元素 v-cloak></元素>
• 7.v-text
  • 也是文本插值
  • 与{{}}没有区别
  • 如果使用v-text 进行插值,就不要用{{}},因为{{}}优先级高, 所以{{}}优先插入到元素中,然后在执行v-text,{{}}的值会被覆盖
• v-html与{{}}的区别
  • 使用{{}}进行文本渲染,渲染的内容是标签,默认是不会解析的,这样可以防止xss攻击
  • v-html可以插值语法解析数据中打代码
• v-if和v-show的区别:
  • v-if的值如果为true 就显示元素,如果值为false.就删除该元素的节点!!!
  • v-show的值如果为true 就是显示元素,如果只为false,就给该元素设置一个style的属性,并在style中添加 display:node 隐藏的属性
  • 使用环境: 如果是频繁的操作元素的显示或隐藏,那么就使用v-show,因为给节点添加属性比删除节点性能高些
  • <!-- 我们一般不会把v-if 或 v-show 的值直接写死,建议写成变量(data中的键) -->