1.Vue入门
1.1Vue定义
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。
- Vue 的核心库只关注视图层,也就是只处理页面。
- Vue提供的一套JS框架,通常称为vue全家桶。
- 渐进式,也就是说可以在已有的项目中部分使用Vue,逐渐过渡到整个项目都使用Vue,最后完全使用Vue全家桶来完成整个项目。可以在HTML导入js当成jquery使用、也可以使用vue全家桶进行单页开发。
1.2MVVM模式
- MVVM(Model-View-ViewModel)是对 MVC(Model-View-Control)和 MVP(Model-View-Presenter)的进一步改进。
- View:视图层(UI 用户界面)
- ViewModel:业务逻辑层(一切 js 可视为业务逻辑)
- Model:数据层(存储数据及对数据的处理如增删改查)
- MVVM 将数据双向绑定(data-binding)作为核心思想,View 和 Model 之间没有联系,它们通过 ViewModel 这个桥梁进行交互。
1.3案例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
message : '我只是一个提示信息'
}
})
</script>
2.基本使用
2.1插值表达式:{{}}
{{插值表达式}}
1.支持data区域数据的显示。例如:{{message}}
2.支持表达式的计算。例如:{{1+2+3}} 、 {{‘Hello’ + ’ World’}}
3.支持函数的调用。例如:{{‘Hello’.split(’’)}}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 读取data区域数据 -->
{{msg1}} <br/>
<!-- 表达式计算 -->
{{msg1 + msg2}} <br/>
<!-- 调用函数 -->
{{msg2.split('')}} <br/>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
msg1 : 'Hello',
msg2 : 'World'
}
})
</script>
2.2标签体操作:v-text&v-html
<!-- v-text 以【文本】方式处理标签体 -->
<标签 v-text=””></标签>
<!-- v-html 以【html标签】方式处理标签体 -->
<标签 v-html=””></标签>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 以【文本】处理标签体 -->
<div v-text="msg1"></div>
<div v-text="msg2"></div>
<!-- 以【html代码】处理标签体 -->
<div v-html="msg1"></div>
<div v-html="msg2"></div>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
msg1 : '普通文本',
msg2 : `<a href='http://www.czxy.com'>超链接</a>`
}
})
</script>
2.3循环语句: v-for
<!--完整写法-->
<标签 v-for=”(变量,索引) in 数组|集合”>
{{变量}} , {{索引}}
</标签>
<!--简化写法-->
<标签 v-for=”变量in 数组|集合”>
</标签>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>普通数组数据遍历</h2>
<span v-for="(un,index) in arr">
{{index}} {{un}} <br/>
</span>
<h2>对象数组数据遍历</h2>
<table border="1">
<tr>
<td>编号</td>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(student,index) in list">
<td>{{index + 1}}</td>
<td>{{student.id}}</td>
<td>{{student.username}}</td>
<td>{{student.age}}</td>
</tr>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
arr: ['张三','李四','王五'], //普通数组数据
list: [ //对象数组数据
{ id: 's001', username: '张三', age: '18'},
{ id: 's002', username: '李四', age: '21'},
{ id: 's003', username: '王五', age: '25'},
]
}
})
</script>
2.4属性绑定–普通属性: v-bind:xxx
!--完整写法-->
<标签 v-bind:属性名=””></标签>
<!--省略写法, v-bind可以省略 -->
<标签 :属性名=””></标签>
1.如果需要显示data区域的数据,直接写. 例如: url
2.如果需要显示普通字符串,需要单引号. 例如: ‘?username=jack’
3.data区域的数据和普通字符串可以通过+连接
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>超链接展示</h2>
<a href="url">第1个链接</a> <br/>
<a v-bind:href="url">第2个链接</a> <br/>
<a :href="url">第3个链接</a> <br/>
<a :href="url + '?uid=' + uid">第3个链接</a> <br/>
<h2>下拉列表展示</h2>
<select >
<option value="">--请选择--</option>
<option v-for="(cls,index) in list" :value="cls.id">{{cls.name}}</option>
</select>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
url: 'httt://www.czxy.com',
uid: 'u001',
list: [
{ id: 'c001', name: 'Java12班', desc: '。。。。'},
{ id: 'c002', name: 'Java34班', desc: '。。。。'},
{ id: 'c003', name: 'Java56班', desc: '。。。。'},
]
}
})
</script>
2.5属性绑定–class属性: v-bind:class
方式1: 字符串,必须使用单引号
<标签 v-bind:class=”’类名’”></标签>
方式2: 对象,key是类名; value是Boolean值,是否显示. (对象数据可以在data区域)
<标签 v-bind:class=”{’类名’:true , ’类名2’ : false}”></标签>
方式3: 数组,相当于’方法2’的简化版,所有都是true
<标签 v-bind:class=”[’类名’, ’类名2’]”></标签>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
.myClass {
height : 10px; /*高度*/
width : 300px; /*宽度*/
border: 1px solid #000; /*边框:粗细 样式 颜色*/
background-color: #f00; /*背景色*/
}
.myClass2 {
width : 600px;
}
</style>
</head>
<body>
<div id="app">
<h2>样式展示</h2>
<div class="myClass"></div>
<div v-bind:class="mc"></div>
<div v-bind:class="'myClass'"></div>
<div class="myClass myClass2"></div>
<div v-bind:class="['myClass','myClass2']"></div>
<div v-bind:class="{'myClass': true,'myClass2': true}"></div>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
mc: 'myClass',
}
})
</script>
- 案例:隔行换色
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
.cls1 {
background-color: #999;
}
.cls2 {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="app">
<h2>隔行换色展示</h2>
<table border="1">
<tr>
<td>编号</td>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(student,index) in list" v-bind:class="student.cls">
<td>{{index + 1}}</td>
<td>{{student.id}}</td>
<td>{{student.username}}</td>
<td>{{student.age}}</td>
</tr>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
list: [ //对象数组数据
{ id: 's001', username: '张三', age: '18', cls : 'cls1'},
{ id: 's002', username: '李四', age: '21', cls : 'cls2'},
{ id: 's003', username: '王五', age: '25', cls : 'cls1'},
{ id: 's004', username: '王五', age: '25', cls : 'cls2'},
]
}
})
</script>
2.6属性绑定–style属性: v-bind:style
方式1: 对象, key样式名, value样式值 .
//key和value需要使用单引号
//key可以不使用单引号,需要将含-命名的属性进行驼峰命名 例如:abc-def 写成 abcDef
<标签 v-bind:style=”{’样式名’:’样式值’, ’样式名2’ : ’样式值2’}”></标签>
方式2: 数组, 运行绑定多个对象
<标签 v-bind:class=”[对象名, 对象名2]”></标签>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--
1.key和value需要使用单引号
2.key可以不使用单引号,需要将含-命名的属性进行驼峰命名,例如:font-size 写成 fontSize
3.value如果不使用引号,表示变量
-->
<div v-bind:style="{'background-color':'#f00',fontSize:'40px','text-align': align}">测试数据</div>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
align : 'center'
}
})
</script>
2.7控制语句: v-show & v-if
<!--控制标签是否显示, 通过display控制显示或隐藏 -->
<标签 v-show=”true|false”></标签>
<!--控制标签是否存在 -->
<标签 v-if=”true|false”></标签>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
变量值:{{isShow}} <br/>
<!-- 通过样式display控制是否显示 -->
<div v-show="isShow">show控制的内容</div>
<!-- 通过html源码是否存在,控制是否显示 -->
<div v-if="isShow">if控制的内容</div>
<input type="button" @click="isShow=!isShow" value="切换">
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
isShow : true
}
})
</script>
2.8表单数据绑定: v-model
- 通过 v-model 可以完成数据双向绑定.
* 数据data区域 绑定 视图区域, 如果data数据区域的数据发生改变, 自动更新表单标签的显示
* 视图区域 绑定 数据data区域 , 如果表单标签的数据发生改变,自动更新data区域存放的数据.
* - 案例:数据绑定–变量
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
用户名:{{username}} <br/>
<input type="text" v-model="username">
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
username : 'jack'
}
})
</script>
- 案例:数据绑定–对象
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
用户名 : <input type="text" v-model="user.username"> <br/>
密码 : <input type="password" v-model="user.password"> <br/>
性别 : <input type="radio" v-model="user.gender" value="1">男
<input type="radio" v-model="user.gender" value="0">女 <br/>
显示内容: {{user}}
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
user: {
username : '',
password : '',
gender : ''
}
}
})
</script>
3.事件操作
3.1事件绑定: v-on:事件名
- vue 运行通过 v-on:xxx 给标签绑定指定的事件
<!--完整写法-->
<标签 v-on:事件名=”函数名”></标签>
<!--简化写法-->
<标签 @事件名=”函数”></标签>
<!--常见事件-->
<标签 v-on:click=”函数”> </标签> //点击事件
<标签 v-on:focus=”函数”> </标签> //获得焦点事件
<标签 v-on:blur=”函数”> </标签> //失去焦点事件
- 在绑定事件时,使用到了”函数”,需要在vue中通过methods 定义函数
<script>
new Vue({
el: '#app',
methods: {
函数名1 : function(){...}, //匿名函数
函数名2 : () => {...}, //箭头函数
函数名3(){...} //简写方式
},
})
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" v-on:click="show" value="第1个按钮"> <br/>
<input type="button" @click="show2" value="第2个按钮"> <br/>
<input type="button" @click="show3" value="第3个按钮"> <br/>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
methods: {
show : function() {
alert('匿名函数')
},
show2 : () => {
alert('箭头函数')
},
show3() {
alert('函数简写')
}
},
})
</script>
3.2事件绑定–this关键字
- 在vue中,某一个成员需要使用另一个成员,需要通过”this.”进行引用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
结果: {{isShow}} <br/>
<input type="button" v-on:click="change" value="切换"> <br/>
<input type="button" v-on:click="show" value="调用"> <br/>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data:{
isShow: true
},
methods: {
change() {
this.isShow = !this.isShow
},
show() {
// 调用chang()函数
this.change()
}
},
})
</script>
3.3案例:查询所有
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<input type="button" @click="findAll" value="查询"> <br/>
<table border="1">
<tr>
<td>编号</td>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<!-- 遍历数据 -->
<tr v-for="(student,index) in list">
<td>{{index + 1}}</td>
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td>{{student.sex}}</td>
</tr>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data:{
list: []
},
methods: {
async findAll() {
// ajax 查询
var url = "http://data.javaliang.com/data/jack/student"
let { data } = await axios.get(url)
// 将结果存放到data区域
this.list = data.data
}
},
})
</script>
3.4事件修饰符
- vue 通过事件修饰符对js事件进行细节控制。
<标签 v-on:事件.修饰符=”函数”>
</标签>
-
常见的修饰符有:
* .prevent : 阻止浏览器默认行为
* .stop : 阻止浏览器事件冒泡
* .once : 只触发1次 -
案例:阻止超链接的默认行为
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a href="http://www.czxy.com" @click.prevent="go">访问学校官网</a>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
methods: {
go() {
alert('我执行了后,默认跳转到学校官网!添加prevent后将不跳转。')
}
},
})
</script>
3.5按键修饰符
- vue允许为 v-on 在监听键盘事件时, 使用按键修饰符, 约束事件的触发
- 键盘事件: keyup和keydown
<标签 v-on:事件.修饰符=”函数” >
</标签>
-
常见按键修饰符
* .enter : //回车键
* .tab ://Tab键
* .delete (捕获 “删除” 和 “退格” 键) ://Backspace键或Delete键
* .esc ://Esc键
* .space ://空格键
* .up ://上键
* .down:下键
* .left :左键
* .right :右键
* .ctrl :Ctrl键
* .alt :Alt键
* .shift :Shift键 -
案例:文本框回车触发函数
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 文本框 通过 v-model 绑定数据
在通过keyup监听键盘事件,并在回车(enter)时触发 -->
<input type="text" v-model="keyword" @keyup.enter="show">
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data:{
keyword: ''
},
methods: {
show() {
console.info( this.keyword )
}
}
})
</script>
4.生命周期
4.1生命周期是什么
-
Vue的生命周期, 就是Vue实例从创建到销毁的过程.
* 完整过程包含: 开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁 -
vue生命周期含8步骤(有8个沟子函数):创建、挂载、更新、销毁
created() 创建后
mounted() 挂载后
4.2生命周期流程
属性名 | 执行时机 | 描述 |
---|---|---|
beforeCreate | 创建前 | Vue实例创建时触发, 一般不做操作 |
created | 创建后 | 挂载数据,绑定事件等之后,执行created函数 |
一般可以获取初始数据 | ||
beforeMount | 挂载到页面前 | 已经创建虚拟dom, 准备渲染 |
mounted | 挂载到页面后 | 已经渲染真实dom |
beforeUpdate | 更新页面前 | |
updated | 更新页面后 | |
beforeDestroy | 销毁vue之前 | |
destroyed | 销毁之后 |
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message"> <br/>
原始数据:{{message}} <br/>
</div>
</body>
</html>
<script>
let vue = new Vue({
el: '#app',
data:{
message: 'abc'
},
beforeCreate() {
console.info('1.创建前')
},
created() {
console.info('2.创建')
},
beforeMount() {
console.info('3.挂载前')
},
mounted() { //页面加载成功
console.info('4.挂载')
},
beforeUpdate() {
console.info('5.更新前')
},
updated() {
console.info('6.更新')
},
beforeDestroy() {
console.info('7.销毁前')
},
destroyed() {
console.info('8.销毁')
},
})
//销毁
// vue.$destroy()
</script>
5.案例:学生管理系统
可以直接看这篇:
https://blog.csdn.net/weixin_48143996/article/details/121100772?spm=1001.2014.3001.5501
6.计算属性和监听器
6.1计算属性 computed
6.1.1存在问题
- 插值表达式, 可以完成表达式的计算,如果逻辑复杂时,将很难维护. 例如:
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
6.1.2基本使用
- Vue计算属性computed就是用来处理复杂逻辑的. 当data区域的数据变更是,将进行自动计算.
<script>
new Vue({
el: '#app',
computed: {
属性名(){
// 功能
return 返回值;
}
},
})
</script>
- 案例:字符串倒排
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{showMessage}}
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
message : 'abcd'
},
computed: {
showMessage(){
return this.message.split('').reverse().join('')
}
},
})
</script>
6.1.3computed和methods区别
- 计算属性,用于实时计算,只要数据发生了更改才计算。缓存计算结果。
- 方法,每次调用都执行
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="计数" @click="count++"> <br/>
<h2>计算属性</h2>
{{showCount}} <!--第一次时,执行-->
{{showCount}} <!--第二次,读取缓存-->
<h2>普通方法</h2>
{{showCount2()}}
{{showCount2()}}
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
count : 0
},
computed: {
showCount(){
console.info('计算属性执行')
return '计算属性:' + this.count;
}
},
methods: {
showCount2(){
console.info('普通方法执行')
return '普通方法:' + this.count;
}
},
})
</script>
6.1.4案例:购物车
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
a {
text-decoration: none; /*a标签取消下划线*/
font-size:20px;
}
</style>
</head>
<body>
<div id="app">
<table border="1" width="500">
<tr>
<td>编号</td>
<td>标题</td>
<td>单价</td>
<td>购买数量</td>
<td>小计</td>
</tr>
<tr v-for="(book,index) in cart" :key="index">
<td>{{index+1}} </td>
<td>{{book.title}} </td>
<td>{{book.price}} </td>
<td>
<a href="#" @click.prevent="book.count > 0 ? book.count-- : 0">-</a>
{{book.count}}
<a href="#" @click.prevent="book.count++">+</a>
</td>
<td>{{book.price * book.count}} </td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2">总价:{{totalPrice}} </td>
</tr>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
cart :[
{
title : '葵花籽真经',
price : 32,
count : 0
},
{
title : '程序员的修养',
price : 66,
count : 0
}
]
},
computed: {
totalPrice() {
var sum = 0
this.cart.forEach( (book) => {
sum += book.price * book.count;
})
return sum;
}
}
})
</script>
6.1.5高级使用
- 计算属性提供了setter方法对属性进行修改
<script>
new Vue({
el: '#app',
computed: {
属性名: {
get: function() { return ...} , //getter方法
set: function(val) { .... } //setter方法
}
},
})
</script>
- 案例:拆分姓名 (第一版)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
请输入姓名:<input type="text" v-model="username"> <br/>
姓:{{firstname}} <br/>
名:{{secondname}}
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
firstname: '',
secondname: ''
},
computed: {
username: {
get() {
return this.firstname + this.secondname;
},
set(val) {
if(val){
this.firstname = val.substring(0,1)
this.secondname = val.substring(1)
} else {
this.firstname = ''
this.secondname = ''
}
}
}
},
})
</script>
6.2监听器 watch
6.2.1什么是监听器
监听数据的变化
<script>
new Vue({
el: '#app',
data: {
变量: '',
},
watch: {
变量: function(新数据, 旧数据) {
},
变量2:{
handler: function (val, oldVal) { /* ... */ },
deep: true /*监听对象属性,不论嵌套多深*/
}
},
})
</script>
6.2.2基本语法
- 案例:拆分姓名 (第二版)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
请输入姓名:<input type="text" v-model="username"> <br/>
姓:{{firstname}} <br/>
名:{{secondname}}
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
username: '',
firstname: '',
secondname: ''
},
watch: {
username: function(val, oldVal) {
if(val){
this.firstname = val.substring(0,1)
this.secondname = val.substring(1)
} else {
this.firstname = ''
this.secondname = ''
}
}
},
})
</script>
6.2.3高级使用:监听对象属性
- 案例:拆分姓名 (第三版)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
请输入姓名:<input type="text" v-model="user.username"> <br/>
姓:{{firstname}} <br/>
名:{{secondname}}
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
user: {
username: '',
},
firstname: '',
secondname: ''
},
watch: {
user: {
handler: function(val, oldVal) {
if(val.username){
this.firstname = val.username.substring(0,1)
this.secondname = val.username.substring(1)
} else {
this.firstname = ''
this.secondname = ''
}
},
deep: true
}
},
})
</script>
7.组件
7.1什么是组件
组件是可复用的 Vue 实例,且带有一个名字
在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如:头部导航、尾部信息等模块。
但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。
7.2组件分类
- 组件的作用域分为两种:全局组件 和 局部组件。
- 全局组件:在所有的Vue实例中都可以使用
- 局部组件:只有在注册了组件的Vue实例中才可以使用
7.2.1全局组件
使用 Vue.component 定义的组件为全局组件,在所有的 Vue 实例中都可以使用。
比如以下代码中定义了一个全局组件,这个组件在两个Vue实例中都可以使用:
- 语法
Vue.component("",{
template: ``, // 定义html部分,要求有一个根标签
data() { // 定义数据部分
return {
}
},
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<!--组件必须绑定在实例下面才能起作用-->
<my-nav></my-nav>
</div>
<div id="app2">
<!--组件必须绑定在实例下面才能起作用-->
<my-nav></my-nav>
</div>
<script>
//定义组件1
Vue.component("MyNav", {
template: '<div>您好!{{name}}</div>',
data: function () {
return {
name: "jack"
}
}
})
//下面两个实例都可以使用全局组件
new Vue({
el: '#app1'
});
//下面两个实例都可以使用全局组件
new Vue({
el: '#app2'
});
</script>
</body>
</html>
7.2.2局部组件
局部组件是指只能在注册了该组件的 Vue 实例中才可以使用。(先需要注册才能用)
局部组件的定义只是定义一个组件对象:
局部组件的定义只是定义一个组件对象:
var 组件名 = { … }
在需要使用这个组件的Vue中注册组件
const app = new Vue({
…
components:{
组件名:组件对象
}
})
局部组件使用实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<!--组件必须绑定在实例下面才能起作用-->
<my-hello></my-hello>
</div>
<script>
var hello = {
template: '<div>您好!现在是在使用子组件</div>',
};
//下面两个实例都可以使用全局组件
new Vue({
el: '#app1',
components:{
"MyHello":hello
}
});
</script>
</body>
</html>
7.3组件自定义属性
7.3.1什么是组件属性?
什么是组件属性?比如我们在使用img标签时, src就是属性。如果我们把img看做一个组件的话,src就是这个组件的属性。
- 总结:组件属性用于父组件向子组件传递数据。
7.3.2定义属性
当需要为组件设置属性时,我们需要先在定义组件时使用 props 来设置这个组件上所有属性的名字:
Vue.component(’…’,{
…
props:[属性名字数组]
})
定义了组件属性之后,在组件中就可以像使用一个普通数据一样使用属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<!--组件必须绑定在实例下面才能起作用-->
<my-nav welcome="张三丰"></my-nav>
</div>
<script>
Vue.component('MyNav', {
props: ['welcome'],
template: '<div>欢迎您,游客! {{welcome}}</div>'
})
//下面两个实例都可以使用全局组件
new Vue({
el: '#app1'
});
</script>
</body>
</html>
7.3.3绑定属性值
还可以把属性值绑定到 Vue 的数据中,实现方式如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<!--组件必须绑定在实例下面才能起作用-->
<my-nav :welcome="txt"></my-nav>
</div>
<script>
Vue.component('MyNav', {
props: ['welcome'],
template: '<div>欢迎您,游客! {{welcome}}</div>'
})
//下面两个实例都可以使用全局组件
new Vue({
el: '#app1',
data:{
txt:"绑定数据到属性"
}
});
</script>
</body>
</html>
7.3.4组件事件
- 1)原生事件
当需要在组件上绑定 JS 中原生的事件时,必须要添加 .native 修饰符,否则该事件是无法触发的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<!--组件必须绑定在实例下面才能起作用-->
<my-nav :welcome="txt" @click.native="hello">您好</my-nav>
</div>
<script>
Vue.component('MyNav', {
props: ['welcome'],
template: '<button>欢迎您,游客! {{welcome}}</button>'
})
//下面两个实例都可以使用全局组件
new Vue({
el: '#app1',
data:{
txt:"绑定数据到属性"
},
methods:{
hello:function(){
alert("组件事件");
}
}
});
</script>
</body>
</html>
- 2 自定义事件
除了原生的事件外,还可以为组件添加自定义的事件,通过自定义的事件,子组件可以向父组件传递消息
- 在组件中我们可以使用 emit 触发一个事件,这个事件的名字是我们自己定义的
定义方法如下:声明事件名称
this.$emit('事件名')
在使用这个组件时,就可以为这个新的事件名绑定一个事件:
<my-component v-on:事件名="doSomething"></my-component>
或者:
<my-component @事件名="doSomething"></my-component>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/toDao.js"></script>
</head>
<body>
<div id="app1">
<!--组件必须绑定在实例下面才能起作用-->
<to-do @todo="todo"></to-do>
</div>
<script>
//下面两个实例都可以使用全局组件
new Vue({
el: '#app1',
methods: {
todo: function () {
console.log('todo组件中发表了新的todo')
}
}
});
</script>
</body>
</html>