文章目录
- 一、 vue基础
- 二、 vue-cli
- 三、vue组件
- 四、vue生命周期
- 五、ref引用
- 六、动态组件
- 七、插槽 slot
- 八、自定义指令
- 九、vuex
- 十、 路由（vue-router）
- 十一、 Vue UI组件库
一、 vue基础
1. vue的介绍
1.1 vue的特性
-
数据驱动视图
优点：vue监听数据的变化，进而自动渲染刷新页面
缺点：数据驱动视图是单向的（数据变化—>刷新页面） -
双向数据绑定
在网页中，表单负责采集数据，ajax负责提交数据
- js数据的变化会被自动更新到页面上
- 页面上表单采集的数据发生变化时，会被vue获取并自动更新到js
1.2 MVVM
- vue是参考MVVM模型进行设计的
M：Model 页面渲染数据所依赖的数据源，对应vue中的data 数据
V：View 视图，当前页面所渲染的DOM结构，对应页面DOM结构
VM：ViewModel 是MVVM的核心，表示vue的实例对象
- data中的所有属性，都会出现在vm上
- vm上的所有属性及Vue原型上的所有属性，在Vue模板中都可以直接使用
1.3 vue数据代理
1.3.1 Object.defineproperty()
- 给对象添加属性
Object.defineProperty(obj, prop, descriptor)
参数1: obj 要定义属性的对象
参数2：prop 要定义或修改的属性的名称或 Symbol
参数3：descriptor 要定义或修改的属性值
返回值：被传递给函数的对象
<script>
let person = {
name:"dudu",
age:4,
}
Object.defineProperty(person,'gender',{
value:'女'
})
console.log(person) //{name: 'dudu', age: 4, gender: '女'}
</script>
- 通过Object.defineproperty设置的属性不可以枚举（不可以被遍历）
- value：设置属性值
- enumerable：是否可枚举，默认为false
- writable：是否可修改，默认为false
- configurable：是否可删除，默认为false
let person = {
name:"dudu",
age:4,
}
Object.defineProperty(person,'gender',{
value:'女',
enumerable:true, //是否可枚举
})
console.log(Object.keys(person)) //['name', 'age','gender'] console.log(Object.keys(person)) //['name', 'age']
- get() ：当读取“参数2”时就会调用get方法（getter），其返回值为参数2的值（必须要有返回值），此时不可以在设置value
- set()：当修改参数2时会调用的set方法（setter），接收一个参数
<script>
let number = 19
let person = {
name:'嘟嘟',
sex:'女'
}
Object.defineProperty(person,'age',{
// 当读取age属性时会调用
// 必须有返回值，返回值就是age的值
get() {
console.log("有人在读取age属性")
return number
},
set(val) {
console.log("age属性被修改了！")
number = val
}
})
</script>
1.3.2 数据代理
- 数据代理是什么
- 通过一个对象代理对另一个对象中的属性的操作（读/写）
let obj1 = {
x:100}
let obj2 = {
y:200}
// 通过obj2操作obj1中的x
Object.defineProperty(obj2,'x',{
get() {
return obj1.x
},
set(val) {
obj1.x = val
}
})
2. vue中的数据代理
- 通过vm对象来代理data对象中属性（读/写，即getter / setter）
- 这样更加方便操作data中的数据
- 基本原理
通过Object.defineProperty()把data对象中的所有属性添加到vm上。
为每一个添加到vm上的属性，指定一个getter、setter
在getter、setter内部去操作（读、写）data对应的属性
- _data内部是通过数据劫持实现的
2. vue基础用法
2.1 基本使用步骤
- 导入vue.js的script脚本
- 声明DOM区域
- 创建vm实例对象（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>
<!-- 1. 导入vue的库，此时在window全局就有了vue构造函数 -->
<script src="./lib/vue-2.6.14.js"></script>
</head>
<body>
<div id="app">{
{username}}</div>
<!-- 2. 创建vue实例 -->
<script>
const vm = new Vue({
// el是固定用法，表示当前vm实例要控制的区域，值是一个选择器
el:'#app',
// data对象就是要渲染到页面的数据
data:{
username:'嘟嘟'
}
})
</script>
</body>
</html>
2.2 vue调试工具
- 安装vue-devtools调试工具
vue调试工具插件下载地址
- 将下载的文件解压，打开谷歌浏览器，右上角（…） ==》 更多工具 ==》扩展程序，将解压的Vue.jsxxxxx.crx文件拖入扩展程序中
注：安装好后需要重启谷歌才生效
3. vue指令
3.1 内容渲染指令
作用：用于辅助开发者渲染DOM元素的文本内容
3.1.1 v-text
- 用于更新元素的textContent
- v-text会覆盖元素内部原有的内容，一般不常用
3.1.2 插值语法 { {}}
- 插值表达式（Mustache），是最常用的用法
- 只能用在元素的内容节点中，不可用于属性节点
- { {}}中只能写简单的js表达式，不能写if等复杂的js语句
3.1.3 v-html
- 用于更新元素的innerHTML，渲染有标签的字符串为真正的DOM元素
- 会覆盖子组件
- 会有XXS风险
<body>
<div id="app">
<p>
姓名：
<span v-text="username"></span>
</p>
<p>
性别：{
{gender}}
</p>
<div v-html="info"></div>
</div>
<!-- 2. 创建vue实例 -->
<script>
const vm = new Vue({
// el是固定用法，表示当前vm实例要控制的区域，值是一个选择器
el:'#app',
// data对象就是要渲染到页面的数据
data:{
username:'嘟嘟',
gender:"女",
info:`<h4 style="color:red">vue.js学习</h4>`
}
})
</script>
</body>
运行效果截图：
3.2 属性绑定指令 v-bind
3.2.1 简写成 :
动态绑定属性值
<input type="text" :placeholder="tips">
3.2.2 JS表达式
在vue的模板渲染语法中除了支持绑定数据值，还可以支持JavaScript表达式的运算，但一般不推荐在HTML中写js表达式
<div>{
{
age+1}}</div>
- 一旦使用了v-bind就会被认为js表达式
3.2.3 动态绑定class样式
:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
3.2.4 动态绑定style样式
:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。
3.3 事件绑定指令 v-on
3.3.1 简化写法 @
和事件处理函数methods搭配使用，@定义的方法要写在methods中
在绑定事件处理函数时可以进行传参
<body>
<div id="app">
<p>值：{
{num}}</p>
<button @click="addNum(5)">加法</button>
<button @click="subNum">减法</button>
</div>
<!-- 2. 创建vue实例 -->
<script>
const vm = new Vue({
// el是固定用法，表示当前vm实例要控制的区域，值是一个选择器
el:'#app',
// data对象就是要渲染到页面的数据
data:{
num:0
},
methods: {
addNum(n) {
this.num += n
},
subNum() {
this.num--
}
}
})
</script>
</body>
注：vue2 中的methods方法中this指向的是vm实例
3.3.2 事件对象 $event
- 在绑定事件时如果不传参，就会默认接收一个事件对象 e
<body>
<div id="app">
<p>值：{
{num}}</p>
<!-- 如果num为偶数背景色为蓝色 -->
<button @click="addNum">加法</button>
</div>
<!-- 2. 创建vue实例 -->
<script>
const vm = new Vue({
// el是固定用法，表示当前vm实例要控制的区域，值是一个选择器
el:'#app',
// data对象就是要渲染到页面的数据
data:{
num:0
},
methods: {
addNum(e) {
this.num += 1
// // 判断奇偶
if(this.num % 2 ===0){
// e.target 获取当前操作的DOM
e.target.style.backgroundColor = "skyBlue"
e.target.style.color = "#fff"
}else {
e.target.style.backgroundColor = ""
e.target.style.color = "#000"
}
}
}
})
</script>
</body>
- 如果传了参数要获取e，可以通过 $event（原生的DOM事件对象e）获取
<button @click="addNum(2,$event)">加法</button>
3.3.3 事件修饰符
- e.preventDefault() 或 e.stopPropagation() 阻止默认行为（原生js中）
- vue中通过事件修饰符 .prevent 阻止默认行为
<!-- 阻止a链接跳转 -->
<a href="https://www.baidu.com/" @click.prevent="showInfo">百度</a>
vue中的事件修饰符
- .prevent 阻止默认行为（如a链接跳转，表单的提交等）
- .stop 阻止事件冒泡
- .capture 以捕获模式触发当前的事件处理函数
- .once 绑定的事件值触发一次
- .self 只有在e.target是当前元素时触发
3.3.4 按键修饰符
用于监听详细的键盘事件
<body>
<div id="app">
<!-- 按下esc键清空输入框 -->
<!-- 按下enter键输出值 -->
<input type="text" @keyup.esc="cleanInput" @keyup.enter="enterFun">
</div>
<script>
const vm = new Vue({
el:'#app',
data: {
},
methods: {
cleanInput(e) {
// 清空输入
e.target.value = ''
},
enterFun(e) {
console.log(`输入的值为"${
e.target.value}"`)
}
}
})
</script>
</body>
3.4 双向数据绑定指令 v-model
作用：在不操作DOM的前提下，快速捕获表单数据
- v-model是双向绑定，数据变化会引起页面变化，页面变化会引起数据变化，适用于表单元素
- v-bind 是单向绑定，只有数据变化会引起页面变化
<body>
<div id="app">
<p>用户名：{
{username}}</p>
<!-- v-model是双向绑定，数据变化会引起页面变化，页面变化会引起数据变化 -->
<input type="text" v-model="username">
<!-- v-bind 是单向绑定，只有数据变化会引起页面变化 -->
<p><input type="text" :value="username"></p>
</div>
<script>
const vm = new Vue({
el:'#app',
data: {
username:"嘟嘟"
}
})
</script>
</body>
效果图：
常见的表单元素：
-
input输入框
type=“radio”
type=“checkbox”
type=“text”
… -
textarea
-
select
3.4.1 v-model的指令修饰符
- .number：将用户输入值转为数值（number）类型
如：输入电话号码时 - .trim：过滤输入的收尾空白字符
如：登录注册时 - .lazy：在"change"时更新而不是在“input”时更新
3.5 条件渲染指令：v-if 和 v-show
3.5.1 共同点
控制元素的显示和隐藏
3.5.2 区别
- v-if
每次都会创建或移除元素
适用于初始默认不展示，后面也可能不展示 - v-show
通过display来控制元素的隐藏或显示
适用于要频繁的切换元素的显示隐藏状态
3.5.3 v-else
v-if可以和v-else-if、v-else搭配使用
<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">及格</div>
<div v-else>差</div>
3.6 列表渲染指令 v-for
3.6.1 基本列表
v-for=“被循环的每一项 in 待循环数组”
或者
v-for=“被循环的每一项 of 待循环数组”
<body>
<script src="./lib/vue-2.6.14.js"></script>
<div id="app">
<table class="table table-borderd table-hover">
<thead>
<th>索引</th>
<th>ID</th>
<th>姓名</th>
</thead>
<tbody>
<tr v-for="(item,index) of list" :key="item.id">
<td>{
{index}}</td>
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
</tr>
</tbody><
最低0.47元/天 解锁文章
扫一扫
677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
