Vue-Vue.js入门
Vue.js
- 1.Vue入门
-
- 1.1Vue定义
- 1.2MVVM模式
- 1.3案例
- 2.基本使用
-
- 2.1插值表达式：{{}}
- 2.2标签体操作：v-text&v-html
- 2.3循环语句: v-for
- 2.4属性绑定--普通属性： v-bind:xxx
- 2.5属性绑定--class属性: v-bind:class
- 2.6属性绑定--style属性: v-bind:style
- 2.7控制语句: v-show & v-if
- 2.8表单数据绑定: v-model
- 3.事件操作
-
- 3.1事件绑定: v-on:事件名
- 3.2事件绑定--this关键字
- 3.3案例：查询所有
- 3.4事件修饰符
- 3.5按键修饰符
- 4.生命周期
-
- 4.1生命周期是什么
- 4.2生命周期流程
- 5.案例：学生管理系统
- 6.计算属性和监听器
-
- 6.1计算属性 computed
-
- 6.1.1存在问题
- 6.1.2基本使用
- 6.1.3computed和methods区别
- 6.1.4案例：购物车
- 6.1.5高级使用
- 6.2监听器 watch
-
- 6.2.1什么是监听器
- 6.2.2基本语法
- 6.2.3高级使用：监听对象属性
- 7.组件
-
- 7.1什么是组件
- 7.2组件分类
-
- 7.2.1全局组件
- 7.2.2局部组件
- 7.3组件自定义属性
-
- 7.3.1什么是组件属性？
- 7.3.2定义属性
- 7.3.3绑定属性值
- 7.3.4组件事件
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>Documenttitle>
<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>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
{{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-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>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<div v-text="msg1">div>
<div v-text="msg2">div>
<div v-html="msg1">div>
<div v-html="msg2">div>
div>
body>
html>
<script>
new Vue({
el: '#app',
data: {
msg1 : '普通文本',
msg2 : `超链接`
}
})
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>Documenttitle>
<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:属性名=””>
<标签 :属性名=””>
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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<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
<标签 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>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
变量值：{{isShow}} <br/>
<div v-show="isShow">show控制的内容div>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<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>Documenttitle>
<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存在问题
- 插值表达式, 可以完成表达式的计算,如果逻辑复杂时,将很难维护. 例如:
{{ message.split('').reverse().join('') }}
6.1.2基本使用
- Vue计算属性computed就是用来处理复杂逻辑的. 当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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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: '您好!{{name}}',
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: '您好!现在是在使用子组件',
};
//下面两个实例都可以使用全局组件
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: '欢迎您，游客! {{welcome}}'
})
//下面两个实例都可以使用全局组件
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: '欢迎您，游客! {{welcome}}'
})
//下面两个实例都可以使用全局组件
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: ''
})
//下面两个实例都可以使用全局组件
new Vue({
el: '#app1',
data:{
txt:"绑定数据到属性"
},
methods:{
hello:function(){
alert("组件事件");
}
}
});
script>
body>
html>
- 2 自定义事件
除了原生的事件外，还可以为组件添加自定义的事件，通过自定义的事件，子组件可以向父组件传递消息
- 在组件中我们可以使用 emit 触发一个事件，这个事件的名字是我们自己定义的
定义方法如下：声明事件名称
this.$emit('事件名')
在使用这个组件时，就可以为这个新的事件名绑定一个事件：
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>
