5.1 Vue基础操作

Vue简介

Vue的两个特性

1. 数据驱动视图：
   - 数据的变化会驱动视图自动更新
   - 好处：只需要把数据维护好，页面结构会被vue自动渲染出来
   

2. 双向数据绑定：
   - 在网页中，from表单负责采集数据，Ajax负责提交数据。
   - js数据的变化，会被自动渲染到页面上
   - 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中
   

MVVM

MVVM是把当前页面的数据源(Model)和页面的结构(View)链接在一起。

当 数据源发生变化 时，会被 ViewModel 监听到，VM会根据最新数据源 自动更新 页面结构。
当 表单元素的值发生变化 时，也会被VM监听到，VM会把变化后的最新值 自动同步 到Model数据源中

vue基本使用

基本代码与 MVVM 的对应关系

VUE指令与过滤器

1，指令的概念

指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

vue中的指令按照不同的用途可以分为如下6大类：
① 内容渲染 指令
② 属性绑定 指令
③ 事件绑定 指令
④ 双向绑定 指令
⑤ 条件渲染 指令
⑥ 列表渲染 指令
指令是vue开发中最基础，最常用，最简单的知识点。

① 内容渲染指令
内容渲染指令是辅助开发者渲染DOM元素的文本内容。常用指令如下：

v-text
v-text会覆盖元素的原本内容。

{ { } } 语法
vue提供的 { { } } 语法，专门来解决v-text会覆盖默认文本的问题，{ { } }专业名称是插值表达式

v-html
包含HTML标签的字符串渲染为页面的HTML元素，可以渲染标签

② 属性绑定指令
在vue中，可以使用 v-bind:指令为元素的属性动态绑定值；
简写是英文的 :

使用 Javascript 表达式
在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算，例如：

③事件绑定指令
vue提供了 v-on 事件绑定 指令，用来为DOM元素绑定事件监听，可以简写为 @
注意：原生DOM对象有onclick，oninput，onkeyup等原生事件，
替换为vue的事件绑定形式后分别为：v-on:click,v-on:input,@keyup

语法格式如下：

// 在实际开发中可以使用简写
methods:{
add(){
	log('ok')
	// vm.count+=1; //vm===this
	this.count+=1
	}
}

1.4 $event vue 提供了内置变量，名字叫做 $event 它就是原生DOM的事件对象e
如果默认的事件对象 e 被覆盖了，则可以手动传递一个$event

1.5 事件修饰符
在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求，因此vue提供了事件修饰符，来方便的 对事件的触发进行控制 。常用的修饰符如下

使用方法如下：

1.6 按键修饰符
在监听 键盘事件 时，我们经常需要 判断详细的按键，此时可以为 键盘相关的事件 添加 按键修饰符例如：

④ 双向绑定指令
vue 提供了 v-model 双向数据绑定指令，用来辅助开发者不操作DOM的前提下，快速获取表单的数据。

用户可以通过在 input 输入框内输入内容，v-model 监听 input，直接返回给 province 数据

v-model 指令的修饰符

示例如下：

⑤ 条件渲染指令
条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有如下两个：
v-if ：动态移除/创建元素来操作隐藏/显示。如果进入页面时，某些元素不需要被展示，而后期也可能不需要展示出来此时 v-if 最好。
v-show ：是使用 display：none 来控制元素的隐藏/显示。如果需要频繁切换元素显示状态，用 v-show 性能更好
示例如下：

v-else
v-if 可以单独使用，或配合 v-else 指令一起使用：

注意：v-else指令必须配合 v-if指令一起使用，否则讲不会被识别！

⑥ 列表渲染指令
v-for列表渲染指令，基于一个数组来循环渲染一个列表结构。v-for指令需要使用 item in list 形式的特殊语法，其中：
list是 待循环的数组
item 是 被循环的每一项

v-for中的索引
v-for指令还支持一个 可选的 第二个参数，即 当前项的索引 ，语法格式为( item,index)in items，示例代码如下：

注意：v-for指令中的 item项 和 index索引 ，可以根据需要进行 重命名 例如(user,i) in userlist
官方建议：只要用到了 v-for 指令，那么一定要绑定一个 :key 属性，而且尽量把id作为key 的值，官方对key的值类型是有要求的：字符串或数字类型，key值不能重复，否则会报错，不能使用索引作为key(index没有意义且不具有唯一性)