Vue框架的使用和指令的学习

Vue是什么？
是一套用于构建用户界面的渐进式框架
（渐进式：可以有选择性使用该框架的一个或多个组件）

MVVM模式是什么？

• M: 即Model，模型，包括数据和一些基本操作
• V: 即View，视图，页面渲染结果
• VM: 即View-Model，模型与视图间的双向操作（无需开发人员
  干涉）
  MVVM模式设计理念
  视图和数据完全分离，渲染有框架自动完成

使用Vue

1. 引入vue.js
2. 定义渲染的html元素
3. 创建Vue实例：指定el（要渲染的html元素）
   data （参数）
   methoes（方法）
   computed（计算属性）
   watch（监控属性）

vue指令

插值表达式
语法: {{数据对象中的属性|运算表达式}}
这个表达式可以运用三元表达式和算术运算符去做一些判断或者是计算，还是蛮方便的。

---

1. v-model : 数据双向绑定
   语法: v-model=”数据对象中的属性名”|v-model=”数据对象中的属性名.变量名”
   默认绑定的是字符串类型，如果要转换数字类型可以使用
   v-model.number 实现数据类型转换
   (注意：数据对象中的属性必须先定义才能使用)

---

2. v-bind：绑定html元素的属性值
   语法: v-bind:html元素的属性值=”数据对象中的属性名”
   简写方式 ：直接使用 “:” 来替代 v-bind
   绑定的属性是可以叠加的，例如:
   
   
   其中我还发现了一些有趣的事情，例如现在我在遍历用户信息，但是我想做一个鼠标悬停展示数据
   的功能，原本的做法是添加方法然后引用悬停方法；
   但是使用v-bind绑定我想要展示的数据属性名就可以进行悬停展示了！这个原理我也还在研究，如果有懂的小伙伴的话可以给我留言告诉我一下！！Thanks♪(･ω･)ﾉ
   
   

---

3. v-on：为html元素绑定事件
   语法: @click=”函数名()” @html元素的事件名把前面的on去掉
   简写方式 ：使用 “@” 来替代on
   （注意：在创建Vue实例的时候，调用方法对象的时候，注意是methods: 方法，而不是method: 方法，少写了一个s是会报错的）

而常用的事件指令我这边也列出来了：

• @click：单击事件
• @blur：失去焦点事件
• @keyup：键盘按键按下并松开
• @focus：获取焦点事件
• @change：对应onchange改变事件
• @keydown：键盘按键按下事件
• @keypress：同上
• @mousedown：鼠标按下事件
• @mouseup：鼠标按下弹起
• @mouseenter：鼠标进入事件
• @mouseleave：鼠标离开事件
• @mouseover：鼠标进入事件

---

事件修饰符
我们绑定了事件，但是只是为事件指令添加方法而已，而事件修饰符能控制事件指令的发生
语法: @html元素事件名把前面的on去掉.事件修饰符。

【fun1是一个冒泡事件】

---

事件指令之 按键修饰符：
我们的日常使用电脑中经常使用回车键来进行消息的发出功能，这个功能是怎么实现的呢，这个就是为事件绑定按键了，
语法: @html元素事件名把前面的on去掉.按键修饰符/按键代号=”函数名()” 【只针对按键相关事件有效】
Vue如何获取按键代号：$event.keyCode
Vue如何为文本框绑定回车键：
@keyDown.13/@keyDown.enter

4. v-for：迭代指令
   迭代数组、对象、对象数组
   语法：v-for="(数组元素，索引号) in 数组名"
   v-for=“数组元素，索引号 in 数组名”

5. v-text&v-html
   区别：v-text ：输出普通文件，如有html文本的话，会原样输出
   v-html：输出普通文件，如有html文本的话，会格式化输出
   
   图中的第一句使用v-text指令，第二句的使v-html；可以看出，v-text是原样输出并不会带有样式的，而v-html是会格式化样式再输出的

6. v-if&v-show：控制html元素显示或
   区别：v-if: 显示(插入该html元素)、隐藏(删除该html元素)
   v-show: 显示(删除style的display)、隐藏(设置style=”
   display:none”)
   

7. vue条件指令

• v-if: 条件成立输出该html标签中的内容。
• v-else-if: 如果v-if条件不成立，才会判断该条件，如果条件成立输出该html标签中的内容。
• v-else: 如果v-if或v-else-if条件不成立，输出该html标签中的内容。

Vue计算属性：computed
在插值表达式中使用js做运算非常方便。但是如果表达式的内容很长，就会显得代码不好看，很臃肿，这个时候就可以用计算属性。

语法：computed: {
         key1: function(){
             return "计算后的数据";
              },

Vue监控属性：watch
watch可以帮我们监控数据对象中的属性值发生改变。

watch : {
    key1 : function(newVal, oldVal){
        
    },
    "obj.key1" : function(newVal, oldVal){
        
    },
    obj : {
         // 开启深度监控(对象)
		deep : true,
         // 监控函数
         handler : function(obj){
                
         }
    }
}