这是我参与「第四届青训营 」笔记创作活动的的第3天
一、vue框架回顾
1. 本地应用
①v-text
◆v-text指令的作用是： 设置标签的内容(textContent)
◆默认写法会替换全部内容，使用差值表达式{}可以替换指定内容
◆内部支持写表达式
html标签:
<-div id="app">
<-h2 v-text="message"><!会替换h2标签内的所有的内容-->
<-h2>深圳 {{message}}<!插值表达式可替换指定部分内容-->
<-/div>
script内容：
var app=new Vue({ el:"#app", data:{ message:"程序员" } })
②v-html
设置innerHTML，结构与上一致
与v-text的差别在于会解析引号内的html标签
③v-on
◆V-on指令的作用是：为元素绑定事件
◆事件名不需要写on
◆指令可以简写为@
◆绑定的方法定义在nethods属性中
◆方法内部通过this关键字可以访问定义在data中数据
代码实现：
案例经验总结：
◆创建Vue示例时：el(挂载点)，data(数据)，methods(方法)
◆v-o指令的作用是绑定事件，简写为@
◆方法中通过this,关键字获取data中的数据
◆v-text指令的作用是：设置元素的文本值，简写为0}
◆v-html指令的作用是：设置元素的innerHTML
④v-show
根据表达值得真假，切换元素的显示和隐藏：
◆V-Show指令的作用是：根据真假切换元素的显示状态
◆原理是修改元素的display,实现显示隐藏
◆指令后面的内容，最终都会解析为布尔值
◆值为true元素显示，值为false元素隐藏
◆数据改变之后，对应元素的显示状态会同步更新
⑤v-if
◆V-指令的作用是：根据表达式的真假切换元素的显示状态
◆本质是通过操纵dom元素来切换显示状态
总结：v-show与v-if的差别
◆v-if 为false,从dom树中移除，v-show只修改元素的display,实现显示隐藏，但不删除
◆频繁的切换v-show,反之使用v-if前者的切换消耗小
⑤v-bind
设置元素的属性（比如：src，title，class）
⑥v-for
⑦ v-on补充：
⑦ v-model ：
获取和设置表单元素的值（双向数据绑定）
