Vue2.0——基础指令

文章目录

      • 3、页面数据闪烁
      • 4、基础指令
      • 5、属性绑定
      • 6、方法和事件绑定
        • 1、事件中的this
        • 2、**事件修饰符**
      • 7、样式绑定

3、页面数据闪烁

​ 界面加载的时候会把节点直接挂载到文档树中,导致{{msg+“666”}}这个字符串会显示一下,vue对象生成data数据时候 回去刷新界面 把{{msg+“666”}}字符串替换成结果字符串,所以会出现页面闪烁的bug。

解决方案:(使用v-html,v-text指令操作,或者css中加[v-cloak] {display:none}

①添加一个v-cloak,首先添加隐藏样式, 在vue框架运行时,会把项目中的v-cloak属性清空,这样处理只会渲染一次


{{msg1}}
{{msg4}}
baidu

② 不要用el关联方式,用$mount的方式挂载。

③尽量的使用指令。v-text指令底层:innerText='‘替换内容;v-text指令底层:innerText=’'替换内容,可以识别标签

4、基础指令

  1. 差值表达式,也叫声明式渲染/文本差值:{{表达式}}
  2. v-html:相当于innerHTMl
  3. v-text:相当于innerText
  4. v-pre:插件表达式就被识别为文本,而不是js表达式
  5. v-cloak:当网速很慢的时候,v-cloak结合css样式,可以解决页面出现{{xxx}}的问题。
    Vue实例创建完毕并接管容器后,会删除v-cloak属性
  6. v-bind: 绑定属性

笔试题:vue中常用的指令有哪些?用处?(12分)

案例


{{msg1}}
{{msg4}}
baidu

你可能感兴趣的:(vue,前端,javascript,html)