课件链接:https://pan.baidu.com/s/1OQJdnVR74_SBr7BqUYQAbw?pwd=8023
Vue2官网:https://v2.cn.vuejs.org/
Vue3官网:https://cn.vuejs.org/
代码:
Vue-基础部分
前言:环境准备
VsCode插件:
- techer.open-in-browser
- ritwickdey.LiveServer
Chrom浏览器插件:
1.1、Vue程序初体验
1.1.1、第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--安装vue -->
<script src="../js/vue.js"></script>
<div id="app"></div>
<script>
let myVue = new Vue({
template: "<h1>hello Vue</h1>"
});
myVue.$mount('#app');
</script>
</body>
</html>
1.1.2、模板引擎数据来源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板引擎数据来源</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 模板语句的数据来源:
1. 谁可以给模板语句提供数据支持呢?data选项。
2. data选项的类型是什么?Object | Function (对象或者函数)
3. data配置项的专业叫法:Vue 实例的数据对象.(data实际上是给整个Vue实例提供数据来源的。)
4. 如果data是对象的话,对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
5. data数据如何插入到模板语句当中?
{{}} 这是Vue框架自己搞的一套语法,别的框架看不懂的,浏览器也是不能够识别的。
Vue框架自己是能够看懂的。这种语法在Vue框架中被称为:模板语法中的插值语法。(有的人把他叫做胡子语法。)
怎么用?
{{data的key}}
插值语法的小细节:
{这里不能有其它字符包括空格{
}这里不能有其它字符包括空格}
-->
<div id="app"></div>
<script>
let myVue = new Vue({
template:
`
<h1>{{name}},年龄是:{{age}},兴趣爱好是:{{hoppy[0]}}、{{hoppy[1]}}、{{hoppy[2]}}</h1>
`,
data: {
name: "zhangsan",
"age": "23",
"hoppy": [
"抽烟", "喝酒", "烫头"
]
}
});
myVue.$mount("#app");
</script>
</body>
</html>
1.1.3、template配置项详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template配置项详解</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<h1>姓名:{{name}}</h1>
<h1>年龄:{{age}}</h1>
</div>
</div>
<script>
// Vue.config是Vue的全局配置对象。
// productionTip属性可以设置是否生成生产提示信息。
// 默认值:true。如果是false则表示阻止生成提示信息。
//Vue.config.productionTip = false
// 或者直接在vue.js全局搜索:productionTip,将它设置为false
/*
一 、关于template配置项:
1.template后面指定的是模板语句,但是模板语句中只能有一个根节点。
2.只要data中的数据发生变化,模板语句一定会重新编译。(只要data变,template就会重新编译,重新渲染)
3.如果使用template配置项的话,指定挂载位置的元素会被替换。
4.好消息:目前我们可以不使用template来编写模板语句。这些模板语句可以直接写到html标签中。Vue框架能够找到并编译,然后渲染。
5.如果直接将模板语句编写到HTML标签中,指定的挂载位置就不会被替换了。
二、关于$mount('#app')?
也可以不使用$mount('#app')的方式进行挂载了。
在Vue中有一个配置项:el
el配置项和$mount()可以达到同样的效果。
el配置项的作用?
告诉Vue实例去接管哪个容器。
el : '#app',表示让Vue实例去接管id='app'的容器。
el其实是element的缩写。被翻译为元素。
*/
new Vue({
data: {
name: "zhangzhixi",
age: "23"
},
// 替换掉 .$mount()
el: "#app"
});
</script>
</body>
</html>
1.1.4、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>
<!-- 安装Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备容器 -->
<div class="app">
<h1>{{msg}}</h1>
</div>
<div class="app">
<h1>{{msg}}</h1>
</div>
<!-- 准备容器 -->
<div id="app2">
<h1>{{name}}</h1>
</div>
<!-- vue程序 -->
<script>
/*
验证:一个Vue实例可以接管多个容器吗?
不能。一个Vue实例只能接管一个容器。一旦接管到容器之后,即使后面有相同的容器,Vue也是不管的。因为Vue实例已经“娶到媳妇”了。
*/
new Vue({
el : '.app',
data : {
msg : 'Hello Vue!'
}
})
new Vue({
el : '#app2',
data : {
name : 'zhangsan'
}
})
// 这个Vue实例想去接管 id='app2'的容器,但是这个容器已经被上面那个Vue接管了。他只能“打光棍”了。
new Vue({
el : '#app2',
data : {
name : 'jackson'
}
})
</script>
</body>
</html>
1.2、核心技术
1.2.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>
<!-- 安装Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
主要研究:{{这里可以写什么}}
1. 在data中声明的变量、函数等都可以。
2. 常量都可以。
3. 只要是合法的javascript表达式,都可以。
4. 模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 Math 和 Date 等。
'Infinity,undefined,NaN,isFinite,isNaN,'
'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,'
'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,'
'require'
-->
<!-- 准备容器 -->
<div id="app">
<!-- 在data中声明的 -->
<!-- 这里就可以看做在使用msg变量。 -->
<h1>{{msg}}</h1>
<h1>{{sayHello()}}</h1>
<!-- <h1>{{i}}</h1> -->
<!-- <h1>{{sum()}}</h1> -->
<!-- 常量 -->
<h1>{{100}}</h1>
<h1>{{'hello vue!'}}</h1>
<h1>{{3.14}}</h1>
<!-- javascript表达式 -->
<h1>{{1 + 1}}</h1>
<h1>{{'hello' + 'vue'}}</h1>
<h1>{{msg + 1}}</h1>
<h1>{{'msg' + 1}}</h1>
<h1>{{gender ? '男' : '女'}}</h1>
<h1>{{number + 1}}</h1>
<h1>{{'number' + 1}}</h1>
<h1>{{msg.split('').reverse().join('')}}</h1>
<!-- 错误的:不是表达式,这是语句。 -->
<!-- <h1>{{var i = 100}}</h1> -->
<!-- 在白名单里面的 -->
<h1>{{Date}}</h1>
<h1>{{Date.now()}}</h1>
<h1>{{Math}}</h1>
<h1>{{Math.ceil(3.14)}}</h1>
</div>
<!-- vue程序 -->
<script>
// 用户自定义的一个全局变量
var i = 100
// 用户自定义的一个全局函数
function sum(){
console.log('sum.....');
}
new Vue({
el : '#app',
data : {
number : 1,
gender : true,
msg : 'abcdef', // 为了方便沟通,以后我们把msg叫做变量。(这行代码就可以看做是变量的声明。)
sayHello : function(){
console.log('hello vue!');
}
}
})
</script>
</body>
</html>
1.2.2、模板语法之指令:v-once(只执行一次)
<!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>模板语法之指令语法 v-??? </title>
<!-- 安装Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
指令语法:
1. 什么是指令?有什么作用?
指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
2. Vue框架中的所有指令的名字都以“v-”开始。
3. 插值是写在标签体当中的,那么指令写在哪里呢?
Vue框架中所有的指令都是以HTML标签的属性形式存在的,例如:
<span 指令是写在这里的>{{这里是插值语法的位置}}</span>
注意:虽然指令是写在标签的属性位置上,但是这个指令浏览器是无法直接看懂的。
是需要先让Vue框架进行编译的,编译之后的内容浏览器是可以看懂的。
4. 指令的语法规则:
指令的一个完整的语法格式:
<HTML标签 v-指令名:参数="javascript表达式"></HTML标签>
表达式:
之前在插值语法中{{这里可以写什么}},那么指令中的表达式就可以写什么。实际上是一样的。
但是需要注意的是:在指令中的表达式位置不能外层再添加一个{{}}
不是所有的指令都有参数和表达式:
有的指令,不需要参数,也不需要表达式,例如:v-once
有的指令,不需要参数,但是需要表达式,例如:v-if="表达式"
有的指令,既需要参数,又需要表达式,例如:v-bind:参数="表达式"
5. v-once 指令
作用:只渲染元素一次。随后的重新渲染,元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
6. v-if="表达式" 指令
作用:表达式的执行结果需要是一个布尔类型的数据:true或者false
true:这个指令所在的标签,会被渲染到浏览器当中。
false:这个指令所在的标签,不会被渲染到浏览器当中。
-->
<!-- 准备一个容器 -->
<div id="app">
<h1>{{msg}}</h1>
<h1 v-once>{{msg}}</h1>
<h1 v-if="a > b">v-if测试:{{msg}}</h1>
</div>
<!-- vue程序 -->
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue!',
a: 12,
b: 11
}
})
</script>
</body>
</html>
用Vue插件,修改文本
1.2.2、v-bind指令详解
<!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>v-bind指令详解(它是一个负责动态绑定的指令)</title>
<!-- 安装Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
v-bind指令详解
1. 这个指令是干啥的?
它可以让HTML标签的某个属性的值产生动态的效果。
2. v-bind指令的语法格式:
<HTML标签 v-bind:参数="表达式"></HTML标签>
3. v-bind指令的编译原理?
编译前:
<HTML标签 v-bind:参数="表达式"></HTML标签>
编译后:
<HTML标签 参数="表达式的执行结果"></HTML标签>
注意两项:
第一:在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”
第二:表达式会关联data,当data发生改变之后,表达式的执行结果就会发生变化。
所以,连带的就会产生动态效果。
4. v-bind因为很常用,所以Vue框架对该指令提供了一种简写方式:
只是针对v-bind提供了以下简写方式:
<img :src="imgPath">
5. 什么时候使用插值语法?什么时候使用指令?
凡是标签体当中的内容要想动态,需要使用插值语法。
只要向让HTML标签的属性动态,需要使用指令语法。
-->
<!-- 准备一个容器 -->
<div id="app">
<!-- 注意:以下代码中 msg 是变量名。 -->
<!-- 注意:原则上v-bind指令后面的这个参数名可以随便写。 -->
<!-- 虽然可以随便写,但大部分情况下,这个参数名还是需要写成该HTML标签支持的属性名。这样才会有意义。 -->
<span v-bind:xyz="msg"></span>
<!-- 这个表达式带有单引号,这个'msg'就不是变量了,是常量。 -->
<span v-bind:xyz="'msg'"></span>
<!-- v-bind实战 -->
<img src="../img/1.jpg"> <br>
<img v-bind:src="imgPath"> <br>
<!-- v-bind简写形式 -->
<img :src="imgPath"> <br>
<!-- 这是一个普通的文本框 -->
<input type="text" name="username" value="zhangsan"> <br>
<!-- 以下文本框可以让value这个数据变成动态的:这个就是典型的动态数据绑定。 -->
<input type="text" name="username" :value="username"> <br>
<!-- 使用v-bind也可以让超链接的地址动态 -->
<a href="https://www.baidu.com">走起</a> <br>
<a :href="url">走起2</a> <br>
<!-- 不能采用以下写法吗? -->
<!--
不能这样,报错了,信息如下:
Interpolation inside attributes has been removed.
Use v-bind or the colon shorthand instead. For example,
instead of <div id="{{ val }}">, use <div :id="val">
属性内部插值这种语法已经被移除了。(可能Vue在以前的版本中是支持这种写法的,但是现在不允许了。)
请使用v-bind或冒号速记来代替。
请使用 <div :id="val"> 来代替 <div id="{{ val }}">
-->
<!-- <a href="{{url}}">走起3</a> -->
<h1>{{msg}}</h1>
</div>
<!-- vue程序 -->
<script>
// 赋值的过程就可以看做是一种绑定的过程。
//let i = 100
new Vue({
el : '#app',
data : {
msg : 'Hello Vue!',
imgPath : '../img/1.jpg',
username : 'jackson',
url : 'https://www.baidu.com'
}
})
</script>
</body>
</html>
1.2.3、v-model指令详解
<!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>v-model指令详解</title>
<!-- 安装Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
v-bind和v-model的区别和联系
1. v-bind和v-model这两个指令都可以完成数据绑定。
2. v-bind是单向数据绑定。
data ===> 视图
3. v-model是双向数据绑定。
data <===> 视图
4. v-bind可以使用在任何HTML标签当中。v-model只能使用在表单类元素上,例如:
input标签、select标签、textarea标签。
为什么v-model的使用会有这个限制呢?
因为表单类的元素才能给用户提供交互输入的界面。
v-model指令通常也是用在value属性上面的。
5. v-bind和v-model都有简写方式:
v-bind简写方式:
v-bind:参数="表达式" 简写为 :参数="表达式"
v-model简写方式:
v-model:value="表达式" 简写为 v-model="表达式"
-->
<!-- 准备一个容器 -->
<div id="app">
v-bind指令:<input type="text" v-bind:value="name1"><br>
v-model指令:<input type="text" v-model:value="name2"><br>
<!-- 以下报错了,因为v-model不能使用在这种元素上。 -->
<!-- <a v-model:href="url">百度</a> -->
v-bind指令:<input type="text" :value="name1"><br>
v-model指令:<input type="text" v-model="name2"><br>
消息1:<input type="text" :value="msg"><br>
消息2:<input type="text" v-model="msg"><br>
</div>
<!-- vue程序 -->
<script>
new Vue({
el : '#app',
data : {
name1 : 'zhangsan',
name2 : 'wangwu',
url : 'https://www.baidu.com',
msg : 'Hello Vue!'
}
})
</script>
</body>
</html>
1.2.4、MVVM分层思想
<!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>
<!--
1. MVVM是什么?
M:Model(模型/数据)
V:View(视图)
VM:ViewModel(视图模型):VM是MVVM中的核心部分。(它起到一个核心的非常重要的作用。)
MVVM是目前前端开发领域当中非常流行的开发思想。(一种架构模式。)
目前前端的大部分主流框架都实现了这个MVVM思想,例如Vue,React等。
2. Vue框架遵循MVVM吗?
虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。
Vue框架基本上也是符合MVVM思想的。
3. MVVM模型当中倡导了Model和View进行了分离,为什么要分离?
假如Model和View不分离,使用最原始的原生的javascript代码写项目:
如果数据发生任意的改动,接下来我们需要编写大篇幅的操作DOM元素的JS代码。
将Model和View分离之后,出现了一个VM核心,这个VM把所有的脏活累活给做了,
也就是说,当Model发生改变之后,VM自动去更新View。当View发生改动之后,
VM自动去更新Model。我们再也不需要编写操作DOM的JS代码了。开发效率提高了很多。
-->
<!-- 准备容器 -->
<!-- View V-->
<div id="app">
姓名:<input type="text" v-model="name">
</div>
<!-- vue程序 -->
<script>
// ViewModel VM
const vm = new Vue({
el : '#app',
// Model M
data : {
name : 'zhangsan'
}
})
</script>
</body>
</html>
1.2.5、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>
<!-- 安装Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
1. Vue实例不会给以_和$开始的属性名做数据代理。
2. 为什么?
如果允许给_或$开始的属性名做数据代理的话。
vm这个Vue实例上可能会出现_xxx或$xxx属性,
而这个属性名可能会和Vue框架自身的属性名冲突。
3. 在Vue当中,给data对象的属性名命名的时候,不能以_或$开始。
-->
<!-- 容器 -->
<div id="app">
<h1>{{msg}}</h1>
</div>
<!-- vue程序 -->
<script>
const vm = new Vue({
el : '#app',
data : {
msg : 'Hello Vue!',
/* 不能被识别 */
_name : 'zhangsan',
$age : 20
}
})
</script>
</body>
</html>
1.2.6、解读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>
<!-- 安装Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
Vue框架源代码中关键性代码:
1. var data = vm.$options.data;
注意:这是获取data。程序执行到这里的时候vm上还没有 _data 属性。
2. data = vm._data = isFunction(data) ? getData(data, vm) : data || {};
程序执行完这个代码之后,vm对象上多了一个_data这样的属性。
通过以上源码解读,可以得知data不一定是一个{},也可以是一个函数。
代码含义:
如果data是函数,则调用getData(data, vm)来获取data。
如果data不是函数,则直接将data返回,给data变量。并且同时将data赋值给vm._data属性了。
有一个疑问?
程序执行到这里,为什么要给vm扩展一个_data属性呢?
_data属性,以"_"开始,足以说明,这个属性是人家Vue框架底层需要访问的。
Vue框架底层它使用vm._data这个属性干啥呢?
vm._data是啥?
vm._data 是:{
name : 'jackson',
age : 35
}
vm._data 这个属性直接指向了底层真实的data对象。通过_data访问的name和age是不会走数据代理机制的。
通过vm._data方式获取name和age的时候,是不会走getter和setter方法的。
注意:对于Vue实例vm来说,不仅有_data这个属性,还有一个$data这个属性。
_data 是框架内部使用的,可以看做私有的。
$data 这是Vue框架对外公开的一个属性,是给我们程序员使用。
3. 重点函数:
function isReserved(str) {
var c = (str + '').charCodeAt(0);
return c === 0x24 || c === 0x5f;
}
这个函数是用来判断字符串是否以 _ 和 $ 开始的。
true表示以_或$开始的。
false表示不是以_或$开始的。
4. proxy(vm, "_data", key);
通过这行代码直接进入代理机制(数据代理)。
5. 重点函数proxy
function proxy(target, sourceKey, key) { // target是vm,sourceKey是"_data",key是"age"
sharedPropertyDefinition.get = function proxyGetter() {
return this["_data"]["age"];
};
sharedPropertyDefinition.set = function proxySetter(val) {
this["_data"]["age"] = val;
};
Object.defineProperty(vm, 'age', sharedPropertyDefinition);
}
-->
<!-- 容器 -->
<div id="app">
<h1>姓名:{{name}}</h1>
<h1>年龄:{{age}}岁</h1>
</div>
<!-- vue代码 -->
<script>
function isReserved(str) {
var c = (str + '').charCodeAt(0);
return c === 0x24 || c === 0x5f;
}
const vm = new Vue({
el: '#app',
data: {
name: 'jackson',
age: 35
}
})
// 如果我们程序员不想走代理的方式读取data,想直接读取data当中的数据,可以通过_data和$data属性来访问。
// 建议使用$data这个属性。
console.log('name = ' + vm.$data.name)
console.log('age = ' + vm.$data.age)
</script>
</body>
</html>
1.2.7、data也可以是一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>data也可以是一个函数</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
msg: "zhangsan"
};
}
});
// 关于配置项:enumerable、configurable
let phone = {
name: "IphoneX"
}
Object.defineProperty(phone, "color", {
value: "red",
// true表示可以进行遍历:Object.keys(phone)
enumerable: true,
// true表示是可以被删除的:delete phone.color
configurable: true
});
</script>
</body>
</html>
1.2.8、事件绑定:v-on,简写为:@
<!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>
<!-- 安装Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
Vue事件处理:
1.指令的语法格式:
<标签 v-指令名:参数名="表达式">{{插值语法}}</标签>
“表达式”位置都可以写什么?
常量、JS表达式、Vue实例所管理的XXX
2. 在Vue当中完成事件绑定需要哪个指令呢?
v-on指令。
语法格式:
v-on:事件名="表达式"
例如:
v-on:click="表达式" 表示当发生鼠标单击事件之后,执行表达式。
v-on:keydown="表达式" 表示当发生键盘按下事件之后,执行表达式。
3. 在Vue当中,所有事件所关联的回调函数,需要在Vue实例的配置项methods中进行定义。
methods是一个对象:{}
在这个methods对象中可以定义多个回调函数。
4. v-on指令也有简写形式
v-on:click 简写为 @click
v-on:keydown 简写为 @keydown
v-on:mouseover 简写为 @mouseover
....
5. 绑定的回调函数,如果函数调用时不需要传递任何参数,小括号()可以省略。
6. Vue在调用回调函数的时候,会自动给回调函数传递一个对象,这个对象是:当前发生的事件对象。
7. 在绑定回调函数的时候,可以在回调函数的参数上使用 $event 占位符,Vue框架看到这个 $event 占位符之后,会自动将当前事件以对象的形式传过去。
-->
<!-- 容器 -->
<div id="app">
<h1>{{msg}}</h1>
<!-- 使用javascript原生代码如何完成事件绑定。 -->
<button onclick="alert('hello')">hello</button>
<!-- 使用Vue来完成事件绑定 -->
<!-- 以下是错误的,因为alert()并没有被Vue实例管理。 -->
<!-- <button v-on:click="alert('hello')">hello</button> -->
<!-- 以下是错误的,因为sayHello()并没有被Vue实例管理。 -->
<!-- <button v-on:click="sayHello()">hello</button> -->
<!-- 正确的写法 -->
<button v-on:click="sayHello()">hello</button>
<!-- v-on指令的简写形式 -->
<button @click="sayHi()">hi button</button>
<button @click="sayHi($event, 'jack')">hi button2</button>
<!-- 绑定的回调函数,如果不需要传任何参数,小括号() 可以省略 -->
<button @click="sayWhat($event)">what button</button>
</div>
<!-- vue代码 -->
<script>
// 自定义一个函数
// function sayHello(){
// alert('hello')
// }
const vm = new Vue({
el : '#app',
data : {
msg : 'Vue的事件绑定'
},
methods : {
// 回调函数
// sayHello : function(){
// alert('hello')
// }
// : function 可以省略
sayHello(){
alert('hello2')
},
sayHi(event, name){
console.log(name, event)
//alert("hi " + name)
},
// 参数是事件对象
sayWhat(event){
console.log(event)
console.log(event.target)
// 拿到按钮文本
console.log(event.target.innerText)
}
}
})
</script>
</body>
</html>
1.2.9、关于事件回调中的this,计数器例子(this就是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>关于事件回调函数中的this</title>
<!-- 安装Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="app">
<h1>{{msg}}</h1>
<h1>计数器:{{counter}}</h1>
<button @click="counter++">点击我加1-第一种实现</button>
<button @click="add()">点击我加1-第二种实现</button>
<button @click="add2()">点击我加1-(箭头函数)</button>
</div>
<!-- vue代码 -->
<script>
const vm = new Vue({
el: '#app',
data: {
msg: '关于事件回调函数中的this',
counter: 0
},
// 1.methods对象中的方法可以通过vm去访问吗?可以。
// 2.methods对象中的方法有没有做数据代理呢?没有。
methods: {
add() {
//counter++; // 错误的。
// 在这里需要操作counter变量?怎么办?
//console.log(vm === this) :true
this.counter++;
},
add2: () => {
//this.counter++;
//console.log(this === vm)
//箭头函数中没有this,箭头函数中的this是从父级作用域当中继承过来的。
//对于当前程序来说,父级作用域是全局作用域:window
console.log(this)
},
sayHi() {
alert('hi...')
}
}
})
</script>
</body>
</html>
1.2.10、事件修饰符
<!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>
<!-- 安装Vue -->
<script src="../js/vue.js"></script>
<style>
.divList{
width: 300px;
height: 200px;
background-color: aquamarine;
overflow: auto;
}
.item{
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<!--
Vue当中提供的事件修饰符:
.stop : 停止事件冒泡,等同于 event.stopPropagation()。
.prevent : 等同于 event.preventDefault() 阻止事件的默认行为。
.capture :添加事件监听器时使用事件捕获模式
添加事件监听器包括两种不同的方式:
一种是从内到外添加。(事件冒泡模式)
一种是从外到内添加。(事件捕获模式)
.self :这个事件如果是“我自己元素”上发生的事件,这个事件不是别人给我传递过来的事件,则执行对应的程序。
.once : 事件只发生一次
.passive :passive翻译为顺从/不抵抗。无需等待,直接继续(立即)执行事件的默认行为。
.passive 和 .prevent 修饰符是对立的。不可以共存。(如果一起用,就会报错。)
.prevent:阻止事件的默认行为。
.passive:解除阻止。
-->
<!-- 容器 -->
<div id="app">
<h1>{{msg}}</h1>
<!-- 阻止事件的默认行为 -->
<a href="https://www.baidu.com" @click.prevent="yi">百度</a> <br><br>
<!-- 停止事件冒泡 -->
<div @click="san">
<div @click.stop="er">
<button @click="yi">事件冒泡</button>
</div>
</div>
<br><br>
<!-- 添加事件监听器时使用事件捕获模式 -->
<div @click.capture="san">
<!-- 这里没有添加.capture修饰符,以下这个元素,以及这个元素的子元素,都会默认采用冒泡模式。 -->
<div @click="er">
<button @click="yi">添加事件监听器的时候采用事件捕获模式</button>
</div>
</div>
<br>
<br>
<!-- .self修饰符 -->
<div @click="san">
<!-- 此处是button按钮向上冒泡传递古来的事件,所以不执行er -->
<div @click.self="er">
<button @click="yi">self修饰符</button>
</div>
</div>
<br>
<br>
<!-- 在Vue当中,事件修饰符是可以多个联合使用的。
但是需要注意:
@click.self.stop:先.self,再.stop
@click.stop.self:先.stop,再.self
-->
<div @click="san">
<div @click="er">
<button @click.self.stop="yi">self修饰符</button>
</div>
</div>
<br>
<br>
<!-- .once修饰符:事件只发生一次 -->
<button @click.once="yi">事件只发生一次</button>
<!-- .passive修饰符 -->
<div class="divList" @wheel.passive="testPassive">
<div class="item">div1</div>
<div class="item">div2</div>
<div class="item">div3</div>
</div>
</div>
<!-- vue代码 -->
<script>
const vm = new Vue({
el : '#app',
data : {
msg : '事件修饰符'
},
methods : {
yi(event){
//alert('去百度!!!!!!')
// 手动调用事件对象的preventDefault()方法,可以阻止事件的默认行为。
// 在Vue当中,这种事件的默认行为可以不采用手动调用DOM的方式来完成,可以使用事件修饰符:prevent。
//event.preventDefault();
alert(1)
},
er(){
alert(2)
},
san(){
alert(3)
},
testPassive(event){
for(let i = 0; i < 100000; i++){
console.log('test passive')
}
// 阻止事件的默认行为
//event.preventDefault()
}
}
})
</script>
</body>
</html>
1.2.11、按键修饰符
<!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>
<!--
9个比较常用的按键修饰符:
.enter
.tab (必须配合keydown事件使用。)
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
怎么获取某个键的按键修饰符?
第一步:通过event.key获取这个键的真实名字。
第二步:将这个真实名字以kebab-case风格进行命名。
PageDown是真实名字。经过命名之后:page-down
按键修饰符是可以自定义的?
通过Vue的全局配置对象config来进行按键修饰符的自定义。
语法规则:
Vue.config.keyCodes.按键修饰符的名字 = 键值
系统修饰键:4个比较特殊的键
ctrl、alt、shift、meta
对于keydown事件来说:只要按下ctrl键,keydown事件就会触发。
对于keyup事件来说:需要按下ctrl键,并且加上按下组合键,然后松开组合键之后,keyup事件才能触发。
-->
<div id="app">
<h1>{{msg}}</h1>
回车键:<input type="text" @keyup.enter="getInfo"><br>
回车键(键值):<input type="text" @keyup.13="getInfo"><br>
delete键:<input type="text" @keyup.delete="getInfo"><br>
esc键:<input type="text" @keyup.esc="getInfo"><br>
space键:<input type="text" @keyup.space="getInfo"><br>
up键:<input type="text" @keyup.up="getInfo"><br>
down键:<input type="text" @keyup.down="getInfo"><br>
left键:<input type="text" @keyup.left="getInfo"><br>
right键:<input type="text" @keyup.right="getInfo"><br>
<!-- tab键无法触发keyup事件。只能触发keydown事件。 -->
tab键: <input type="text" @keyup.tab="getInfo"><br>
tab键(keydown): <input type="text" @keydown.tab="getInfo"><br>
PageDown键: <input type="text" @keyup.page-down="getInfo"><br>
huiche键: <input type="text" @keyup.huiche="getInfo"><br>
ctrl键(keydown): <input type="text" @keydown.ctrl="getInfo"><br>
ctrl键(keyup): <input type="text" @keyup.ctrl="getInfo"><br>
ctrl键(keyup): <input type="text" @keyup.ctrl.i="getInfo"><br>
</div>
<script>
// 自定义了一个按键修饰符:.huiche 。代表回车键。
Vue.config.keyCodes.huiche = 13
const vm = new Vue({
el : '#app',
data : {
msg : '按键修饰符'
},
methods : {
getInfo(event){
// 当用户键入回车键的时候,获取用户输入的信息。
//if(event.keyCode === 13){
console.log(event.target.value)
//}
console.log(event.key)
}
}
})
</script>
</body>
</html>
1.2.12、计算属性-反转字符串案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性-反转字符串</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
执行步骤:
1、v-model绑定的数据发生变化
2、插值语法中的方法会重新执行,执行methods中的方法
3、方法中的this指向的是Vue实例,获取到最新的数据
4、方法中的代码会重新执行,获取到最新的数据,然后返回
-->
<div id="app">
<h1>{{message}}</h1><br>
输入字符串:<input type="text" v-model="reversedMessageInfo"><br>
<!-- 在插值语法中可以调用方法,小括号不能省略。这个方法需要是Vue实例所管理的。 -->
反转字符串:{{reverseMessage()}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
reversedMessageInfo: ''
// 方法也可以直接放在data中,但是不推荐这样做
// reverseMessage(){
// return this.reversedMessageInfo.split('').reverse().join('');
// }
},
methods: {
// 反转字符串的方法
reverseMessage() {
return this.reversedMessageInfo.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
Vue-高级部分