Vue 基础学习（三）
作者：Studying_swz
- 2022-11-10 天津
本文字数：4806 字
阅读完需：约 16 分钟
推荐 Vscode 编译器、vue 官网：https://cn.vuejs.org/v2/guide/installation.html
1.v-bind（style 对象属性）
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><body><div id='app'> <!-- <h2 :style="{key（属性值）:value(属性值)}">{{message}}</h2> --> <h2 :style="{fontSize:finalSize,color:finalColor}">{{message}}</h2></div><script src='../js/vue.js'></script><script> const app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ //定义数据 message: '你好啊，李银河！', name: 'codewhy', finalSize: '50px', finalColor: 'red' } })</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>Document</title></head><body><div id='app'> <!-- <h2 :style="{key（属性值）:value(属性值)}">{{message}}</h2> --> <h2 :style="getStyles()">{{message}}</h2></div><script src='../js/vue.js'></script><script> const app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ //定义数据 message: '你好啊，李银河！', name: 'codewhy', finalSize: '50px', finalColor: 'red' }, methods:{ getStyles:function(){ return {fontSize:this.finalSize,color:this.finalColor}; } } })</script></body></html>
复制代码
2.v-bind（style 数组属性）
了解即可
3.计算属性
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><body><div id='app'> <h2>{{firstname}}{{lastname}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{fullName}}</h2></div><script src='../js/vue.js'></script><script> const app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ //定义数据 message: '你好啊，李银河！', firstname: 'a', lastname: 'b', }, methods:{ getFullName(){ return this.firstname + this.lastname; } }, //计算属性 computed: { fullName:function(){ return this.firstname + this.lastname; } } })</script></body></html>
复制代码
4.计算属性的复杂操作
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><body><div id='app'> <h2>总价:{{totalPrice}}</h2></div><script src='../js/vue.js'></script><script> const app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ //定义数据 message: '你好啊，李银河！', books: [ {id:110,name:'Unix',price:119}, {id:111,name:'代码大全',price:201}, {id:112,name:'深入理解计算机原理',price:52} ] }, //有缓存，方法没有 computed: { totalPrice:function(){ let result = 0; for(let i =0;i<this.books.length;i++){ result += this.books[i].price; } return result; } } })</script></body></html>
复制代码
5.计算属性 getter、setter
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><body><div id='app'> {{message}}</div><script src='../js/vue.js'></script><script> const app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ //定义数据 firstname: 'a', lastname: 'b', }, computed: { // fullName:function(){ // return this.firstname + this.lastname; // } //属性fullName，一般只实现get方法，所以一般可以简写为上面的写法 fullName :{ set:function(newValue){ console.log(newValue); const names = newValue.split(" "); this.firstname = names[0]; this.lastname = names[1]; }, get:function(){ return this.firstname + this.lastname; } } } })</script></body></html>
复制代码
6.计算属性 computed 和 methods 的对比
计算属性：一次计算，多次使用，有缓存
methods：多次计算，多次使用，无缓存
7.es6 语法
7.1 let/var
注：let 有闭包，var 没有，推荐使用 let
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script src='../js/vue.js'></script><script> //ES5之前因为 if、for没有块级作用域的概念，所以很多时候需要借鉴function的作用域 //1.变量作用域：变量在什么范围内是可用 { var name = 'why'; console.log(name); } console.log(name);//var没有块级作用域 //2.没有块级作用域引起的问题 if var func; if(true){ var name = 'why'; func = function(){ console.log(name); } //func(); } name = 'modify'; func(); //3.没有块级作用域引起的问题 for //为什么闭包可以解决问题：函数是一个作用域 // var btns = document.getElementsByTagName('button') // for(var i = 0;i<btns.length;i++){ // (function(i){ //0 // btns[i].addEventListener('click',function(){ // console.log('第' + i + '个按钮被点击'); // }) // })(i) // }
// 4.es6 const btns = document.getElementsByTagName('button') for(let i = 0;i<btns.length;i++){ btns[i].addEventListener('click',function(){ console.log('第' + i + '个按钮被点击'); }) }</script></body></html>
复制代码
7.2 const
7.3 对象字面量增强
8.v-on
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><body><div id='app'> <h2>{{counter}}</h2> <!-- <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> --> <button @click="add">+</button> <button v-on:click="sub">-</button></div><script src='../js/vue.js'></script><script> const app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ //定义数据 message: '你好啊，李银河！', counter: 0 }, methods:{ add(){ this.counter++; }, sub(){ this.counter--; } } })</script></body></html>
复制代码
语法糖：@click
9.v-on 参数
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><body><div id='app'> <!-- 不需要参数的时候，不需要括号 --> <button @click="btn1Click">按钮1</button> <button @click="btn1Click">按钮1</button> <!-- 需要参数的时候，默认传入event参数，不需要括号 --> <button @click="btn2Click">按钮2</button> <button @click="btn2Click">按钮2</button> <!-- 需要参数的时候，并且需要event参数，--> <button @click="btn3Click(123,$event)">按钮3</button> <button @click="btn3Click">按钮3</button> <!-- 需要参数的时候，并且需要event参数，--> <button @click="btn3Click(123,$event)">按钮3</button> <button @click="btn3Click">按钮3</button></div><script src='../js/vue.js'></script><script> const app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ //定义数据 message: '你好啊，李银河！', name: 'codewhy' },methods: { btn1Click(){ console.log(123); }, btn2Click(event){ console.log(event); }, btn3Click(first,event){ console.log(first); console.log(event); } } })</script></body></html>
复制代码
10.v-on 修饰符
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><body><div id='app'> <!-- 1.stop修饰符的使用(停止冒泡) --> <div @click="divClick"> <button @click.stop='btnClick'> 按钮 </button> </div> <br> <!-- 2.prevent修饰符的使用(阻止默认行为) --> <form action="baidu"> <input type="submit" value="提交" @click.prevent="submitClick"> </form> <!-- 3.监听某个键盘的键帽 --> <input type="text" @keyup.enter="keyUp"></div><script src='../js/vue.js'></script><script> const app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ //定义数据 message: '你好啊，李银河！', name: 'codewhy' }, methods: { btnClick(){ console.log("btnClick"); }, divClick(){ console.log("divClick"); }, submitClick(){ console.log("submitClick"); }, keyUp(){ console.log("keyup"); } } })</script></body></html>
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 3
版权声明: 本文为 InfoQ 作者【Studying_swz】的原创文章。
原文链接:【http://xie.infoq.cn/article/35c77397cd0c11b3fba85dcc2】。文章转载请联系作者。
Studying_swz
关注
还未添加个人签名 2020-12-23 加入
还未添加个人简介
评论