vue--常用指令和事件修饰符

vue

安装

官网:https://cn.vuejs.org/

下载:https://cn.vuejs.org/v2/guide/installation.html

直接通过script在head标签里导入就可以了

<script src="../static/vue.min.js"></script>

或者通过CDN的方式直接引用

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

模版语法

大家都知道django里的模版语法是{{  }},事情总是巧合的,Vue里的模版语法也是{{ }}

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta http-equiv="content-Type" charset="UTF-8">

<title>Title</title>

<!-- 引用vue-->

<script src="../static/vue.min.js"></script>

</head>

<body>

<div id="app">

<!-- 模版语法-->

<h1>{{ msg }}</h1>

</div>

<script>

// 实例化对象

new Vue({

el:"#app", // 固定写法el,查找的元素

data:{ // 固定写法,是个object,里面放的数据

msg:"hello vue" // 数据,前面的为模版里放的变量名,后面为对应的数据

}

})

</script>

</body>

</html>

上面使用的是vue的方法查找id为app的属性,并将里面的文本替换为“hello vue”

指令

指令就是帮我们渲染数据的,语法:v-指令

上面的代码我们可以用指令v-text来实现

v-text

v-text相当于innerText,v-html相当于innerHTML,其实和上面的模版语法效果一样

data中是一个函数,函数中return一个对象,可以是空对象,但不能return

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta http-equiv="content-Type" charset="UTF-8">

<title>Title</title>

<!-- 引用vue-->

<script src="../static/vue.min.js"></script>

</head>

<body>

<div id="app">

<!-- 模版语法-->

<h1 v-text="msg"></h1> <!-- 写在标签里面-->

</div>

<script>

// 实例化对象

new Vue({

el:"#app", // 固定写法el,查找的元素

data(){

return {

msg:"<h2>hello vue</h2>"

}

}

})

</script>

</body>

</html>

上面的将msg的内容原样显示在了页面上,没有当成标签渲染后显示,如果要渲染后显示在页面上,

就要用到v-html了

v-html

v-text相当于innerText,v-html相当于innerHTML

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta http-equiv="content-Type" charset="UTF-8">

<title>Title</title>

<!-- 引用vue-->

<script src="../static/vue.min.js"></script>

</head>

<body>

<div id="app">

<!-- 模版语法-->

<h1 v-html="msg"></h1> <!-- 写在标签里面-->

</div>

<script>

// 实例化对象

new Vue({

el:"#app", // 固定写法el,查找的元素

data(){ <!--data中是一个函数,函数中return一个对象,可以是空对象,但不能return-->

return {

msg:"<h2>hello vue</h2>"

}

}

})

</script>

</body>

</html>

v-for

v-for可以迭代数组和迭代对象

v-for迭代数组

  • 语法:v-for="(alias,index) in array"
  • 说明:alias是数组迭代的别名,index数组索引值,从0开始(可选,如果有就要加小括号)

v-for迭代对象的属性

  • 语法: v-for=“(value,key,index) in object”
  • 说明:value每个对象的属性值,key为属性名(可选),index为索引(可选)

<!DOCTYPE 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>

</head>

<body>

<div id="app">

<h3>1.迭代数组</h3>

<ul>

<!-- e 代表的是emps数组的别名,index 数组下标,从0开始 的

注意:使用 key 特殊属性, 它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素

可以使用of或者in作为分隔符

-->

<li v-for="(e, index) of emps" :key="index">

编号:{{index+1}},姓名: {{e.name}} , 工资 :{{e.salary}}

</li>

</ul>

<h3>2.迭代对象</h3>

<ul>

<!-- value对应是的对象的属性值,key就是对象的属性名,index索引值 -->

<li v-for="(value, key, index) in person">

第{{index+1}}个属性为:{{key}} = {{value}}

</li>

</ul>

</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script>

new Vue({

el: '#app',

data: {

emps: [

{name: '马云', salary: '20000'},

{name: '马化腾', salary: '18000'},

{name: '东哥', salary: '13000'}

],

person: {

name: '小梦',

age: 18

}

}

})

</script>

</body>

</html>

结果:

列表

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta http-equiv="content-Type" charset="UTF-8">

<title>Title</title>

<script src="../static/vue.min.js"></script>

</head>

<body>

<div id="app">

<ul>

<li v-for="student in students">{{student}}</li>

</ul>

</div>

<script>

new Vue({

el:"#app",

data:{

students: ["张三","李四","王五"]

}

})

