Vue学习笔记
文章目录
- Vue学习笔记
- 1. Vue核心
- 1.1. Vue简介
- 1.1.1. 官网
- 1.1.2. 介绍与描述
- 1.1.3. Vue的特点
- 1.1.4.与其他JS框架的关联
- 1.1.5. Vue周边库
- 1.2. 初识Vue
- 1.3. 模板语法
- 1.4. 数据绑定
- 1.5. el与data的两种写法
- 1.6. MVVM模型
- 1.7. Vue中的数据代理
- 1.8. 事件处理
- 1.8.1. 事件的基本用法
- 1.8.2. 事件修饰符
- 1.8.3. 键盘事件
- 1.9. 计算属性
- 1.10. 监视属性
- 1.10.1. 监视属性基本用法
- 1.10.2. 深度监视
- 1.10.3. 监视属性简写
- 1.10.4. 监听属性 VS 计算属性
- 1.11. 绑定样式
- 1.12. 条件渲染
- 1.13. 列表渲染
- 1.13.1. 基本列表
- 1.13.2. key的作用与原理
- 1.13.3. 列表过滤
- 1.13.4. 列表排序
- 1.13.5. Vue数据监视
- 1.14. 收集表单数据
- 1.15. 过滤器
- 1.16. 内置指令
- 1.16.1. v-text指令
- 1.16.2. v-html指令
- 1.16.3. v-cloak指令
- 1.16.4. v-once指令
- 1.16.5. v-pre指令
- 1.17. 自定义指令
- 1.18. Vue生命周期
- 1.18.1. 引出生命周期
- 1.18.2. 分析生命周期
- 1.18.3. 总结生命周期
- 2. Vue组件化编程
- 2.1. 模块与组件、模块化与组件化
- 2.1.1. 模块
- 2.1.2. 组件
- 2.1.3. 模块化
- 2.1.4. 组件化
- 2.2. 非单文件组件
- 2.2.1. 基本使用
- 2.2.2. 组件注意事项
- 2.2.3. 组件的嵌套
- 2.2.4. VueComponent
- 2.2.5. 一个重要的内置关系
- 2.3. 单文件组件
- 3. 使用Vue CLI脚手架
- 3.1. 初始化脚手架
- 3.1.1. 说明
- 3.1.2. 具体步骤
- 3.1.3. 分析脚手架结构
- 3.1.4. render函数
- 3.1.5. 修改默认配置
- 3.2. ref属性
- 3.3. props配置项
- 3.4. mixin混入
- 3.5. plugin插件
- 3.6. scoped样式
- 3.7. Todo-List案例
- 3.8. WebStorage
- 3.9. 自定义事件
- 3.9.1. 绑定
- 3.9.2. 解绑
- 3.10. 全局事件总线
- 3.11. 消息的订阅与发布
- 3.12. $nextTick
- 3.13. 过渡与动画
- 4. Vue中的Ajax
- 4.1. Vue脚手架配置代理
- 4.2. GitHub用户搜索案例
- 4.3. vue-resource
- 4.4. slot插槽
- 4.4.1. 默认插槽
- 4.4.2. 具名插槽
- 4.4.3. 作用域插槽
- 5. Vuex
- 5.1. 理解Vuex
- 5.1.1. Vuex是什么
- 5.1.2. 什么时候使用Vuex
- 5.1.3. Vuex工作原理图
- 5.2. 求和案例
- 5.2.1. 使用纯vue编写
- 5.2.2. 搭建Vuex环境
- 5.2.3. 使用Vuex编写
- 5.3. getters配置项
- 5.4. 四个map方法的使用
- 5.4.1. mapState与mapGetters
- 5.4.2. mapActions与mapMutations
- 5.5. 多组件共享数据
- 5.6. 模块化+命名空间
- 6. Vue Router路由管理器
- 6.1 相关理解
- 6.1.1 vue-router的理解
- 6.1.2 对SPA应用的理解
- 6.1.3 路由的理解
- 6.2 基本路由
- 6.3. 几个注意事项
- 6.4. 多级路由
- 6.5. 路由的query参数
- 6.6. 命名路由
- 6.7. 路由的params参数
- 6.8. 路由的props配置
- 6.9. 路由跳转的replace方法
- 6.10. 编程式路由导航
- 6.11. 缓存路由组件
- 6.12. activated和deactivated
- 6.13. 路由守卫
- 6.13.1. 全局路由守卫
- 6.13.2. 独享路由守卫
- 6.13.3. 组件内路由守卫
- 6.14. 路由器的两种工作模式
- 7. Vue UI组件库
- 7.1 常用UI组件库
- 7.1.1 移动端常用UI组件库
- 7.1.2. PC端常用UI组件库
- 7.2. element-ui基本使用
- 7.3. element-ui按需引入
- 8. Vue 3
1. Vue核心
1.1. Vue简介
1.1.1. 官网
-
英文官网
-
中文官网
1.1.2. 介绍与描述
-
动态构建用户界面的渐进式JavaScript框架
-
作者:尤雨溪
1.1.3. Vue的特点
-
遵循MVVM模式
-
编码简洁,体积小,运行效率高,适合移动/PC端开发
-
它本身只关注UI,可以引入其它第三方库开发项目
1.1.4.与其他JS框架的关联
- 借鉴 Angular 的模板和数据绑定技术
- 借鉴 React 的组件化和虚拟DOM技术
1.1.5. Vue周边库
- vue-cli:vue脚手架
- vue-resource
- axios
- vue-router:路由
- vuex:状态管理
- element-ui:基于vue的UI组件库(PC端)
1.2. 初识Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识vue</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>Hello!{{name}}!</h1>
</div>
<script>
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el:'#root', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
data:{ //data用于存储数据,数据共el所指定的容器去使用
name:'JOJO'
}
})
</script>
</body>
</html>
效果:
注意:
- 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
- root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
- root容器里的代码被称为Vue模板
- Vue实例与容器是一一对应的
- 真实开发中只有一个Vue实例,并且会配合着组件一起使用
{{xxx}}
中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性- 一旦data中的数据发生变化,那么模板中用到该数据的地方也会自动更新
1.3. 模板语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue模板语法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}!</h3>
<hr>
<h1>指令语法</h1>
<a v-bind:href="url">快去看新番!</a><br>
<a :href="url">快去看新番!</a>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'JOJO',
url:'https://www.bilibili.com/'
}
})
</script>
</body>
</html>
效果:
总结:
Vue模板语法包括两大类:
-
插值语法:
- 功能:用于解析标签体内容
- 写法:
{{xxx}}
,xxx是js表达式,且可以直接读取到data中的所有区域
-
指令语法:
1.4. 数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据绑定</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
单向数据绑定:<input type="text" v-bind:value="name"><br>
双向数据绑定:<input type="text" v-model:value="name">
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'JOJO'
}
})
</script>
</body>
</html>
效果:
总结:
-
Vue中有2种数据绑定的方式:
- 单向绑定(
v-bind
):数据只能从data流向页面 - 双向绑定(
v-model
):数据不仅能从data流向页面,还可以从页面流向data
- 单向绑定(
-
备注:
- 双向绑定一般都应用在表单类元素上(如:
、
、
等)
v-model:value
可以简写为v-model
,因为v-model
默认收集的就是value值
- 双向绑定一般都应用在表单类元素上(如:
1.5. el与data的两种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>el与data的两种写法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>Hello,{{name}}!</h1>
</div>
<script>
Vue.config.productionTip = false
//el的两种写法:
// const vm = new Vue({
// // el:'#root', //第一种写法
// data:{
// name:'JOJO'
// }
// })
// vm.$mount('#root')//第二种写法
//data的两种写法:
new Vue({
el:'#root',
//data的第一种写法:对象式
// data:{
// name:'JOJO'
// }
//data的第二种写法:函数式
data(){
return{
name:'JOJO'
}
}
})
</script>
</body>
</html>
总结:
el有2种写法:
- 创建Vue实例对象的时候配置el属性
- 先创建Vue实例,随后再通过
vm.$mount('#root')
指定el的值
data有2种写法:
- 对象式
- 函数式
- 如何选择:目前哪种写法都可以,以后学到组件时,data必须使用函数,否则会报错
由Vue管理的函数,一定不要写箭头函数,否则this就不再是Vue实例了
1.6. MVVM模型
- MVVM模型:
- M:模型(Model),data中的数据
- V:视图(View),模板代码
- VM:视图模型(ViewModel),Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mvvm</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>名称:{{name}}</h2>
<h2>战队:{{rank}}</h2>
<h2>测试:{{$options}}</h2>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'uzi',
rank:'RNG'
}
})
</script>
</body>
</html>
效果:
总结:
- data中所有的属性,最后都出现在了vm身上
- vm身上所有的属性 及 Vue原型身上所有的属性,在Vue模板中都可以直接使用
1.7. Vue中的数据代理
总结:
- Vue中的数据代理通过vm对象来代理data对象中属性的操作(读/写)
- Vue中数据代理的好处:更加方便的操作data中的数据
- 基本原理:
- 通过
object.defineProperty()
把data对象中所有属性添加到vm上。 - 为每一个添加到vm上的属性,都指定一个getter/setter。
- 在getter/setter内部去操作(读/写)data中对应的属性。
- 通过
1.8. 事件处理
1.8.1. 事件的基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的基本用法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>hello,{{name}}</h2>
<button v-on:click="showInfo1">点我提示信息1</button>
<button @click="showInfo2($event,66)">点我提示信息2</button>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'JOJO'
},
methods:{
showInfo1(event){
console.log(event)
},
showInfo2(evnet,num){
console.log(event,num)
}
}
})
</script>
</body>
</html>
效果:
总结:
- 使用
v-on:xxx
或@xxx
绑定事件,其中xxx是事件名 - 事件的回调需要配置在methods对象中,最终会在vm上
- methods中配置的函数,==不要用箭头函数!==否则this就不是vm了
- methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象
@click="demo
和@click="demo($event)"
效果一致,但后者可以传参
1.8.2. 事件修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件修饰符</title>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: skyblue;
}
.box1{
padding: 5px;
background-color: skyblue;
}
.box2{
padding: 5px;
background-color: orange;
}
.list{
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<button @click.once="showInfo">点我提示信息</button>
<div class="box1"