Vue 3.0 学习笔记(面向数据编程)（二）
2022/1/4 11:08:51
本文主要是介绍Vue 3.0 学习笔记(面向数据编程)（二），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
Vue 3.0 学习笔记(面向数据编程)（二）
内容目录
- Vue 3.0 学习笔记(面向数据编程)（二）
- 第二章 Vue 基础语法
- 理解Vue中的生命周期函数
- 常用模板语法讲解
- 计算属性和侦听器
- 样式绑定语法
- 条件渲染
- 列表循环渲染
- 事件绑定
- 表单中双向绑定指令的使用
第二章 Vue 基础语法
1.理解vue中的生命周期函数
2.常用模板语法讲解
3.数据、方法、计算属性和监听器
4.样式绑定语法
5.列表循环渲染
6.时间绑定
7.表单中双向绑定指令的使用
理解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>lesson 7</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 生命周期函数：在某一时刻会自动执行的函数。也叫做 钩子函数 hook
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
// 在实例生成之前自动执行的函数 1
beforeCreate() {
console.log('beforeCreate')
},
// 在实例生成之后自动执行的函数 2
created() {
console.log('created')
},
// 在模板已经被编程为函数之后立即执行的函数 3
// 也可以理解为 在组件内容被渲染到页面之前自动执行的函数
// 如果没有vue中没有template，会取挂载点的innerHTML作为模板
beforeMount() {
console.log(document.getElementById('root').innerHTML)
console.log('beforeMount')
},
// 在组件内容被渲染到页面之后自动执行的函数 4
mounted() {
console.log(document.getElementById('root').innerHTML)
console.log('mounted')
},
// 当data中的数据发生变化时，会立即自动执行的函数 5
// 可以在控制台执行：vm.$data.message = 'hi';
beforeUpdate(){
console.log(document.getElementById('root').innerHTML, 'beforeUpdate')
},
// 当data中的数据发生变化，同时页面完成更新后，即页面重新渲染后，自动执行的函数 6
updated(){
console.log(document.getElementById('root').innerHTML, 'updated')
},
// 当vue应用失效时，自动执行的函数 7
// 可以在控制台中执行: app.unmount();
beforeUnmount(){
console.log(document.getElementById('root').innerHTML, 'beforeunmont')
},
// 当vue应用失效，且dom完全销毁之后，自动执行的函数 8
// vue应用失效 = vue实例销毁 = 将挂载的vue移除
unmounted(){
console.log(document.getElementById('root').innerHTML, 'unmounted')
},
template: '<div>{{message}}</div>'
});
const vm = app.mount('#root');
</script>
</html>
知识点整理 1.生命周期函数，也叫做钩子(hook)函数，即在某一个时刻会自动执行的函数 生命周期函数目前有四对，也就是8个函数，每对函数发生在一个动作的前后 一、创建实例，create，自动触发: beforeCreate：在实例生成之前会自动执行的函数 created：在实例生成之后会自动执行的函数 二、加载模板，mount，自动触发: beforeMount：在组件内容被渲染到页面之前自动执行的函数 mounted：在组件内容被渲染到页面之后自动执行的函数 三、渲染模板，update，需要满足条件触发: beforeUpdate：在data中的数据发生变化时，会立即自动执行的函数 updated：当data中的数据发生变化，同时页面完成更新后，即页面重新渲染后，自动执行的函数 四、销毁实例=vue应用失效=移除挂载，unmount，需要满足条件触发: beforeUnmount：vue应用失效之前执行的函数 unmounted：vue应用失效之后执行的函数 2.这四对函数，前两对可以自动触发，updata和unmount对应的两对函数需要条件触发 update，可以在控制台中变更data中的数据，来验证函数的效果，如:vm.$data.message = xxx; unmount，可以控制台中手动销毁实例，来验证函数的效果，如:app.unmount();
常用模板语法讲解
<!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>lesson 8</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// {{}} 插值表达式
// 插值表达式里面可以写data中return的数据，methods中的方法，JS的表达式，但是不能写JS的语句
// template里面的内容，也可以直接写在body对应的挂载标签下面，等价的
// vue指令
// v-html，插值表达式里面不能转义html标签，用这个v方法，可以将data中的html内容进行转换
// 防止转义，让html真的就是html。比如用富文本编辑器保存的一段文本，肯定有大量的Html标签，为了显示的时候该加粗的加粗，该换行的换行，就加上v-html
// v-bind,简写为 : 数据与组件做绑定需要用，比如disabled 、title
// v-once，数据只渲染一次，之后即使值被改变，页面也不会重新渲染
// v-if, 决定标签是否进行展示
// v-show, 和v-if效果相同，也是决定标签是否展示
// v-on,简写为 @ 事件绑定，对应的方法要写在methods对象中
// v-model,双向绑定
// template中的变量和数据来源于vue应用中的data，方法来源于methods
// 动态属性，在template中，使用[]来表示一个属性，在data中传入一个具体的属性值，可以动态变化属性
// v-bind和v-on都可以用动态属性
// 动态属性和动态事件也可以称为 动态参数
const app = Vue.createApp({
data() {
return {
message: '<strong>hello world</strong>',
disabled: false,
show: false,
name: 'title1',
// name可以作为属性名，使属性更灵活，即 动态属性
event: 'mouseenter',
// event 这里为动态事件，可以随便变更event里面的值，从而变更事件
// 动态属性和动态事件也可以称为 动态参数
}
},
methods: {
handleClick() {
alert("click")
},
handleClick1(e) {
// 阻止默认行为
e.preventDefault();
},
handleClick2(e) {
// 修饰符写法
alert("click")
}
},
template: `
<div v-html="message" v-bind:title="message"></div>
<input v-bind:disabled="disabled"/>
<div>{{'a' + 'b'}}</div>
<div>{{Math.max(1,2)}}</div>
<div v-once>{{message}}</div>
<div v-if='show'>{{message}}</div>
<button v-on:click='handleClick'>提示</button>
<br/>
<div :[name]="message">{{message}}</div>
<div @[event]='handleClick'>动态事件</div>
<hr/>
<form action="https://www.baidu.com" @click="handleClick1">
<button type='submit'>提交</button>
</form>
<hr />
<form action="https://www.baidu.com" @click.prevent="handleClick2">
<button type='submit'>提交</button>
</form>
`
// < div > {{ if(true) { console.log(1) } }}</div > 不能写JS的语句，可以写JS的表达式
});
const vm = app.mount('#root');
</script>
</html>
知识点整理
1.template里面的内容，也可以直接写在body对应的挂载标签下面，效果是一样的，等价写法
template中的变量和数据来源于vue应用中data中return的数据，方法来源于methods
动态属性，在template中，使用[变量]来表示一个属性，在data中传入对应变量的参数值，可以动态变化属性
v-bind和v-on都可以用动态属性
动态事件，写法与动态属性相同，将想要动态变化的事件用变量表示，然后在data中传入对应变量的值
动态事件和动态属性也可以叫做动态参数
2.{{}} 插值表达式，里面用来存放变量，也可以存放JS表达式，但是不能用JS的语句
3.vue指令
一、v-html，因为插值表达式里面不能转义html标签，会按照字符串的样式输出，用这个v方法，可以将data中的html内容按照html的方式展示，该加粗加粗，该换行换行
二、v-bind，简单写法为 : ，用来将属性与数据进行绑定，比如disabled，title
三、v-on，简单写法为 @ ，用来将事件与标签进行绑定，对应的方法写在methods中
四、v-once，数据只渲染一次，之后即使数据的值被改变，页面也不会重新渲染，避免无效渲染，提高性能
五、v-if，决定标签是否要渲染到页面
六、v-show，和v-if一样，也是决定标签是否要渲染到页面，只不过实现方式不同
七、v-model，组件与数据双向绑定
4.修饰符，可以直接跟在时间或者方法的后面，简化常用代码编写，
prevent 阻止默认事件执行，如在表单中加入此修饰符@click.prevent，点击提交按钮时，就不会跳转到提交的网址
计算属性和侦听器
<!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>lesson 9</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// data & methods & computed & watcher
// computed 和 methods 都能实现的功能，建议使用computed，因为有缓存
// computed 和 watch 都能实现的功能，建议使用computed，因为更加简洁
// 异步操作的话，可以用watch，如果是同步操作的话，还是computed更好，更简洁。
// 异步操作如 等待等待几秒再执行的函数
// 当返回的数据为根数据，也就是数据在最外层时，vm.$data.message = vm.message
// 可以直接使用 vm.message来改变数据的值
// 可以在插值表达式里面直接用methods里面的方法，如 toUpper
const app = Vue.createApp({
// 当返回的数据为根数据，也就是数据在最外层时，vm.$data.message = vm.message
// 可以直接使用 vm.message来改变数据的值
data() {
return {
message: 'hello world',
count: 2,
price: 5,
newTotal: 10
}
},
// watch,监听器，能够监听数据变化，也能在监听数据变化时，执行函数
// 也可以实现methods中的函数
watch: {
// current是当前渲染的值，prev是上一个值
// 这里监听的是price数据，可以在控制台变更price的值来调试页面如：vm.$data.price = 6;
price(current, prev) {
console.log(current, prev)
this.newTotal = current * this.count
}
// 当price的值变化时，延迟三秒在控制台打印字符
// price(){
// setTimeout(() => {
// console.log('price data changed')
// }, 3000)
// }
},
// computed, 计算属性，返回计算后的数据
// 当计算属性依赖的内容发生变更时，才会重新执行计算
// computed里面有缓存属性，相对于methods会更高效，如果依赖的内容没有变更，是不会重新计算的
// 但是像Date这种时间数据是无法监听的，也是一个弊端，因为Date不依赖其他信息，无法监听
// computed 可以实现methods中的一些计算功能
// computed 和 methods 都能实现的功能，建议使用computed，因为有缓存
computed: {
total() {
return this.count * this.price
},
time() {
return Date.now() + this.count;
}
},
// methods内方法中的this都指向vue实例
methods: {
handleClick() {
console.log('click', this.message)
},
// 如果用箭头函数，指向的是外层实例，在这里，因为外层没有其他的this，指向的为window
handleClick1: () => {
console.log('click', this.message, this)
},
formatString(string) {
return string.toUpperCase();
},
// 只要页面重新渲染，就会重新计算。即使是methods方法中无关的数据发生改变，导致页面渲染，也要重新计算
getTotal() {
return this.count * this.price
},
getTime() {
return Date.now();
}
},
template: `
<div @click="handleClick">未使用箭头函数 {{message}}</div>
<hr/>
<div @click="handleClick1">使用箭头函数 {{message}}</div>
<hr/>
<div @click="handleClick">插值表达式使用methods的方法 {{formatString(message)}}</div>
<hr/>
<div>插值表达式使用js表达式 {{ count * price }}</div>
<hr/>
<div>通过计算属性计算 {{total}}</div>
<hr/>
<div>通过methods方法计算 {{getTotal()}}</div>
<hr/>
<div>通过计算属性计算 {{time}}</div>
<hr/>
<div>通过methods方法计算 {{getTime()}}</div>
<hr />
<div>通过watch监听 {{price}},{{newTotal}}</div>
`
});
const vm = app.mount('#root');
</script>
</html>
知识点整理 1.data 定义数据，data中return的数据可以被其他模块调用 当数据为最外层的实例时，可以不用写vm.$data.message，直接使用vm.message也行 2.methods 定义方法 一、方法中的this都指向vue实例 二、如果用箭头函数，指向的是外层实例，示例中因为外层没有其他的this，指向的是window 三、只要页面重新渲染，就会重新计算。即使变更的是与methods方法无关的数据，导致页面重新渲染，也会重新计算，可能会造成无效渲染，相对于computed性能较差 3.computed 计算属性，返回计算后的数据 因为computed有缓存属性，只有依赖的内容发生变更时，才会重新计算。相对于methods更高效 弊端：但是像Date这种动态时间数据时无法监听的，无法动态计算时间相关的数据 computed和methods都能实现的功能，建议使用computed，因为有缓存，更高效 computed和watch都能实现的功能，建议使用computed，写法更加简洁 4.watch，监听器，能够监听数据变化，也能在监听数据变化时，执行函数 watch中的两个参数，current（当前渲染的值），prev（上一个值）
样式绑定语法
<!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>lesson 10</title>
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// vue中的行内样式，可以直接在template中直接写style样式，也可以使用在data中定义的数据来控制样式
// 也可以通过注册子组件，来控制样式
// 区分父子组件：主动调用的是父组件，被动调用的是子组件
// 当有多个颜色渲染同一个标签式，后面的颜色会覆盖之前的颜色
const app = Vue.createApp({
data() {
return {
classString: 'red',
// 通过创建对象来控制样式
classObject: { red: true, green: true },
// 通过Array数组来控制样式，数组里面可以放对象
classArray: ['red', 'green', { balck: true }],
// 行内样式也可以用字符串或者对象来渲染
styleString: 'color:yellow',
styleObject: {
color: "orange",
background: 'yellow'
}
}
},
template: `
<div :class='classString'>
Hello, World!!!
<demo class='green'/>
</div>
<hr />
<div :class='classArray'>通过Array数组来控制样式</div>
<hr />
<div :class='classObject'>通过对象来控制样式</div>
<hr />
<div :style="styleString">通过字符串控制行内样式</div>
<hr />
<div :style="styleObject">通过对象控制行内样式</div>
<hr />
<p>当子组件中有多个节点时，且每个节点都没有指定样式，是无法通过父组件中的样式进行样式渲染的，需要指定每个节点的样式</p>
<div :class='classString'>
Hello, World!!!
<test class='green'/>
</div>
`
});
// vue实例的组件,被调用的是子组件
app.component('demo', {
// $attrs.class 子组件的样式用的是父组件的class的值
template: `
<div :class="$attrs.class">one</div>
<div class='green'>single</div>
`
}),
app.component('test',{
// 当子组件中有多个节点时，且每个节点都没有指定样式，是无法通过父组件进行样式渲染的，需要指定每个节点的样式
template:`
<div>one</div>
<div>two</div>
`
})
const vm = app.mount('#root');
</script>
</html>
知识点整理 1.vue中的标签样式和行内样式，可以直接在template中定义，也可以使用data中定义的数据来控制 2.使用data中的不同数据类型控制样式，可以使用字符串，对象，数组来控制样式 数组中也可以放对象 如果数组或者对象中有多个颜色渲染后，后面的颜色会覆盖之前的颜色 3.区分父子组件：主动调用的是父组件，被动调用的是子组件 4.子组件中的样式控制， 如果子组件中只有一个标签，那么可以直接使用父组件的样式 如果子组件中有多个标签，那么需要指定每一个标签的样式 如果子组件想要使用父组件的样式，可以使用$attr.class这种写法
条件渲染
<!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>lesson 11</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 知识点1：v-if和v-show
// v-if 直接移除dom
// v-show 加了display的style属性
// 知识点2：v-if v-else-if v-else
// 使用的时候，对应的标签要挨在一起，通过data中的true或者false来判断
const app = Vue.createApp({
data() {
return {
show: false,
conditionOne: false,
conditionTwo: true,
show1: true
}
},
template: `
<div v-if="show">Hello, World!!!</div>
<div v-if="conditionOne">if</div>
<div v-else-if="conditionTwo">elseif</div>
<div v-else>else</div>
<div v-show="show">Bye, World!!!</div>
`
});
const vm = app.mount('#root');
</script>
</html>
知识点整理 1.v-if 通过控制元素在dom上的存在与否来控制展示或者有隐藏，也可以理解为v-if是控制否是插入标签的 2.v-show 通过style的display来控制是否展示，只是加了隐藏的style样式，不会频繁销毁dom v-if和v-show都是控制组件在页面上是否渲染，只是实现方式不同，频繁使用时建议使用v-show，性能更好一点 3. v-if、v-else-if、v-else三个指令使用时要挨在一起，中间不能分隔 除了v-else，v-if和v-else-if都是通过值是否为true或者false来判断标签是否显示
列表循环渲染
<!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>lesson 12</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 列表循环渲染,列表的数据可以用数组来存储，也可以用对象来存储
// 遍历数组：v-for="(item, index) of list"
// 遍历对象：v-for="(value, key, index) of obj"
// 使用 v-for的时候，尽量加一个 key，能够复用之前没有变化的值，减少重复渲染，
// key一般不用index做值，尽量使用key来绑定唯一的值，这样在页面再次渲染的时候，根据key查询对应的值是否发生变化，如果没有就可以直接复用，不需要重新创建DOM，提高性能
// 变更列表中的元素信息，有几种方法
// 第一种：使用列表的变更函数
// push 在列表的末尾增加元素，尾部新增
// pop 删除列表的最后一个元素，尾部删除
// shift 删除列表的第一个元素，头部删除
// unshift 在列表的开头新增一个元素，头部新增
// splice 替换列表中的部分内容
// sort 对列表进行排序
// reserve 翻转列表中元素的位置
// 第二种：直接替换数组
// 第三种：直接更新数组内容
// list对象的渲染 v-for的优先级比v-if的优先级高，如果标签属性中已经有了v-for，后面再加v-if是不会生效的
// 可以使用template替换div，template可以理解为是一个占位符，不会在页面上进行渲染
const app = Vue.createApp({
data() {
return {
listArray: ['dell', 'lee', 'teacher'],
listObject: {
firstName: 'dell',
lastName: 'lee',
job: 'teacher'
}
}
},
methods: {
handleAddBtnClick() {
// 数组的变更函数 push, pop, shift, unshift, splice, sort, reverse
// this.listArray.push("hello")
// this.listArray.pop()
// this.listArray.shift()
// this.listArray.unshift('hello')
// this.listArray.reverse()
// 直接替换数组
// this.listArray = ['bye', 'world']
// this.listArray = ['bye'].concat(['world'])
// this.listArray = ['bye', 'world'].filter(item => item === 'bye')
// 直接更新数组的内容
this.listArray[1] = 'Hello'
},
handleAddBtnClick1() {
// 直接添加对象的内容，也可以自动的展示出来
this.listObject.age = 100;
this.listObject.sex = 'male'
}
},
template: `
<div>
<div v-for="(item, index) in listArray" :key='index'>
{{item}} -- {{index}}
</div>
</div>
<br />
<button @click='handleAddBtnClick'>新增</button>
<hr />
<div>
<template v-for="(value, key, index) in listObject" :key='index'>
<div v-if="key !== 'lastName'">
{{value}} -- {{key}} -- {{index}}
</div>
</template>
</div>
<button @click='handleAddBtnClick1'>新增</button>
<hr />
<div v-for="(item, index) in 5" :key='index'>{{item}} -- {{index}}</div>
<hr />
<template v-for="(item, index) in listArray" :key='index'>
<div v-if="item !== 'lee'">
{{item}} -- {{index}}
</div>
</template>
`
});
const vm = app.mount('#root');
</script>
</html>
知识点整理
1.列表循环渲染，列表的数据可以用数组来存储，也可以用对象来存储
遍历数组：v-for="(item, index) of list"
遍历对象：v-for="(value, key, index) of obj"
2.在使用v-for对数组或对象进行遍历时，最好加一个key，能够复用之前没有变化的值，减少重复渲染
key一般不用index做值，尽量使用key来绑定唯一的值，这样在页面再次渲染的时候，
根据key查询对应的值是否发生变化，如果没有就可以直接复用，不用创建新的DOM，从而提高性能
3.变更数组列表中的元素信息，有几种方法：
第一种：使用列表的变更函数，没有改变数组的引用
push：在列表末尾增加元素，尾部新增
pop：删除列表的最后一个元素，尾部删除
shift：删除列表的第一个元素，头部删除
unshift：在列表的开头新增一个元素，头部新增
splice：替换列表中的部分内容
sort：对列表进行排序
reserve：翻转列表中元素的位置
第二种：直接替换数组，改变了数组的引用，以上方代码为例
this.listArray = ['bye', 'world']
this.listArray = ['bye'].concat(['world']) //这里用到了JS的表达式
this.listArray = ['bye', 'world'].filter(item => item === 'bye') //这里加了个过滤条件
第三种：直接更新数组的内容，没有改变数组的引用
this.listArray[1]='Hello'
4.列表对象的渲染，与列表数据的写法类似，需要注意遍历返回的每一项是value。
5.v-for的优先级比v-if的优先级高，如果标签属性中已经有了v-for，后面再加v-if是不会生效的
可以将当前标签替换为<template>标签，然后在标签下再去新增一个子标签，将v-if放在子标签内
v-for和v-if不写在同一个标签里面
6.<template></template> 占位符标签，可以替换<div>标签
<template>标签主要是为了体现语义结构，不会渲染出真实的标签，在开发中更实用一些
具体效果可以打开F12查看页面元素
事件绑定
<!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>lesson 13</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 简单的方法可以直接写在@click后面
// 在template中想使用原生的事件，就要在函数中加上 $对应的原生事件名
// 比如事件绑定，有默认参数event，当方法中传入其他参数后再想获取event时，需要传入$event参数
// 同时使用多个事件时，写在一起用逗号分开，且需要在方法名后面加上括号
// 事件修饰符，
// .stop 阻止事件冒泡
// .self 事件不作用在子标签上，一般嵌套标签时使用
// .prevent 阻止默认行为
// .capture 把事件的运营方式由冒泡改为捕获 也就是从内到外，改成从外到内
// .once 事件绑定只执行一次
// .passive scroll滚动事件使用，提升滚动性能
// 事件修饰符：stop, prevent, capture, self, once, passive
// 按键修饰符：enter, tab, delete, esc, up, down, left, right
// 鼠标修饰符：left, right, middle
// 精确修饰符：exact
// 组织单击事件继续传播
// <a href="#top" @click.stop="doThis" > 单击事件</a >
// 提交事件不再重载页面
// <form @submit.prevent="onSubmit" > 提交事件</form >
// 修饰符可以串联
// <a @click.stop.prevent="doThis" > 单击事件</a >
// 只有修饰符
// <form @submit.prevent> 提交事件</form >
const app = Vue.createApp({
data() {
return {
counter: 0,
}
},
methods: {
// 也可以直接写为 @click="counter += 1"
handleBtnClick(num, event) {
console.log(event)
// console.log(event.target)
this.counter += num
},
handleBtnClick1() {
alert(1);
},
handleBtnClick2() {
alert(2);
},
// 修饰符
handleBtnClick3() {
this.counter += 1;
},
handleDivClick() {
alert('div clicked')
},
// 鼠标修饰符
handleKeyDown() {
console.log('keydown')
},
handleClick() {
console.log('click')
}
},
template: `
<div>
{{counter}}
<button @click='handleBtnClick(2, $event)'>button</button>
<hr />
<p>多个事件</p>
<button @click='handleBtnClick1(), handleBtnClick2()'>button</button>
<hr />
<div @click.self="handleDivClick">
{{counter}}
<button @click.stop="handleBtnClick3">button</button>
</div>
</div>
<hr />
<div>
<input @keydown.enter="handleKeyDown"/>
</div>
<hr />
<div>
<div @click="handleClick">123</div>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
知识点整理 1.在template中想使用原生的事件，就要在函数的参数中加上： $对应的原生事件 如：@click='handleBtnClick(2, $event) 如果同时使用多个事件，写在一起时用逗号分开，且在方法名后面需要加上括号 如：@click='handleBtnClick1(), handleBtnClick2() 有多个事件时，发生的顺序是冒泡的，即由内向外，一层一层执行 2.事件修饰符，可以理解为是对事件的一些影响 stop 阻止事件冒泡 self 事件只作用在标签本身，不作用在子标签上，一般嵌套标签时使用 prevent 阻止默认行为 capture 把事件的运营方式由冒泡改为捕获 也就是由从内到外，改成从外到内 once 事件绑定只执行一次 passive scroll滚动事件使用，提升滚动性能 3.按键修饰符：enter，tab，delete，esc，up，down，left，right 4.鼠标修饰符：left，right，middle 5.精确修饰符：exact 例如：@click.ctrl，只要是按着ctrl键，或者按着ctrl+其他按键，都能触发事件 @click.ctrl.exact，只有只按着ctrl一个键时，才能触发事件
表单中双向绑定指令的使用
<!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>lesson 14</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// input, textarea, checkbox, radio, select
// 修饰符 lazy， number， trim
// 双向绑定v-model：一方改变，另一方同样改变
// input：写了v-model后，可以不用写value
// textarea：使用双向绑定时，可以写成单标签<textarea v-model="..." />
// checkbox:多选，如果想要获取选中的选项，绑定一个空数组，被选中选项的value值会被添加到绑定的数组中
// radio：单选，可以绑定空字符串，因为单选只能选中一个
// 单选和多选都可以绑定一个bool值，尤其单选作为一个开关时，很有用
// 如果只是想存储true/false的时候，可以给checkbox绑定bool值
// 当想要选中状态下，存储或展示的数据不是true，而是hello，未选中的状态下，存储或展示的数据不是false，而是world，
// 可以使用true-value="hello",false-value="world"
// lazy：失去焦点的时候才同步数据，可以提高性能
// number：同步数据的时候，把字符串转换为数值类型
// trim：同步数据的时候，去掉字符串前后的空格
const app = Vue.createApp({
data() {
return {
message: 'hello',
message1: 'hello',
messageList: [],
messageString: '',
selectValue: [],
options: [{
text: 'A', value: { value: 'A' }
}, {
text: 'B', value: 'B'
}, {
text: 'C', value: 'C'
}]
}
},
template: `
<div>
<p>输入框的双向绑定</p>
{{message}}
<input v-model="message" />
<hr />
<p>文本框的双向绑定</p>
<textarea v-model="message"/>
<hr />
<p>checkbox的多选，绑定了一个空数组列表</p>
{{messageList}}
jack <input type="checkbox" v-model="messageList" value="jack-value"/>
dell <input type="checkbox" v-model="messageList" value="dell-value"/>
lee <input type="checkbox" v-model="messageList" value="lee-value"/>
<hr />
<p>redio的单选，绑定了一个空字符串</p>
{{messageString}}
jack <input type="radio" v-model="messageString" value="jack-value"/>
dell <input type="radio" v-model="messageString" value="dell-value"/>
lee <input type="radio" v-model="messageString" value="lee-value"/>
<hr />
<p>可以多选的下拉列表，绑定了一个空数组列表</p>
{{selectValue}}
<select v-model="selectValue" multiple>
<option disabled value=''>请选择内容</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<hr />
<p>可以多选的下拉列表，v-for遍历了一个对象列表</p>
{{selectValue}}
<select v-model="selectValue" multiple>
<option v-for="item in options" :value="item.value">{{item.text}}</option>
</select>
<hr />
<p>控制了不同选中状态的value值</p>
{{message}}
<input type="checkbox" v-model="message" true-value="hello" false-value="world">
<hr />
<p>失去焦点时才同步数据，可以提高性能</p>
{{message}}
<input v-model.lazy="message" type="number"/>
<hr />
<p>将输入的信息转化为数值类型</p>
{{typeof message1}}
<input v-model.number="message1" type="number"/>
<hr />
<p>去除输入字符串的首尾空格</p>
{{message1}}
<input v-model.trim="message1" />
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
知识点整理 1.v-model 双向绑定，一方改变，另一方同样改变 input：写了v-model后，可以不用写value textarea：使用双向绑定时，可以写成单标签<textarea v-model="..." /> checkbox：多选，如果想要获取选中的选项，绑定一个空数组，被选中选项的value值会被添加到绑定的数组中 redio：单选，可以绑定空字符串，因为单选只能选中一个 单选和多选都可以绑定一个bool值 2.当单选或者多选的选项想要选中状态下，存储在data中的数据或者页面展示的数据不是true，而是hello 可以使用true-value="hello"，未选中的状态下可以使用false-value 3.v-model的修饰符 lazy：失去焦点的时候才同步数据，可以提高性能 number：同步数据的时候，把字符串转换为数值类型 trim：同步数据的时候，去掉字符串前后的空格
这篇关于Vue 3.0 学习笔记(面向数据编程)（二）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-16Vue3资料：新手入门必读教程
- 2024-11-16Vue3资料：新手入门全面指南
- 2024-11-16Vue资料：新手入门完全指南
- 2024-11-16Vue项目实战：新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解：React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南：从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习：新手入门教程与实践指南
- 2024-11-16Vue3学习：从入门到初级实战教程
