vue基础入门
vue简介
什么是vue
概念： 是一套用于构建用户界面的前端框架
vue特性
vue框架的特性，主要体现在如下两方面：
- 数据驱动视图 在使用了vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构。
好处：当页面数据发生变化时，页面会自动重新渲染
注意：数据驱动视图是单向的数据绑定
- 双向数据绑定
在填写表单时，双向数据绑定可以辅助开发者在不操作dom的前提下，自动把用户填写的内容同步到数据源中，示意图如下：
MVVM
MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model,View和ViewModel，他把每个HTML页面都拆分成了这三个部分，如图所示：
在MVVM概念中：
- Model表示当前页面渲染时所依赖的数据源
- view表示当前页面所渲染的DOM结构
- ViewModel表示vue的实例，它是MVVM的核心
MVVM的工作原理
ViewModel作为MVVM的核心，是他把当前页面的数据源和页面结构连接在了一起
当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动化更新页面结构
当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后的最新的值自动同步到Model数据源中
vue的基本使用
基本使用步骤
- 导入vue.js的script脚本文件
- 在页面中声明一个将要被vue所控制的DOM区域
- 创建VM实例对象（vue实例对象）
<!-- 希望vue能够控制下面的这个div，帮我们再把数据填充到div内部 -->
<div id="app">{{username}}</div>
<!-- 导入vue库文件，在windows全局就有了vue这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2.创建vue的实例对象 -->
<script>
//创建vue的实例对象
const vm= new Vue({
//el属性是固定的语法，表示当前vm示例要控制页面上的哪个区域，接收的值是一个选择器
el:'#app',
//data对象就是要渲染到页面上的数据
data:{
username:'zhangsan'
}
})
</script>
基本代码与MVVM的对应关系
vue调试工具
安装vue-devtools调试工具
vue官方提供的vue-devtools调试工具，能够方便开发者对vue项目进行调试与开发
vue的指令
指令的概念
指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue中的指令按照不同的用途可以分为以下6大类：
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
注意：指令是vue开发中最基础，最常用，最简单的知识点
-
内容渲染指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容
- v-text（不常用）
用法示例：
v-text指令会覆盖元素内默认的值
- {{}}
插值表达式语法： vue提供的{{}}语法，专门用来解决v-text会覆盖默认文本内容的问题（英文名：Mustache）
注意：相对于v-text指令来说，插值表达式在开发中更常用一些，因为它不会覆盖元素中的默认文本内容
- v-html v-text指令和插值表达式只能渲染纯文本内容。如果要把包含html标签的字符串渲染为页面的html元素，则需要用到v-html这个指令
-
属性绑定指令
如果需要为元素的属性绑定属性值，则需要用v-bind属性绑定指令，用法示例如下：
由于v-bind指令在开发中使用的频率非常高，因此，vue官方为其提供了简写形式（简写为英文的冒号:）
使用JavaScript表达式
在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算，例如：
-
事件绑定指令
vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。语法格式如下：
通过v-on绑定的事件处理函数，需要在methods节点中进行声明
<script>
//创建vue的实例对象
const vm= new Vue({
//el属性是固定的语法，表示当前vm示例要控制页面上的哪个区域，接收的值是一个选择器
el:'#app',
//data对象就是要渲染到页面上的数据
data:{
count:3
},
//methods的作用就是定义事件处理函数
methods:{
add (n){
console.log('ok')
this.count +=n
},
sub(n){
console.log('')
this.count -=n
}
}
})
事件绑定的简写形式
由于v-on指令在开发中使用频率非常的高，因此，vue官方为其提供了简写形式（简写为英文的@）
事件参数对象
在原生的DOM事件绑定中，可以在事件处理函数的形参中，接受时间参数对象event。同理，在v-on指令（简写@）所绑定的事件处理函数中，同样可以接收到事件参数对象event，示例代码如下：
如果绑定事件函数时并没有传参，那么methods中定义的事件处理函数可以直接接收一个参数e，这个参数就是事件参数对象event
绑定事件并传参
在使用v-on指令绑定事件时，可以使用（）进行传参
<div id="app">
<p>count 的值是：{{count}}</p>
<button v-on:click="add(3)">+1</button> <!-- add是事件处理函数定义在data中的methods属性中 -->
<button @click="sub(2)">-1</button> <!-- 绑定的时候可以加（）小括号用来传参 -->
<!-- v-on: 可以简写成@ 和属性绑定一样可以使用：简写 -->
</div>
<!-- 导入vue库文件，在windows全局就有了vue这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2.创建vue的实例对象 -->
<script>
//创建vue的实例对象
const vm= new Vue({
//el属性是固定的语法，表示当前vm示例要控制页面上的哪个区域，接收的值是一个选择器
el:'#app',
//data对象就是要渲染到页面上的数据
data:{
count:3
},
//methods的作用就是定义事件处理函数
methods:{
add (n){
console.log('ok')
this.count +=n
},
sub(n){
console.log('')
this.count -=n
}
}
})
</script>
$event
event可以解决事件参数event被覆盖的问题
<!-- 希望vue能够控制下面的这个div，帮我们再把数据填充到div内部 -->
<div id="app">
<p >count 的值为{{count}}</p>
<button @click="add(1,$event)">+1</button>
</div>
<!-- 导入vue库文件，在windows全局就有了vue这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2.创建vue的实例对象 -->
<script>
//创建vue的实例对象
const vm= new Vue({
//el属性是固定的语法，表示当前vm示例要控制页面上的哪个区域，接收的值是一个选择器
el:'#app',
//data对象就是要渲染到页面上的数据
data:{
count:3
},
methods:{
add(n,e){
this.count += n
console.log(e)
}
}
})
事件修饰符
在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求，因此vue提供了时间修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的五个事件修饰符如下：
按键修饰符
在监听键盘事件时，我们经常需要判断详细的按键，此时，可以为键盘相关的事件添加按键修饰符，例如：
-
双向绑定指令
vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作dom的前提下，快速获取表单的数据
<div id="app">
<form action="" v-model="username"></form>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm= new Vue({
el:'#app',
data:{
username:'zhangsan'
}
})
</script>
v-model指令的修饰符
为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符，分别是：
-
条件渲染指令
条件渲染指令用来辅助开发者按需控制dom的显示与隐藏，条件渲染指令有如下两个，分别是：
- v-if
- v-show
示例用法如下：
v-if和v-show的区别
实现原理不同：
- v-if指令会动态的创建或移除DOM元素，从而控制元素在页面上的现实与隐藏
- v-show指令会动态为元素添加或移除
style="display:none;"样式，从而控制元素的显示或隐藏
性能消耗不同： v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此：
- 如果需要非常频繁的切换，则使用v-show较好
- 如果在运行时条件很少改变，则使用v-if较好
v-else
v-if可以单独使用，或配合v-else指令一起使用：
注意：v-else必须配合v-if指令一起使用，否则他将不会被识别
v-else-if
v-else-if指令，顾名思义，冲到v-if的“else-if块”，可以连续使用：
-
列表渲染指令
vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环来渲染一个列表结构。v-for指令需要使用item in items 形式的特殊语法，其中：
- items 是待循环的数组
- item 是被循环的每一项
v-for指令还支持一个可选的第二个参数，即当前项的索引，其语法格式为(item，index)in items，示例代码如下：
item项和index索引都是形参，可以根据需要进行重命名
使用key维护列表的状态
当列表的数据变化时，默认情况下，vue会尽可能的复用已经存在的DOM元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
为了给vue一个提示，以便他能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的key属性：
key的主意事项
- key的值只能是字符串或者数字类型
- key的值必须具有唯一性（不能重复）
- 建议把数据项id属性的值作为key的值
- 使用index的值当作key的值没有任何意义（因为index的值不具有唯一性）
- 建议使用v-for指令时一定要指定key的值（既能提升性能，又能防止列表紊乱）
过滤器
过滤器（Filters）是vue为开发者提供的功能，常用于文本的格式化，过滤器可以用在两个地方：
- 插值表达式
- v-bind属性绑定
过滤器应该被添加在JavaScript表达式的尾部，由管道符进行调用，示例代码如下：
定义过滤器
在创建vue实例期间，可以在filter节点中定义过滤器，示例代码如下：
私有过滤器和全局过滤器
在filters节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前vm实例所控制的el区域内使用。如果希望在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：
连续调用多个多滤器
过滤器可以串联的进行调用，例如：
过滤器传参
过滤器本质是JavaScript函数，因此可以接受参数：
过滤器仅在vue2和vue1中受支持，在vue3版本中剔除了过滤器相关的功能
品牌列表案例
案例效果及具体实现步骤
- 案例效果：
- 整体实现步骤
- 创建基本的vue实例
- 基于vue渲染表格数据
- 实现添加品牌的功能
- 实现删除品牌的功能
- 实现修改品牌状态的功能
- 实现代码：
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
// 用户输入的品牌名称
brand: '',
// nextId 是下一个，可用的 id
nextId: 4,
// 品牌的列表数据
list: [
{ id: 1, name: '宝马', status: true, time: new Date() },
{ id: 2, name: '奔驰', status: false, time: new Date() },
{ id: 3, name: '奥迪', status: true, time: new Date() },
],
},
methods: {
// 点击链接，删除对应的品牌信息
remove(id) {
this.list = this.list.filter(item => item.id !== id)
},
// 阻止表单的默认提交行为之后，触发 add 方法
add() {
// 如果判断到 brand 的值为空字符串，则 return 出去
if (this.brand === '') return alert('必须填写品牌名称！')
// 如果没有被 return 出去，应该执行添加的逻辑
// 1. 先把要添加的品牌对象，整理出来
const obj = {
id: this.nextId,
name: this.brand,
status: true,
time: new Date()
}
// 2. 往 this.list 数组中 push 步骤 1 中得到的对象
this.list.push(obj)
// 3. 清空 this.brand；让 this.nextId 自增 +1
this.brand = ''
this.nextId++
}
},
})
</script>
