一、VUE快速上手
1.vue的定义：
一个用于构建用户界面的渐进式框架
（“构建用户界面”：基于数据渲染出用户看到的页面；“渐进式”指页面搭建是循序渐进的；“框架”指一整套完整的项目解决方案
（常见的Vue的两种使用方式：①核心开发（用于局部模块改造），②核心包&插件的工程化开发（用于整站开发）
2.创建Vue实例的基本步骤
（1）构建用户界面（确定需求）
（2）创建Vue实例进行初始化渲染
①准备容器（在html代码中建div中装需要渲染的数据）
②引包（相当于JS和CSS的链接引用，不过Vue的引用是从其官网的网址引用；同时也要单独放在一个script中）
③创建Vue实例 new Vue() (创建一个空对象，里面放配置项用来渲染数据）
④指定配置项 → 渲染数据
（"el"用来指定挂载点，"data"用来提供数据）
<script>
const app = new Vue({
el:'#app',
data:{
msg:'hello 黑马'
}
})
</script>
3.插值表达式
（1）作用
利用表达式进行插值，渲染到页面中（算数表达式，逻辑表达式，变量，对象都可以）
（2）语法：{{表达式}}
（3）注意点
①必须使用存在的数据（意味着我们必须要在data中声明才能插值）
②不支持语句
③不能在标签的属性中进行插值
4.响应性特性
（1）Vue的响应性：数据变化，视图会自动更新
（2）访问/修改数据
①访问：app.msg
②修改：app.msg = 'Hello World'
5.开发者工具
便于测试Vue代码的工具，下载方式详见课程
二、Vue指令
1.初步了解
Vue会根据不同的“指令”，针对标签实现不同的“功能”；“指令”是带有v-前缀的特殊属性标签
2.分类
（1）v-html
设置元素的innerHTML(可以在data中写html代码，通过<div v-html="msg"></div>进行动态解析）
官方的解释是这样的：v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。
（2）v-show
①作用：控制元素显示隐藏
②语法：v-show="表达式" (表达式值true显示)
③原理： 控制CSS样式进行显示隐藏
④场景：频繁切换显示隐藏的场景（比如小米商城右上角的小型购物车，导航栏）
（3）v-if
①作用：控制元素显示隐藏(条件渲染）
②语法：v-if="表达式" (表达式值true显示)
③原理： 基于条件判断，是否创建或移除节点（控制DOM来进行显示隐藏）
④场景：不频繁切换显示隐藏的场景（比如未登录就无法显示更多商品的小功能）
（4）v-else/v-elif
①作用：控制元素显示隐藏(辅助v-if进行判断渲染）
②语法：v-else v-elif="表达式" (表达式值true显示，前必须要使用v-if)
③原理：基于条件判断，是否创建或移除节点（控制DOM来进行显示隐藏）
④场景：不频繁切换显示隐藏且有多个判断条件分层的场景（比如未登录就无法显示更多商品的小功能）
（5）v-on
①作用：注册事件 = 添加监听 + 提供处理逻辑
②语法
A.v-on:事件名 = "内联语句" (用于比较简单的场景）
<button v-on:click="count++">按钮</button>
//也可使用简化方法
<button @click="count++">按钮</button>
B.v-on:事件名 = "methods中的函数名"
<div id="app">
<button @click="fn">切换显示隐藏</button>
<h1 v-show="isShow">黑马程序员</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app4 = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
fn () {
// 让提供的所有methods中的函数，this都指向当前实例
// console.log('执行了fn', app.isShow)
// console.log(app3 === this)
//函数中不能直接拿数据，必须要使用访问的方法拿
this.isShow = !this.isShow
}
}
})
</script>
③调用传参：更改语法为
<div id="app">
<button @click="fn(a,b)">切换显示隐藏</button>
<h1 v-show="isShow">黑马程序员</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app4 = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
fn (a,b) {
// 让提供的所有methods中的函数，this都指向当前实例
// console.log('执行了fn', app.isShow)
// console.log(app3 === this)
//函数中不能直接拿数据，必须要使用访问的方法拿
this.isShow = !this.isShow
}
}
})
</script>
（6）v-bind
①作用：动态的设置html的标签属性
②语法：v-bind:属性名="表达式" ，也可以缩写成:属性名="表达式"
（7）v-for
①作用：基于数据循环，多次渲染整个元素 → 数组、对象、数字
②语法：
我是内容
③遍历数组语法：<p v-for="(item,index) in 数组" （item每一项,index下标)
④案例
<body>
<div id="app">
<h3>小黑的书架</h3>
<ul>
<li v-for="(item, index) in booksList" :key="item.id">
<!-- 利用插值表达式循环出数组每一项的数据 -->
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
<!-- 注册点击事件 → 通过 id 进行删除数组中的 对应项 -->
<button @click="del(item.id)">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
booksList: [
{ id: 1, name: '《红楼梦》', author: '曹雪芹' },
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' }
]
},
methods: {
del(id) {
// console.log('删除', id)
// 通过 id 进行删除数组中的 对应项 → filter(不会改变原数组)
// filter: 根据条件，保留满足条件的对应项，得到一个新数组。
// console.log(this.booksList.filter(item => item.id !== id))
this.booksList = this.booksList.filter(item => item.id !== id)
}
}
})
</script>
</body>
⑤key:给元素添加唯一标识，便于Vue进行列表项的正确排序复用（没有的话会保留需删除那项，把最后一项删掉，然后把文字移上去，蛮抽象的）
⑥key使用的注意点：A.key的值只能是字符串或数字类型 B.key的值必须具有唯一性 C.推荐使用id作为key（因为数组的id不会改变，而index会改变）
（8）v-model
①作用：给表单元素使用，双向数据绑定，从而快速获取或设置表单元素内容
②语法：v-model='变量'
三、指令补充
1.指令修饰符
（1）定义
通过"."指明一些指令后缀，不同后缀封装了不同的处理操作以此来简化代码
（2）分类
①按键修饰符
@keyup.enter → 键盘回车监听
②v-model修饰符
v-model.trim → 去除首尾空格
v-model.number → 数字字符串转数字
③事件修饰符
@事件名.stop → 阻止冒泡
@事件名.prevent → 阻止默认行为
2.v-bind → 操作class
语法： :class="对象/数组"
A.对象 → 键就是类名，值是布尔值。
如果值为true，有这个类，否则没有（适用于一个来回切换的类）
<div class="box" :class="{类名1:布尔值,类名2:布尔值}"></div>
B.数组 → 数组中所有的类，都会被添加到盒子上。
本质是一个class列表（适用于批量添加或删除类）
<div class="box" :class="[类名1,类名2,类名3]"></div>
3.v-model 应用于其他表单元素
（1）说明：常见的表单元素都可以用v-model绑定关联 → 快速获取或设置表单元素的值
（并且会根据控件类型自动选取正确的方法来更新元素）
（2）可以绑定的表单元素举例
①输入框 input:text → value
②文本域 textarea → value
③复选框 input:checkbox → checked
④单选框 input:radio → checked （需要加name进行分组）
<input v-model="gender" type="radio" name="gender" value="1">男
⑤下拉菜单 select → value
四、computed计算属性
1.概念
基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
2.语法
（1）先在computed配置项中声明，一个计算属性对应一个函数 （函数需要return）
（2）使用起来和普通属性一样使用 {{计算属性名}}
3.computed计算属性与methods方法
（1）computed计算属性
①作用：封装了一段对数据的处理。求得一个结果
②作为属性直接使用 → this.计算属性 {{计算属性名}}
③缓存特性：会对计算出的结果进行缓存，再次使用直接读取缓存，依赖项变化了也会自动重新计算并再次缓存
（2）methods方法
①作用：给实例提供一个方法，调用以处理业务逻辑
②语法：A.写在methods配置项
B.作为方法，需要调用 → this.方法() {{方法名()}} @事件名="方法名"
4.计算属性的完整写法
（1）说明
计算属性默认的简写，只能读取访问，不能修改，要修改必须用完整写法
（2）语法
computed:{
计算属性名:{
get(){
一段计算逻辑
return 结果
}
set(){
一段计算逻辑（修改的逻辑）
}
}
}
五、watch侦听器（监视器）
1.作用：监视数据变化，执行一些业务逻辑或异步操作
2.语法
（1）简单写法 → 简单类型数据，直接监视
data: {
words: '',
obj: {
words: ''
}
},
watch: {
// 该方法会在数据变化时调用执行
// newValue新值, oldValue老值（一般不用）
//需要和data中同名，子属性用'aaa.bbb'
words (newValue) {
console.log('变化了', newValue)
},
'obj.words' (newValue) {
console.log('变化了', newValue)
}
}
（2）完整写法 → 添加额外配置项
①deep:true 对复杂类型深度监视
②immediate:true 初始化立刻执行一次handler方法
data: {
words: '',
obj: {
words: ''
}
},
watch: {
数据属性名：{
deep:true,
handler (newValue) {
console.log(newValue)
}
}
}