</script>

</body>

</html>

字典

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta http-equiv="content-Type" charset="UTF-8">

<title>Title</title>

<script src="../static/vue.min.js"></script>

</head>

<body>

<div id="app">

<ul>

<li v-for="student in students">姓名:{{student.name}},年龄:{{student.age}},职业:{{student.job}}</li>

</ul>

</div>

<script>

new Vue({

el:"#app",

data:{

students: [

{

name:"张三",

age: 25,

job:"test"

},

{

name:"李四",

age: 56,

job:"IT"

},

{

name:"王五",

age: 85,

job:"dev"

}

]

}})

</script>

</body>

</html>

v-if

v-if是否渲染当前元素,v-show 与v-if类似,只是元素始终会被渲染并保留在DOM中,只是简单切换元素的CSS属性display来显示或隐藏

案例

<!DOCTYPE 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="./node_modules/vue/dist/vue.js"></script>

<style>

.box{

height: 200px;

width: 200px;

background: red;

}

</style>

</head>

<body>

<div id="app">

<input v-model="seen" type="checkbox" name="" id="">勾选后显示红色小块

<div v-if="seen" class="box"> </div>

<p v-else>红色小块隐藏了</p>

</div>

<script>

new Vue({

el: "#app",

data: {

seen: false,

}

})

</script>

</body>

</html>

v-show

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta http-equiv="content-Type" charset="UTF-8">

<title>Title</title>

<!-- 引用vue-->

<script src="../static/vue.min.js"></script>

<style>

.box {

width: 200px;

height: 200px;

background-color: red;

}

.box2 {

width: 200px;

height: 200px;

background-color: green;

}

</style>

</head>

<body>

<div id="content">

<button v-on:click='handlerClick'>隐藏</button>

<div class="box" v-show='isShow'></div>

</div>

<script>

//数据驱动视图

new Vue({

el: '#content',

data() {

//data中是一个函数 函数中return一个对象,可以是空对象 但不能不return

return {

msg: "<h2>alex</h2>",

num: 1,

isShow: true

}

},

methods: {

handlerClick() {

//数据驱动

console.log(this);

this.isShow = !this.isShow; //取反

}

}

})

</script>

</body>

</html>

当第一次点击隐藏按钮的时候,isShow变为false,隐藏红色的框(加了个样式,display: none;)。当第二次点击的时候,因为isShow为fasle,所以取反之后变为true,显示红色的框

v-show要使用methods里的函数

当isshow为false的时候,页面的html是通过display:none,把内容隐藏了

切换性能:

v-show的切换性能高一些,display: none,  v-if的切换是通过append

加载性能:

v-show的慢,v-if的快

v-on

点击事件,要写在methods里面

事件处理方法

  • 完整格式:v-on:事件名=“函数名” 或 v-on:事件名="函数名(参数...)"
  • 缩写格式:@事件名="函数名" 或 @事件名="函数名(参数)"    注意@后面没有:

  • event:函数中的默认形参,代表原生DOM事件,当调用的函数有多个参数传入时,需要使用原生DOM事件,则通过$event作为实参传入,用于监听DOM事件

<!DOCTYPE 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>

</head>

<body>

<div id="app">

<h3>1. 事件处理方法 v-on 或 @</h3>

<button v-on:click="say">Say {{msg}}</button>

<!-- $event代表的是原生 的Dom事件 -->

<button @click="warn('hello', $event)">Warn</button>

</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script>

new Vue({

el: '#app',

data: {

msg: 'Hello World!!',

num: 0

},

methods: { //定义事件处理函数

say: function (event) {

// event代表的是Dom原生事件, Vue.js它会自动 的将它传入进来,

alert(this.msg)

alert(event.target.innerHTML)

},

warn: function (name, event) {

//如果说函数有多个参数,而双需要使用原生事件,则需要使用 $event 作为 参数传入

alert(name + ',' + event.target.tagName)

}

}

})

</script>

</body>

</html>

事件修饰符

  • .stop阻止单击事件继续传播
  • .prevent阻止事件默认行为
  • .once点击事件只会触发一次

<!DOCTYPE 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>

</head>

<body>

<div id="app">

<h3>2. 事件修饰符</h3>

<!-- 2.1 防止单击事件继续传播 -->

<div @click="todo"> <!-- 点击doThis之后还会触发todo事件 -->

<button @click="doThis">单击事件会继续传播</button>

</div>

<br>

<div @click="todo">

