Vue-基础语法(v-cloak、v-text、v-html、v-pre、v-once、双向数据绑定、mvvm、v-on、事件修饰符、按键修饰符、v-bind、v-model、绑定class数组...

Vue 是什么?

  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
  • vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合

使用Vue将helloworld 渲染到页面上

Vue-基础语法(v-cloak、v-text、v-html、v-pre、v-once、双向数据绑定、mvvm、v-on、事件修饰符、按键修饰符、v-bind、v-model、绑定class数组..._第1张图片

指令

  • 本质就是自定义属性
  • Vue中指令都是以 v- 开头

v-cloak

  • 防止页面加载时出现闪烁问题
  

  
{{msg}}

v-text

  • v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
  • 如果数据中有HTML标签会将html标签一并输出
  • 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值

{{msg}}

v-html

  • 用法和v-text 相似 但是他可以将HTML片段填充到标签中
  • 可能有安全问题, 一般只在可信任内容上使用 v-html ,永不用在用户提交的内容上
  • 它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。

{{message}}

v-pre

  • 显示原始信息跳过编译过程
  • 跳过这个元素和它的子元素的编译过程。
  • 一些静态的内容不需要编译加这个指令可以加快渲染
  {{ this will not be compiled }}
  
  {{msg}}
  


v-once

  • 执行一次性的插值【当数据改变时,插值处的内容不会继续更新】
  

  
{{msg}}
{{info}}

双向数据绑定

  • 当数据发生变化的时候,视图也就发生变化
  • 当视图发生变化的时候,数据也会跟着同步变化

v-model

  • v-model是一个指令,限制在