Vue2+Vue3学习笔记
Vue基础介绍
下载并安装vue.js
v2
https://v2.cn.vuejs.org/
https://v2.cn.vuejs.org/
v3
https://v3.cn.vuejs.org/ 会重定向到Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/
从v2过渡到v3
在F盘创建v2+v3学习笔记
并用VSCODE打开
第一个VUE程序
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个Vue程序</title><!-- 引入Vue.js 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 --><script src="../js/vue.js"></script>
</head><body><div id="app"></div><script>// 创建一个简单的 Vue 实例/*第一步：创建Vue实例1. 为什么要用 new Vue()，直接调用 Vue() 函数不行吗？不行，因为直接调用 Vue() 函数，不创建实例的话，会出现以下错误：Vue is a constructor and should be called with the `new` keyword2. 关于 Vue 构造函数的参数：options？options 翻译为选项。options 翻译为多个选项。Vue框架要求这个 options 参数必须是一个纯粹的 JS 对象：{}在 {} 对象中可以编写大量的 key:value 对。一个 key:value 对就是一个配置项。主要是通过 options 这个参数来给 Vue 实例指定多个配置项。3. 关于 template 配置项：template 翻译为：模板。template 配置项用来指定什么？用来指定模板语句，模板语句是一个字符串形式的。什么是模板语句？ 模板语句里可以有{{}}Vue 框架自己制定了一些具有特殊含义的特殊符号。Vue 的模板语句是 Vue 框架自己搞的一套语法规则。我们写 Vue 模板语句的时候，不能乱写，要遵守 Vue 框架的模板语法规则。模板语句可以是一个纯粹的 HTML 代码，也可以是 Vue 中的特殊规则。也可以是 HTML 代码 + Vue 的特殊规则。*/var app = new Vue({template: '<h1>hhhh</h1>'})// 第二步：$mount方法 将vue实例 挂载 到指定的元素上app.$mount('#app')</script>
</body></html>直接点的写法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个Vue程序</title><!-- 引入Vue.js 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 --><script src="../js/vue.js"></script>
</head><body><div id="app">{{message}}</div><script>var app = new Vue({el:'#app',data:{message:'Hello Vue'} })</script>
</body></html>第二个Vue程序
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head><body><!-- 指定挂载位置 --><div id="app"></div><!-- Vue程序 --><script>/*关于template配置项：1. template后面指定的是模板结构，但是模板结构的行为只有留一个替补位。2. 只要data中的数据发生变化，模板中的{{}}一定会重新赋值。（只要data变，template就会重新解析，重新渲染）3. 使用template配置项目,指定挂载单位的元素会被替换,且template中的内容只能有一个根元素。*/new Vue({// 传统的// template: '<h1>{{msg}}</h1><h1>动力节点老杜</h1>',template: `<div><h1>{{msg}}</h1><h1>{{name}}</h1></div>`,data: {msg: 'Hello Vue!!',name: '动力节点老杜！！'}}).$mount("#app")</script>
</body></html>第三个Vue程序
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../../js/vue.js"></script>
</head>
<body><div id="app"><h1>{{msg}}</h1></div><script>/*不适用template,效果是一样的*/var app=new Vue({el: '#app',data:{msg:'Hello Vue!'},})</script></body>
</html>解决控制台提示问题
就是说你在开发模式下
第一种方式引入生产环境的js即可
第二种方式使用Vue全局配置
偶尔会失效
Vue Devtools插件安装
可视化地查看 Vue 应用内部的结构
然后把版本7的插件关闭或者移除
简单使用Vue devtools
暗的时候,说明前端不是Vue写的 亮的时候就是Vue写的
F12可以看到多了Vue选项卡
一个app下可能有多个组件 Root是根组件 注意有时候数据含有中文时候 第三个数据有可能显示不出来,可能插件对于中文不是很友好
Vue实例和容器的关系:1V1
容器，指的是 HTML 页面中，Vue 要控制的那个元素。
上面的例子中
<div id="app"></div>
这里的 <div id="app"></div> 就是Vue实例的容器。
Vue 程序启动后，会接管这个 div，然后在这个范围内操作页面、渲染数据、绑定事件。
代码示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue实例和容器关系:一夫一妻制</title><script src="../js/vue.js"></script>
</head><body><div id="app"></div><div id="app2"></div><script>var app = new Vue({el: '#app',data: {msg: 'Hello Vue!'},template: `<div><h1>{{msg}}</h1></div>`})var app2 = new Vue({el: '#app2',data: {msg: 'Hello Vue!'},template: `<div><h1>{{msg}}</h1></div>`})</script></body></html>
Vue核心技术
模板语法之插值表达式
<!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><div id="app"><h1>{{ name }}</h1><h2>{{ age }}</h2></div><script>/*在 Vue 中，data里的每一个属性（比如 name 和 age）都会被单独跟踪（响应式）。当你修改 age 时，Vue 只会重新渲染那些用了 {{age}} 的地方的DOM节点。用到 {{name}} 的部分，因为 name 没有变化，Vue 就不会重新渲染这部分 DOM。*/var app = new Vue({el: '#app',data: {name: '张三',age: 18}})</script>
</body></html>模板语法之指令 v-xxx
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02.模板语法之指令V-XXX</title><script src="../js/vue.js"></script>
</head><body><!--指令 功能简述v-text 设置文本内容v-html 设置 HTML 内容v-show 控制元素显示/隐藏（通过 display）v-if / v-else-if / v-else 条件判断渲染v-for 遍历数组或对象v-on 绑定事件监听，比如点击v-bind 动态绑定属性（如 src、href）v-model 双向数据绑定（表单控件）v-slot 插槽（子组件插入内容）v-pre 跳过编译，直接原样输出v-cloak 避免 Vue 未编译时闪烁v-once 只渲染一次，之后数据改变也不更新--><!-- 准备容器 --><div id="app"><!-- v-text：设置文本内容 --><h2 v-text="textMsg"></h2><!-- v-html：设置 HTML 内容 --><div v-html="htmlMsg"></div><!-- v-show：通过 display 显示/隐藏元素 --><p v-show="isShow">v-show 显示的内容</p><!-- v-if / v-else-if / v-else：条件渲染 --><div v-if="score >= 90">优秀</div><div v-else-if="score >= 60">及格</div><div v-else>不及格</div><!-- v-for：遍历列表 --><ul><li v-for="(item, index) in list" :key="index">{{ item }}   {{index}}</li></ul><!-- v-on：绑定事件 --><button v-on:click="clickMe">点击按钮</button><hr>hr是分割线<hr><br>br是换行<br><!-- v-bind：动态绑定属性 --><img v-bind:src="imgUrl" alt="图片示例" width="200"><br><!-- _self 默认值，在当前窗口/标签页打开链接 本页面跳转_blank 在新窗口/新标签页打开链接 新页面打开，不影响当前页面_parent 在父框架（iframe 父窗口）打开链接 少用，主要用于嵌套页面_top 在最顶层框架打开链接（跳出所有 iframe） 少用，跳出多层嵌套其他自定义名字（如 frameName） 打开到指定的 <iframe> 窗口 用于多窗口控制（高 级用法）--><a v-bind:href="url" target="_blank">点击跳转到百度</a><!-- v-model：表单双向绑定 --><input type="text" v-model="inputValue"><p>你输入了：{{ inputValue }}</p><!-- v-slot：插槽 (基础用法) --><child-component><template v-slot:default><p>我是插入到子组件里的内容</p></template></child-component><!-- v-pre：跳过编译 --><h1>下面的{{}}表达式不会被解析</h1><div v-pre>{{ textMsg }}</div><!-- v-cloak：防止闪现未编译的 Mustache 标签 --><div v-cloak>{{ cloakedText }}</div><!-- v-once：只渲染一次 --><h2 v-once>{{ onceText }}</h2></div><script>Vue.component('child-component', {template: '<div><slot></slot></div>'});new Vue({el: '#app',data: {textMsg: 'Hello v-text',htmlMsg: '<strong style="color: red;">Hello v-html</strong>',isShow: true,url: 'https://www.baidu.com',score: 75,list: ['苹果', '香蕉', '橘子'],imgUrl: 'https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_clr_74x24px.svg',inputValue: '',cloakedText: '这段文字被 v-cloak 控制',onceText: '只渲染一次的内容'},methods: {clickMe() {alert('按钮被点击了！');}}});</script></body></html>v-bind说明
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head><body><div id="app"><!-- v-bind 指令后面的参数属性可以随便写(语法是通过的,但是该标签里有没有该属性,是否被浏览器识别就是问题了) 页面上不会展示任何内容虽然可以随便写,但是浏览器识别不了,就没有意义--><span v-bind:xyz="msg"></span><span xyz="msg"></span></div><script>/*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 发生改变之后，表达式的执行结果就会发生变化。所以，连带的就会产生动态效果。*/new Vue({el: '#app',data: {msg: 'Hello Vue!'}})</script>
</body></html>v-model说明
v-bind 和 v-model 的区别和联系
1. v-bind单向绑定,v-model双向绑定
2. v-model只能使用在
<input>
<select>
<textarea>
components
<!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-model只能使用在<input> <select><textarea>components--><!-- 准备一个容器 --><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 指令 --><input type="text" v-model="name3"></div><!-- vue 程序 --><script>new Vue({el: '#app',data: {name1: 'zhangsan',name2: 'wangwu',name3: 'lisi'}})</script></body></html>简述前端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><!-- V --><div id="app">{{message}}</div><!-- 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 代码了。
--><script>//vue实例VMvar app = new Vue({el: '#app',//Mdata: {message: 'Hello Vue!'}})</script>
</body></html>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><script src="../js/vue.js"></script>
</head><body><!-- 1. 通过 Vue 实例都可以访问哪些属性？(通过 app 都可以 app.什么)Vue 实例中的属性很多，有的是以 $ 开头，有的是以 _ 开头。所有以 $ 开头的属性：可以看做是公开的属性，这些属性是供程序员使用的。所有以 _ 开头的属性：可以看做是私有的属性，这些属性是 Vue 框架底层使用的。一般我们程序员很少使用。通过 app 也可以访问 Vue 实例对象的原型对象上的属性，例如：app.$delete ...2. app指的是Vue的引用,可以是任何名字 随便自己定义,不一定要用app, vm xxx都可以--><div id="app"><h1>{{ msg }}</h1></div><script>let dataObj = {msg: 'Hello Vue!'}const app = new Vue({el: '#app',data: dataObj})// 按说 msg 是 dataObj 对象的属性console.log('dataObj 的 msg:', dataObj.msg);// 为什么 msg 属性可以通过 app 来访问呢？// 这是因为 Vue 框架底层使用了 “数据代理机制”// 要想搞明白数据代理机制,必须有一个基础知识点学会:Object.defineProperty()console.log('app 的 msg:', app.msg);</script></body></html>
属性访问
Object.defineProperty()
// 按说 msg 是 dataObj 对象的属性
console.log('dataObj 的 msg:', dataObj.msg);
// 为什么 msg 属性可以通过 app 来访问呢？
// 这是因为 Vue 框架底层使用了 “数据代理机制”
// 要想搞明白数据代理机制,必须有一个基础知识点学会:Object.defineProperty()
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Object.defineProperty()方法</title>
</head><body><!--Object.defineProperty()1. 这个方法是ES5新增的。2. 这个方法的作用是：给对象新增属性，或者设置对象已有的属性。3. 怎么用？里面三个参数：1）给哪个对象新增属性2）新增的这个属性名叫啥3）给新增的属性设置相关的配置项key:value对Object.defineProperty(给哪个对象新增属性，‘新增的这个属性名叫啥’，{给新增的属性设置相关的配置项key:value对})4. 第三个参数是属性相关的配置项。配置项都有哪些？每个配置项的作用是啥？value 配置项：给属性指定值writable 配置项：设置该属性的值是否可以被修改。true表示可以修改，false表示不能修改。默认writable: falsegetter方法和setter方法自己会调用,不需要你手动去调用。当获取属性值时，会自动调用getter方法。当设置属性值时，会自动调用setter方法。注意:当你在方法里写了get或者set方法时,属性和writable都不能写 写了的话控制台有报错getter方法 配置项：setter方法 配置项：--><script>// 这是一个普通的对象let phone = {}//临时变量let temp// 给上面的phone对象新增一个color属性:Object.defineProperty(phone, 'color', {// value: '大空灰',// writable: true,//getter方法配置项get: function () {console.log('获取属性getter方法被调用了');//return this.color;//这样会无线循环 死循环return temp},//setter方法配置项set: function (newColor) {console.log('设置属性setter方法被调了');//this.color = newColor;//这样会无限循环temp = newColor}});</script>
</body></html>数据代理机制
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07.数据代理机制</title>
</head><body><!--1. 什么是数据代理机制？通过访问 代理对象 的属性，来间接访问 目标对象 的属性。数据代理机制的实现需要依靠：Object.defineProperty() 方法。2. ES6新特性:在对象中的函数/方法 :function 是可以省略的--><script>// 目标对象let target = {name: 'zhangsan'}// 代理对象let proxy = {}// 如果要实现数据代理机制的话，就需要给 proxy 新增一个 name 属性。// 注意：代理对象新增的这个属性的名字，和目标对象的属性名字要一致。Object.defineProperty(proxy, 'name', {// get: function () {// return target.name;// },// set: function (value) {// target.name = value;// }get() {return target.name;},set(value) {target.name = value;}});// 示例测试console.log(proxy.name); // 输出 zhangsan（通过代理对象访问目标对象属性）proxy.name = 'lisi'; // 设置代理对象的属性，其实是在设置目标对象console.log(target.name); // 输出 lisi</script>
</body></html>Vue数据代理对属性名的要求
为什么data内数据不能以$或者_开头
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue数据代理对属性名的要求</title><script src="../js/vue.js"></script>
</head><body><div id="app"><p>{{name}}</p><p>{{age}}</p><p>{{sex}}</p><p>{{address}}</p></div><!-- 1. Vue数据代理对属性名有要求：不能以$符开头不能以_开头2. 为什么?Vue内部会通过Object.defineProperty()方法，为data中的属性添加getter和setter方法。如果属性名以$符或者_开头，则Vue内部不会为这个属性添加getter和setter方法。所以，如果要使用Vue数据代理机制，则不能以$符或者_开头。担心与Vue内部属性名冲突。-->--><script>const app = new Vue({el: "#app",data: {name: "小明",age: 18,sex: "男",address: "北京"//不能以$符开头//不能以_开头}})//两种方式访问console.log(app.name);console.log(app.$data.name);</script>
</body></html>data可以是对象也可以是函数
1.data是对象
<div id="app"><p>{{ name }}</p>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>const app = new Vue({el: "#app",data: {name: "小明"}});
</script>
2.data是函数
如果是函数,必须return返回对象{}
<div id="app"><p>{{ name }}</p>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>new Vue({el: "#app",data: function () {return {name: "我是根实例的函数 data"}}});
</script>
3.组件中data必须是函数
如果是函数,必须return返回对象{}
<div id="app"><my-comp></my-comp><my-comp></my-comp>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>Vue.component('my-comp', {template: `<p>{{ name }}</p>`,data: function () {return {name: "组件中的小明"}}});new Vue({el: "#app"});
</script>
Vue的事件绑定
v-on:click="xxx",缩写@click="xxx"
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head><body><div id="app"><p>{{name}}</p><!-- 无参数会自动传入事件对象,有参数需要手动传入事件对象 --><!-- 完整写法 --><button v-on:click="sayHello">完整写法v-on:click=</button><!-- 缩写写法（推荐） --><button @click="sayHello">缩写写法@click= 无参自动传入事件对象(第一个参数就是事件对象)</button><button @click="sayHello(name,$event)">有参数需要添加$event(不能是其他乱写的)传入事件对象</button><button @click="(eve) => sayHello(name, eve)">传参和事件对象可以乱写</button></div><script>new Vue({el: '#app',data: {name: '小明',msg: 'Hello Vue!'},methods: {//回调函数sayHello(val, event) {alert(event);alert(val);alert(JSON.stringify(val))}}});</script>
</body></html>除了v-on:click='xxx' 缩写 @click='xxx'
其他常用绑定事件
示例
<input @focus="handleFocus" placeholder="获取焦点会触发">
<input @blur="handleBlur" placeholder="失去焦点会触发">
<input @input="handleInput" placeholder="实时输入触发">
<input @change="handleChange" placeholder="离开输入框后触发">
<button @dblclick="handleDoubleClick">双击我</button>
<div @mouseover="handleMouseOver">鼠标移入我</div>
关于事件回调函数中的this
this就是app,method属性里的方法也可以用this.方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>10.关于事件回调函数中的this</title><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><script>const app = new Vue({el: "#app",data: {msg: '关于事件回调函数中的this',counter: 0},methods: {//尽量使用普通函数,不要使用箭头函数add() {//this 指向的是当前Vue实例对象 app//this.counter++app.counter++},add2: () => {//注意:箭头函数中没有this,箭头函数中的this是从父级作用域继承过来的//这里的this 是window对象console.log(this)this.counter++}}})</script></body></html>事件修饰符
<!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><!-- 容器 --><div id="app"><h1>{{ msg }}</h1><!-- 跳转到百度之前 执行js代码 链接点击时触发 yi 方法 --><a href="https://www.baidu.com" @click.prevent="yi">百度</a><br><br><!-- .stop 停止事件冒泡 等同于 event.stopPropagation().prevent 阻止默认行为 等同于 event.preventDefault().capture 添加事件监听器时,使用事件捕获模式添加事件监听器包括两种不同方式一种是从内到外.(事件冒泡模式)一种是从外到内(事件捕获模式).self 这个事件如果是我自己元素上发生的事件,不是别人给我传递过来的事件,则执行对应的程序.once 事件只发生一次.passive 顺从,不抵抗,无需等待,直接继续(立即)执行事件默认行为 和.prevent相反 解除阻止,可以继续执行--><div @click="sansan"><div @click="erer"><button @click.stop="yiyi">点击</button></div></div><br><br><!-- 添加事件监听器采用事件捕获模式(从外到内) --><div @click.capture="sansan"><!-- 如果这里没有添加.capture,那么这个元素及资源数默认都会采用冒泡模式 --><div @click.capture="erer"><button @click.capture="yiyi">添加事件监听器采用事件捕获模式(从外到内)</button></div></div><br><br><div @click="sansan"><!-- sansan会执行 --><div @click.self="erer"><!-- 这里加了.self 因此erer不会执行 --><button @click.self="yiyi">.self修饰符</button></div></div><br><br><!-- .once 事件只发生一次 --><button @click.once="yiyi">事件只发生一次,再次点击无效</button></div><script>// Vue 实例 const vm = new Vue({el: '#app',data: {msg: '事件修饰符'},methods: {yi(event) {alert('去百度！！！');// 如果你想阻止跳转百度，加上以下代码：// preventDefault可以阻止事件的默认行为// 在Vue当中,可以手动调用事件preventDefault方法,来阻止默认行为 也可以事件修饰符// @Click.prevent="yi" 就会自动阻止event.preventDefault();},yiyi() {alert('yiyi');},erer() {alert('erer');},sansan() {alert('sansan');}}});</script>
</body></html>按键修饰符
意见使用按键码 而不是13这样
计算属性
反转字符串案例
下面方式性能欠佳
<!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><div id="app"><p>{{msg}}</p><input type="text" v-model="str"></input><button @click="reverseStr">反转字符串</button>{{str.split('').reverse().join('')}}<br><p>{{reverseStr2()}}</p></div><script>const app = new Vue({el: "#app",data: {str: "",msg: "计算属性-反转字符串案例"},methods: {reverseStr() {// 1.获取输入的字符串let str = this.str;// 2.反转字符串 先变成数组，再反转，再变成字符串let newStr = str.split('').reverse().join('');//let newStr = str.split("").reverse().join("");this.str = newStr;},reverseStr2() {// 1.获取输入的字符串let str = this.str;// 2.反转字符串 先变成数组，再反转，再变成字符串let newStr = str.split('').reverse().join('');//let newStr = str.split("").reverse().join("");return newStr;}}})</script>
</body></html>