<!-- .stop作用:是阻止事件的传播,点击doThis之后不会触发todo事件 -->

<button @click.stop="doThis">阻止单击事件会继续传播</button>

</div>

<br>

<!-- 2.2 阻止事件的默认行为,不加prevent会跳转到百度 -->

<a href="http://www.baidu.com" @click.prevent="doStop">百度</a>

<!-- 2.3 点击事件只会触发一次 -->

<button @click.once="doOnly">点击事件只会触发一次:{{num}}</button>

</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script>

new Vue({

el: '#app',

data: {

num: 0

},

methods: { //定义事件处理函数

doThis: function () {

alert('doThis....')

},

todo: function () {

alert('todo....')

},

doStop: function () {

alert('doStop...href默认行为已经被阻止')

},

doOnly: function () {

this.num ++

}

},

})

</script>

</body>

</html>

按键修饰符

  • 格式: v-on:keyup.按键名 或 @keyup.按键名
  • 常用按键名

    •   .enter   .tab   .delete    .esc    .space    .up    .down    

<!DOCTYPE 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>

</head>

<body>

<div id="app">

<h3>按键修饰符或按键码</h3>

<!-- 回车键可以用做提交表单数据,比如搜索框 -->

<input type="text" @keyup.enter="keyEnter">

<input type="text" @keyup.space="keySpace">

<input type="text" @keyup.13="keyCode">

</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script>

new Vue({

el: '#app',

methods: { //定义事件处理函数

keyEnter: function () {

alert('当前按的是回车键')

},

keySpace: function() {

alert('当前按的是空格键')

},

keyCode: function () {

alert('按的是13')

}

},

})

</script>

</body>

</html>

例子二

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta http-equiv="content-Type" charset="UTF-8">

<title>Title</title>

<script src="../static/vue.min.js"></script>

<style>

.active{

color: red;

}

</style>

</head>

<body>

<div id="app">

<h1 :class="{active: isActive}">钢铁侠</h1> <!-- 添加class属性为active -->

<button v-on:click="ChangeColor">点我让钢铁侠变红</button>

</div>

<script>

new Vue({

el:"#app",

data:{

isActive: false

},

methods:{

ChangeColor:function () {

this.isActive = !this.isActive; // 取反

},

}

}

)

</script>

</body>

</html>

v-bind

通过class列表和style指定样式是数据绑定的一个常见需求,他们都是元素的属性,都用v-bind处理,其中表达式结果的类型可以是:字符串,对象或数组

语法格式

  • v-bind:class="表达式" 或 :class="表达式"

class的表达式可以为:

  • 字符串  :class="activeClass"
  • 对象  :class="{active:isActive,error:hasError}"
  • 数组 :class="['active','error']"   注意要加上单引号,不然获取的是data中的值

style的表达式一般为对象

  • :style="{color:activeColor,fontSize+'px'}"
  • 注意:对象中的value值activeColor和fontSize是data中的属性

例子一:

<!DOCTYPE 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="./node_modules/vue/dist/vue.js"></script>

<style>

.active{

color:green;

}

.delete{

background: red;

}

.error{

font-size: 35px;

}

</style>

</head>

<body>

<div id="app">

<h3>Class绑定,v-bind:class 或者 :class</h3>

<!-- <p class="active">字符串表达式</p> -->

<p v-bind:class="activeClass">字符串表达式</p>

<!-- key值是样式名,value是data中绑定的属性 -->

<!-- 当isDelete为true的时候,delete就会进行渲染 -->

<p :class={delete:isDelete,error:hasError}> 对象表达式</p>

<p :class="['active','error']">数组表达式</p>

<h3>Style绑定,v-bind:style 或 :style</h3>

<p :style="{color: activeColor, fontSize: fontSize + 'px'}">Style绑定</p>

</div>

<script>

new Vue({

el: "#app",

data: {

activeClass: 'active',

isDelete: false,

hasError: true,

activeColor: 'red',

fontSize: 100

}

})

</script>

</body>

</html>

例子二:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta http-equiv="content-Type" charset="UTF-8">

<title>Title</title>

<!-- 引用vue-->

<script src="../static/vue.min.js"></script>

<style>

.box {

width: 200px;

height: 200px;

background-color: red;

}

.active{

background-color: green;

}

</style>

</head>

<body>

<div id="app">

<button v-on:click = 'handlerChange'>切换颜色</button>

<!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->

<img v-bind:src="imgSrc" v-bind:alt="msg">

