Vue的基础语法

Vue基础语法

想要学好VUE，必须先掌握它的语法
vue的语法有很多种

1. 插值语法
   v-once：该指令后面不需要跟任何的表达式；元素和组件只渲染一次，不会随着数据的改变而改变；
   v-html：该指令后面往往会跟上一个string类型，将string的html解析出来并进行渲染；
   v-pre：用于跳过元素和它子元素的编译过程；用于显示原本的Mustache语法；
   v-cloak：当元素未解析式，加入v-clock，让元素解析后在显示；
   v-text：用于数据显示在界面中；与mustche相似；

2. 绑定属性
   v-bind
   语法：v-bind：属性名=“变量”
   作用：动态绑定属性
   绑定class
   对象语法：class
   数组语法：class（较少用到）
   绑定样式
   对象语法：style
   数组语法：style

3. 事件绑定
   v-on
   语法：v-on：事件名=“事件处理函数”
   作用：微元素绑定事件
   简写：@事件名=“时间处理函数”

4. 事件修饰符
   .stop：表示停止冒泡事件
   .prevent：表示阻止默认事件
   .enter：表示监听某个键盘的键帽
   .once：表示只会触发一次
   .self：表示纸黏土触发该元素的事件
   .capture：表示添加事件侦听器时使用事件捕获模式

5. 条件渲染
   v-if
   语法：v-if=‘表达式’
   作用：根据表达式的真假切换元素的显示状态
   v-else
   v-else语法和javascript的else一致，必须配合v-if配合使用，不能和show一起使用
   v-else-if
   语法：v-else-if=‘表达式’
   v-show
   语法：v-show='表达式
   说明：通过修改元素的display属性值，显示或隐藏元素

6. 列表渲染
   v-for
   语法：v-for=‘item in items’
   作用：绑定数据到数组来渲染一个列表、数组
   说明：
   item：当前遍历的元素
   items：数组、数字、字符串等

7. 表单输入绑定
   v-model
   语法：v-model:变量
   作用：负责监听用户的输入事件以更新数据
   说明：实现数据的双向绑定，只能用在表单元素中