学习笔记目录：
更新中…
- 推荐大家安装的 VScode 中的 Vue 插件
目录
什么是 vue
- 构建用户界面
- 用 vue 往 html 页面中填充数据，非常的方便
- 框架
- 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
- 要学习 vue，就是在学习 vue 框架中规定的用法！
- vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库
- 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！
vue 的两个特性
-
数据驱动视图：
- 数据的变化会驱动视图自动更新
- 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！
-
双向数据绑定：
在网页中，form 表单负责采集数据，Ajax 负责提交数据。
- js 数据的变化，会被自动渲染到页面上
- 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中
注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）
vue 指令
1. 内容渲染指令
v-text指令的缺点：会覆盖元素内部原有的内容！（除非我们有覆盖原本标签里面的内容的需求，否则的话，我们一般都是使用{{ }}插值表达式来实现的）{{ }}插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！v-html指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！
2. 属性绑定指令
注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！
-
在 vue 中，可以使用
v-bind:指令，为元素的属性动态绑定值； -
简写是英文的
: -
在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号（data数据中的变量的话，直接使用就可以使用+拼接，使用字符串的话，就需要将需要使用的字符串加上一个单引号，对于没有单引号的量，vue会自动到data里面去寻找对应的值，如果没有，就会报错！），例如：
<div :title="'box' + index">这是一个 div</div>
需要注意的是：我们所使用的插值表达式和绑定的方式，里面的内容都是可以直接进行简单的运算的，比如：
{{number+1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<div>
1+2的结果是{{1+2}}
</div>
//输出的是：1+2的结果是3
//下面的使用单引号表示字符串，进行的是字符串的拼接
<div v-bind:id="'list'+id"></div>
3. 事件绑定
在方法中访问Vue中的data里面的数据的话，我们直接可以使用this.调用相关的属性（这里面的this指的就是我们创建的Vue实例，也就是说我们也可以使用vm.来调用相关的data值），如果方法需要传递参数的话，绑定方法的时候就直接加上小括号，加上参数就可以了（就像平常的调用方法的那样）
-
v-on:简写是@ -
语法格式为：
<button @click="add"></button>
<button @click="sub(2)"></button>
//注意：咱们vue项目里面的方法，一般都写在这个methods里面（注意是methods(是很多方法)而不是method）
methods: {
add() {
// 如果在方法中要修改 data 中的数据，可以通过 this 访问到（这里的this就相当于我们创建的Vue实例）
this.count += 1
},
sub(n){
this.count -= n
}
}
//在原生的DOM对象里面的onclick,oninput,onkeyup等等原生事件，替代成vue中的事件的形式后，分别可以表示为@click,@input,@keyup
$event的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：
//如果在上面调用函数的时候没有传入参数，但是在methods中定义的方法中含有参数，比如含有一个参数e,因为我们这里绑定的是点击事件，所方法定义的里面的参数代表的就是我们这个点击事件对象，如果我们想对目标对象进行操作的话，就可以使用如下的target属性来调用响应的属性(当然如果调用的时候，传入参数了，那么这里的e表示的就是对应的传入的值了，而不是我们之前所说的事件对象了)
<button @click="add"></button>
methods: {
add(e) {
e.target.style.backgroundColor="red"
}
}
//如果默认的事件对象 e 被覆盖了（就比如说上面的那种情况，调用的时候也传入了参数），则可以手动传递一个 $event。($event是vue中提供的一个内置变量，他是DOM原生的事件对象 e 了；需要注意的是：$event 的传递是在调用函数的时候进行传递的)
<button @click="add(3, $event)"></button>
methods: {
add(n, e) {
// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
this.count += 1
e.target.style.backgroundColor="red"
}
}
- 事件修饰符：(前两种比较常用，后面的三种不是很常用了解即可)
-
.prevent---阻止事件的默认行为<a @click.prevent="xxx">链接</a> 原生DOM的实现方法：在点击事件里面加上下面的这条语句（假如事件对象是e） e.preventDefault() -
.stop<button @click.stop="xxx">按钮</button> -
.capture---以捕获模式触发当前的事件处理函数<button @click.capture="xxx">按钮</button> -
.once---绑定的事件只触发一次<button @click.once="xxx">按钮</button>.self---只有在event.target是当前元素自身时触发事件的处理函数<button @click.self="xxx">按钮</button>按键修饰符（了解）
//每一次按键弹起就会调用一次clearInput函数 <input type="text" @keyup="clearInput"> <!-- 实现点击Enter(回车)按键的时候，会调用一次clearInput函数 --> <input type="text" @keyup.enter="clearInput"> <!-- 实现点击ESC按键的时候，会调用一次clearInput函数 --> <input type="text" @keyup.esc="clearInput">
4. v-model 指令—(只有和表单元素一块使用才有意义！)
我们可以理解为含有value属性的标签一般都可以使用v-model在标签里面指定的v-medel可以理解为双向绑定的value值（注意：仅仅是可以这样理解）
- input 输入框
- type=“radio”
- type=“checkbox”
- type=“xxxx”
- textarea
- select
<div id="app">
<p>用户的名字是：{{username}}</p>
<!-- v-model实现的是单向绑定 -->
<input type="text" name="" id="" v-model="username"> <hr>
<!-- v-bind实现的是单向绑定 -->
<input type="text" name="" id="" :value="username">
<select v-model="city">
<option value="">请选择</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">宁夏</option>
</select>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
username: "张三",
city: ''
}
})
</script>
v-model的修饰符：
.number—自动将用户输入的值转为数值类型
.trim—自动过滤掉用户输入的内容首尾两端的空白字符
.lazy—在“change”的时候更新，而不是“input”的时候更新（比如：在平常的话，我们在一个有双向绑定数据的输入框中更改值得话，数据会实时同步到对应的值，而加上这个修饰符之后，这个数据会在我们此次更改完之后才会进行更新，也就是说更新为最后的值，而没有了中间的那个过程）
使用的案例如下：
<div id="app">
<input type="text" v-model.number="num1">+<input type="text" v-model.number="num2">=<span>{{num1+num2}}</span>
<input type="text" v-model.trim="msg">
<input type="text" v-model.lazy="msg">
</div>
5. 条件渲染指令
v-show的原理是：动态为元素添加或移除display: none样式，来实现元素的显示和隐藏- 如果要频繁的切换元素的显示状态，用 v-show 性能会更好
v-if的原理是：每次动态创建或移除元素，实现元素的显示和隐藏- 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好
在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！
一个共同点：两者都是值为true的时候显示，值为false的时候不显示！
v-if 指令在使用的时候，有两种方式：
-
直接给定一个布尔值 true 或 false
<p v-if="true">被 v-if 控制的元素</p> -
给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏（和v-bind类似，v-if设置的值中加上单引号的是字符串，不加单引号的就是指data中的变量）
<p v-if="type === 'A'">良好</p>
v-if的配套指令
v-else-if 和 v-else (其中的语法和正常的逻辑的if-else语法相同)
//根据data中type的值，来实现展示对应的等级
<div id="app">
<p v-if="type === 'A'">优秀</p>
<p v-else-if="type === 'B'">良好</p>
<p v-else-if="type === 'C'">一般</p>
<p v-else>差</p>
</div>
6.列表渲染指令
v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使
用 item in items 形式的特殊语法，其中：
-
items 是待循环的数组
-
item 是被循环的每一项
还有一种就是两个参数的用法（item,index）in items—（一般这种方法并不是很常用）
- 两个参数分别是，被循环的每一项和该项的索引
<table class="table table-bordered table-striped">
<thead>
<th>索引</th>
<th>ID</th>
<th>姓名</th>
</thead>
<tbody>
//title属性：鼠标放在对应的条目上面的时候所显示的内容
//这个item被定义之后，立即就可以使用（比如说下面的这个例子：在tr的属性中定义，我们在他后面的属性就可以直接使用的！！！）
<tr v-for="(item,index) in list" :title="item.name">
<td> {{index+1}} </td>
<td>{{item.id}}</td>
<td> {{item.name}} </td>
</tr>
</tbody>
</table>
//-----------------------分割线-------------------------
list: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
key使用的注意事项：
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性（即：key 的值不能重复）
③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
⑤ 官方建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱；如果不指定key值的话，系统可能就会报错的！）
<tr v-for="(item,index) in list" :key="item.id" :title="item.name">
<td> {{index+1}} </td>
<td>{{item.id}}</td>
<td> {{item.name}} </td>
</tr>
day01案例：
学习笔记目录：
更新中…
1112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