<div class="box" v-bind:class = '{active:isActive}'></div>

</div>

<script>

new Vue({

el: '#app',

data() {

return {

imgSrc:'./1.jpg',

msg:'美女',

isActive:true

}

},

methods:{

handlerChange(){

this.isActive = !this.isActive;

},

}

})

</script>

</body>

</html>

<div class="box" v-bind:class = '{active:isActive}'></div>
div原来有一个class属性,值只有一个box,通过v-bind绑定了一个属性active,isActive为true时把active添加到class里,为false时不添加

<button v-on:click = 'handlerChange'>切换颜色</button>

绑定了一个v-on的click事件,当第一次点击按钮时,去methods里找handlerChange,因为刚开始isActive为true(data里),点击后取反为false,
这时data里的也为false,所以没有active属性
v-on和v-bind的简写

v-bind可以简写为 : v-on可以简写为@

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta http-equiv="content-Type" charset="UTF-8">

<title>Title</title>

<!-- 引用vue-->

<script src="../static/vue.min.js"></script>

<style>

.box {

width: 200px;

height: 200px;

background-color: red;

}

.active{

background-color: green;

}

</style>

</head>

<body>

<div id="app">

<button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切换颜色</button>

<!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->

<img :src="imgSrc" :alt="msg">

<div class="box" :class = '{active:isActive}'></div>

</div>

<script>

// v-bind和v-on的简便写法 : @

new Vue({

el: '#app',

data() {

return {

imgSrc:'./1.jpg',

msg:'美女',

isActive:true

}

},

methods:{

handlerChange(){

this.isActive = false;

},

handlerLeave(){

this.isActive = true;

}

}

})

</script>

</body>

</html>

v-model

双向绑定,当用户输入的时候,改变原来的值,只能应用在像input,textare,select之类的标签

 v-model也叫双向数据绑定

例子一:

<!DOCTYPE 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="./node_modules/vue/dist/vue.js"></script>

</head>

<body>

<div id="demo">

<!-- @submit.prevent 阻止事件的默认行为,当前阻止的是action行为 -->

<form action="#" @submit.prevent="submitForm">

姓名(文本):<input type="text" v-model="name">

<br><br>

性别(单选按钮):

<input name="sex" type="radio" value="1" v-model="sex"/>男

<input name="sex" type="radio" value="0" v-model="sex"/>女

<br><br>

技能(多选框):

<input type="checkbox" name="skills" value="java" v-model="skills">Java开发

<input type="checkbox" name="skills" value="vue" v-model="skills">Vue.js开发

<input type="checkbox" name="skills" value="python" v-model="skills">Python开发

<br><br>

城市(下拉框):

<!-- 绑定在select上才会默认选中 -->

<select name="citys" v-model="city">

<option v-for="c in citys" :value="c.code">

{{c.name}}

</option>

</select>

<br><br>

说明(多行文本):<textarea cols="30" rows="5" v-model="desc"></textarea>

<br><br>

<button type="submit" >提交</button>

</form>

</div>

<script>

new Vue({

el: '#demo',

data: {

name: '',

sex: '1', //默认选中的是 男

skills: ['vue', 'python'], //默认选中 Vue.js开发 、Python开发

citys: [

{code: 'bj', name: '北京'},

{code: 'sh', name: '上海'},

{code: 'gz', name: '广州'}

],

city: 'sh', // 默认选中的城市:上海

desc: ''

},

methods: {

submitForm: function () { //处理提交表单

//发送ajax异步处理

alert(this.name + ', ' + this.sex + ', ' + this.skills + ', ' + this.city + ', ' + this.desc)

}

}

})

</script>

</body>

</html>

例子二:

<!DOCTYPE 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="./node_modules/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

<!-- {{}}用于标签体内显示数据 -->

hello,{{ msg }}

<br>

<!-- v-model进行数据的双向绑定 -->

<input type="text" v-model="msg">

</div>

<script >

new Vue({

el: "#app", //指定被Vue管理的入口, 值为选择器, 不可以指定body或者是html

data: { // 用于初始化数据,在Vue实例管理的Dom节点下,可通过模板语法来引用

msg: "vue.js"

}

})

</script>

</body>

</html>

 会把msg的信息显示在输入框和div标签里,更改输入框里的数据,div里的也会跟着改,所以叫双向数据绑定

计算属性 

computed 选项定义计算属性

计算属性 类似于  methods 选项中定义的函数

  • 计算属性 会进行缓存,只在相关响应式依赖发生改变时它们才会重新求值。
  • 函数 每次都会执行函数体进行计算。

