Vue笔记二:Vue基本语法及指令

Vue实例

new Vue() 方法用于创建一个vue实例
一个Vue应用由至少一个vue实例作为根组件 以及可选的多个嵌套组件组成

Vue绑定语法

Vue 使用基于HTML的模板语法 ，当然也可以不用模板直接写渲染(render)函数使用JSX语法，此处不做讨论

文本插值
在html 文本 中标记可能发生变化的位置的{{变量}}语法 —— Mustache语法
只要元素的文本内容中某个位置可能随变量自动变化时就要用被绑定语法标记
如何:
1.{{ }}在newVue加载时会扫描到{{变量}}的位置 并在数据模型data中查找同名变量 用变量值自动代替{{}}的位置
2. {{ }}可以理解为 模板字符串中的${}可以写任何一个有返回值的js表达式
3. {{ }}会将数据解释为普通文本 而非HTML代码，如果要输出HTML需要使用 v-html指令
属性插值
在html 标签内 标记可能发生变化的属性值时 应当使用v-bind指令
对于值为布尔值的状态属性 如果值为null undefined false 该属性不会出现在渲染出来的元素中

Vue 指令

指令是 v- 开头的 为html提供增强功能的特殊属性 如变量分支循环等

1. v-bind 用于绑定元素的属性值
   {{}}只能用于绑定元素的内容的变化 不能绑定元素属性值的变化
   当一个元素的属性值可能随变量变化时
   v-bind:属性名=“变量/表达式” 简写为 :属性名=“变量/表达式”
2. v-show 控制一个元素根据条件显示隐藏:
   <元素 v-show=“条件表达式”>
   条件表达式结果返回bool true显示 false隐藏
3. v-if v-else 两个元素根据条件二选一显示隐藏:
   <元素1 v-if=“条件表达式”> <元素2 v-else>
   每当newVue扫描页面时 或者data中变量发生更改时 都会自动计算v-if=后的条件表达式 如果v-if="true"则显示元素1 删除元素2 否则显示元素2删除 元素 1
   v-if v-else-if … v-else 多个元素根据条件多选一
   <元素1 v-if=“条件1”>
   <元素2 v-else-if=“条件2”>
   <元素3 v-else-if=“条件3”>
   …
   <元素n v-else>
   当一个条件成立时保留此元素 删除其余元素
   多个元素之间禁止插入其他元素
4. 根据数组反复生成多个相同结构的元素
   <元素 v-for="(元素值，下标)of 数组":key=“下标”>
   当new Vue扫描到v-for时 会找到data中指定的数组 遍历数组中每个元素
   每遍历一个元素 就会重复创建一个当前HTML元素
   每次遍历都会获得正在遍历的数组元素的值和下标 元素值和下标可在当前html元素及其子元素中用于绑定语法
   之后如果数组中的值发生变化会自动更新所有v-for生成的html的元素内容
   每次数组发生变化时都会把所有元素重新生成一次
   解决方法是：使用v-for时必须同时为元素绑定:key="i"属性 为了给元素一个唯一的标识 当数组中元素发生变化时根据此标识只找到需要更新的哪一个对应元素即可提高效率
   v-for遍历指令中 不能用下标修改数组中元素 因为下标不会被vue监控
   所有对数组的操作必须通过函数
   修改某个数组元素的值 arr.splice(start,count,value1,…)
5. v-html 用于在html的文本内容中绑定一段html代码片段
   v-once用于一次性绑定变量 首次绑定成功后 变量值改变 文本不会变化
6. v-on用于绑定事件
   <元素 v-on:事件名=“处理函数(实参值)”>
   简写为 <元素 @事件名=“处理函数(实参值)”>
   事件委托
   <父元素 @click=“处理函数($event)”>
   $event就是vue中独有的关键词代表dom中的实践对象
   e.target即为触发事件的目标子元素
7. v-pre 阻止{{ }}中的内容被vue编译
8. v-model 数据双向绑定
   V-model实质上是语法糖 凡是绑定可修改的表单元素的内容都要使用双向绑定
   普通的指令或{{}}绑定都是单向的 页面上即使修改表单内容也并不会返回
   1.绑定文本框或者文本域的内容
   标准写法:
   简写: 不需要加:属性
   所有带v-model的表单元素都会被自动绑定事件处理函数 自动变为
   
   2.绑定selec元素
   3.绑定radio元素
   
   当m->v绑定显示时会用变量值和所在radio元素的value作比较
   动态参数
   一些指令能够接收一个参数
   Vue2.6 开始 可以用[变量/表达式]作为一个指令的参数
   该变量/表达式值为最终的参数名称 string类型 异常值为null此时移除此次绑定，其余情况则会触发警告

修饰符
在指令参数后用 . 指明的特殊后缀 用于指出一个指令应该以特殊方式绑定
.prevent 使 v-on绑定的事件调用 event.preventDefault()

缩写
v-bind 可以省略
v-on 可以用 @代替

---

避免用户短暂看到 {{}} 语法
如果 newVue出现延迟加载 网页中的 {{}}就会被用户短暂看到
解决方法:
1.隐身斗篷 为要隐藏的元素添加 v-cloak属性
因为v-cloak自己不带认可隐藏的样式值 所以需要手动在页面中添加
[v-cloak]{display:none}
原理:当newVue()加载完后 会自动找到带v-cloak属性的元素 并自动移除此属性
2.用v-text=${} 代替{{}}绑定变量
<元素 v-text="要拼接的字符串内容"> v-text是属性 用户看不到
如果大范围的元素避免被看到{{}} 首选 v-cloak
如果是单个元素避免被看到{{}} 使用v-text

---

自定义指令
Vue.directive(“指令名称”,{
inserted(elem){
//会在标有该指令的元素被加载到页面时自动触发
}
})
new Vue扫描界面时 发现标有自定义指令的元素 就会自动触发inserted函数