输入数学与英语分数,采用  methods 与  computed 分别计算出总得分

<!DOCTYPE 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>

</head>

<body>

<div id="app">

数学:<input type="text" v-model="mathScore">

英语:<input type="text" v-model="englishScore"><br>

<!-- v-model调用函数时,不要少了小括号 -->

总得分(函数-单向绑定):<input type="text" v-model="sumScore()"><br>

<!-- 绑定计算属性后面不加上小括号 -->

总得分(计算属性-单向绑定):<input type="text" v-model="sumScore1"><br>

总得分(计算属性-双向绑定):<input type="text" v-model="sumScore2">

</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script>

/*

1. 函数没有缓存,每次都会被调用

2. 计算属性有缓存 ,只有当计算属性体内的属性值被更改之后才会被调用,不然不会被调用

3. 函数只支持单向

4. 计算属性默认情况下:只有getter函数,而没有setter函数,所以只支持单向

如果你要进行双向,则需要自定义setter函数

*/

var vm = new Vue({

el: '#app',

data: {

mathScore: 80,

englishScore: 90,

},

methods: {

sumScore: function () { //100

console.log('sumScore函数被调用')

// this 指向的就是 vm 实例 , 减0是为了字符串转为数字运算

return (this.mathScore-0) + (this.englishScore-0)

}

},

computed: { //定义计算属性选项

//这个是单向绑定,默认只有getter方法

sumScore1: function () { //计算属性有缓存,如果计算属性体内的属性值没有发生改变,则不会重新计算,只有发生改变 的时候才会重新计算

console.log('sumScore1计算属性被调用')

return (this.mathScore-0) + (this.englishScore-0)

},

sumScore2: { //有了setter和getter之后就可以进行双向绑定

//获取数据

get: function() {

console.log('sumScore2.get被调用')

return (this.mathScore-0) + (this.englishScore-0)

},

//设置数据, 当 sumScore2 计算属性更新之后 ,则会调用set方法

set: function(newValue) { // newVulue 是 sumScore2 更新之后的新值

console.log('sumScore2.set被调用')

var avgScore = newValue / 2

this.mathScore = avgScore

this.englishScore = avgScore

}

}

},

})

</script>

</body>

</html>

computed 选项内的计算属性默认是 getter 函数,所以上面只支持单向绑定,当修改数学和英语的数据才会更新总分,而修改总分不会更新数据和英语

如果是用户输入的,那会直接拼接起来,因为用户输入的数字也会被当成字符串。可以使用number来解决这个问题

<td><input type="text" v-model.number="python" /></td>

<td><input type="text" v-model.number="vue"></td>

<td><input type="text" v-model.number="selenium"></td>

上面当我们输入时,vue会监听我们输入的内容,这样大大降低了性能,我们可以使用lazy,当失去光标的时候再执行

<td><input type="text" v-model.number.lazy="python" /></td>

<td><input type="text" v-model.number.lazy="vue"></td>

<td><input type="text" v-model.number.lazy="selenium"></td>

 实战

图片切换(图片放自己的路径)

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta http-equiv="content-Type" charset="UTF-8">

<title>Title</title>

<!-- 引用vue-->

<script src="../static/vue.min.js"></script>

</head>

<body>

<div id="app">

<img :src="images[currenIndex].imageSrc" alt=""><!-- 按索引取图片-->

<br>

<button @click="preImage">上一张</button> <!-- 绑定点击事件-->

<button @click="nextImage">下一张</button>

</div>

<script>

new Vue({

el:"#app",

data(){

return{

images:[

{id:1,imageSrc:"../image/1.jpg"},

{id:2,imageSrc:"../image/2.jpg"},

{id:3,imageSrc:"../image/3.jpg"},

],

currenIndex:0

}

},

methods:{ <!-- 点击下一张按钮时调用这个方法-->

nextImage(){

this.currenIndex++;

if (this.currenIndex == 3){

this.currenIndex=0;

}

},

preImage(){

if (this.currenIndex == 0) {

this.currenIndex=3;

}

this.currenIndex--;

}

},

created(){ //组件,ajax

setInterval(()=>{

this.currenIndex++;

if (this.currenIndex == 3){

this.currenIndex=0;

}

},2000)

}

})

</script>

</body>

</html>

以上是 vue--常用指令和事件修饰符 的全部内容, 来源链接: utcz.com/z/380311.html

回到顶部