vue基础（二）
1.css样式操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .classA { background-color: hotpink; } .classB { color: lawngreen; } .classC { font-size: 80px; } /* 1、类的操作 2、style的操作 */ </style> </head> <body> <div id="root"> <!-- 操作类 --> <!-- 当我不知道这个标签类到底是谁，那么就得动态获取 --> <p :class="myClass">我爱你赵丽颖</p> <!-- 当我知道哪些类是有的，但是不知道哪个起作用 --> <p :class="{classA:isA,classB:isB}">我爱你赵丽颖111</p> <!-- 当一个标签有很多类都生效，那么就使用数组的写法 --> <p :class="['classA','classB','classC']">我爱你赵丽颖222</p> <!-- 操作style --> <p :style="{color:myColor,fontSize:mySize}">我爱你赵丽颖333</p> <button @click="changeClass">点击修改类</button> </div> <script src="./js/vue.js"></script> <script> new Vue({ el:'#root', data(){ return { myClass:'classA', isA:false, isB:true, myColor:'blue', mySize:'40px' } }, methods: { changeClass(){ this.myClass = 'classB' //操作的是第一个p this.isA = !this.isA this.isB = !this.isB } }, }) </script> </body> </html>
2.v-if 和v-show 条件渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box{ width: 300px; height: 300px; background-color: red; } </style> </head> <body> <div id="root"> <!-- v-if和v-show都会用 v-if是删除了这个节点，也就是dom树上是没有这个节点的，内存中没有 如果我们获取这个节点，获取不到，切换不频繁可以用来节省内存 v-show不是对节点进行删除操作，而是给节点元素添加样式去操作的 display:none 如果使用这个东西，节点是永远存在在dom树上的。内存中也是存在的，我们获取的时候怎么都可以拿到 但是有可能拿到的东西样式是display:none 切换很频繁的时候，我们使用v-show --> <p v-if="isOk">表白成功</p> <p v-else>表白失败</p> <p v-show="isOk">求婚成功</p> <p v-show="!isOk">求婚失败</p> <button @click="update">点击切换</button> <!-- <div id="box"></div> --> </div> <script src="./js/vue.js"></script> <script> const vm = new Vue({ el:'#root', data:{ isOk:true, }, methods: { update(){ this.isOk = !this.isOk } }, }) // let box = document.getElementById('box') // let flag = true // box.onclick = function(){ // if(flag){ // box.style.backgroundColor = 'green' // }else{ // box.style.backgroundColor = 'red' // } // flag = !flag // } </script> </body> </html>
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="root"> <input type="text" placeholder="请输入查找的关键字" v-model="keyword"> <ul> <li v-for="(person, index) in newPersons" :key="person.id"> {{person.id}} --- {{person.name}} --- {{person.age}} </li> </ul> </div> <script src="./js/vue.js"></script> <script> /* 分析： 根据效果分析，数组用的是原来的数据还是新的数组 1、假设用原来的数据，一上来展示没问题 2、当keyword变化的时候监视它，我们可以在原数组当中删除不包含keyword的项 3、当keyword的值又变为空串的时候，我们想回去回不去了 到此为止，卡死了 4、既然原数组没法做效果，就必须使用新的一个数组，而且这个数组一上来和原数组数据一样 5、既然是新数组，那就一定要用计算属性，根据已有的原数组和keyword */ new Vue({ el:'#root', data(){ return { //data当中的数据包含初始化的数据和要收集的数据 keyword:'', persons:[ {id:1,name:'zhaoliying',age:33}, {id:2,name:'yangmi',age:34}, {id:3,name:'ouyangnana',age:20}, {id:4,name:'liuyifei',age:18}, ] //代表的就是ajax回来的数据 } }, computed: { //这里面的数据不是初始化数据也不是要收集的数据，而是后面根据已有数据计算而来的 // newpersons为compuated的属性，返回一个新数组 newPersons(){ // let keyword = this.keyword // let persons = this.persons let {keyword,persons} = this //对象的解构赋值 // 原生js一步一步来 // let result = [] // for(let i = 0; i < persons.length; i++){ // if(persons[i].name.indexOf(keyword) !== -1){ // result.push(persons[i]) // } // } //原始函数 // let result = persons.filter(function(item,index){ // //return后面一定是一个条件表达式 结果一定true或者false // return item.name.indexOf(keyword) != -1 // }) //箭头函数（箭头函数在用的时候，如果内部有this,小心） // 字符串的indexOf方法，返回某个指定的子字符串值在字符串中首次出现的位置，如果没有出现，返回-1 // 过滤掉没匹配的对象 let result = persons.filter(item => item.name.indexOf(keyword) != -1) return result } }, methods: { //无论是自己定义的回调函数 //还是以后我们共用的一些函数 //都在这个里面去写 }, watch:{ //监视已有的数据，已有的数据发生了改变，我们就可以干点什么 } }) </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="root"> <input type="text" placeholder="请输入查找的关键字" v-model="keyword"> <ul> <li v-for="(person, index) in newPersons" :key="person.id"> {{person.id}} --- {{person.name}} --- {{person.age}} </li> </ul> <!-- @click="sortType = 0" 回调函数如果内部只有一行代码，完全可以把这行代码写在这，不用定义 --> <button @click="sortType = 0">原样排序</button> <button @click="sortType = 1">年龄升序</button> <button @click="sortType = 2">年龄降序</button> </div> <script src="./js/vue.js"></script> <script> /* 过滤分析： 根据效果分析，数组用的是原来的数据还是新的数组 1、假设用原来的数据，一上来展示没问题 2、当keyword变化的时候监视它，我们可以在原数组当中删除不包含keyword的项 3、当keyword的值又变为空串的时候，我们想回去回不去了 到此为止，卡死了 4、既然原数组没法做效果，就必须使用新的一个数组，而且这个数组一上来和原数组数据一样 5、既然是新数组，那就一定要用计算属性，根据已有的原数组和keyword */ /* 排序分析： 1、排序首先要有一个参照数据，所以在data当中我们需要自定义一个数据用来表示排序规则和类型 2、点击排序按钮的时候这个数据要发生响应变化，变化的值我们是自己设定好的 3、再来说排序的逻辑，其实就是在计算属性过滤的基础上去加逻辑 */ new Vue({ el:'#root', data(){ return { //data当中的数据包含初始化的数据和要收集的数据 keyword:'', persons:[ {id:1,name:'zhaoliying',age:33}, {id:2,name:'yangmi',age:34}, {id:3,name:'ouyangnana',age:20}, {id:4,name:'liuyifei',age:18}, ], //代表的就是ajax回来的数据 sortType:0 //0代表原样排序 1代表升序 2代表降序 } }, computed: { //这里面的数据不是初始化数据也不是要收集的数据，而是后面根据已有数据计算而来的 newPersons(){ //过滤 let {keyword,persons,sortType} = this //对象的解构赋值 // 过滤出name中包含keyword，返回新数组 let result = persons.filter(item => item.name.indexOf(keyword) != -1) // let arr = [10,7,30] // arr.sort(function(a,b){ // return a - b // }) //排序 if(sortType !== 0){ result.sort((a,b) => { if(sortType === 1){ return a.age-b.age }else{ return b.age-a.age } }) } return result } }, methods: { //无论是自己定义的回调函数 //还是以后我们共用的一些函数 //都在这个里面去写 // changeType(num){ // this.sortType = num // } }, watch:{ //监视已有的数据，已有的数据发生了改变，我们就可以干点什么 } }) </script> </body> </html>
5，列表渲染
<!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="root"> <ul> <li v-for="(person, index) in persons" :key="person.id"> {{person.id}} --- {{person.name}} --- {{person.age}} </li> <!-- 如果我们只是为了展示用的，key使用index没问题 如果我们以后对这个数据还有增删改的操作，那么index效率不高并且更可怕的是会出问题 key以后我们要使用的几乎都是id值，使用这个唯一标识可以提高我们列表渲染以及修改的效率 --> </ul> <button @click="changeFirstObjName">点击修改第一个人的姓名</button> </div> <script src="./js/vue.js"></script> <script> new Vue({ el:'#root', data(){ return { persons:[ {id:1,name:'zhaoliying',age:33}, {id:2,name:'yangmi',age:34}, {id:3,name:'ouyangnana',age:20}, {id:4,name:'liuyifei',age:18}, ] } }, methods: { changeFirstObjName(){ //第一种 // this.persons[0].name = 'yingbao' //第二种 不行,修改数据，页面数据不会跟着改变 // this.persons[0] = {id:1,name:'yingbao',age:33} // console.log(this.persons) //第三种,第一个参数为index, 第二个参数为删除元素的数量，第三个参数为代替的元素 this.persons.splice(0,1,{id:1,name:'yingbao',age:33}) } // data当中的数据，所有的对象属性都是响应式的,修改对象的属性，就会影响到页面更改 // 修改数组的整体第一个值，页面不会发生改变，因为数组下标不是对象的属性，不是响应式数据 //其实vm内部这个数组第一个数据已经改了，只是没有影响到页面 // 数组的部分原生方法，被vue做了改变，名字和原生名字一样，但是已经不是原生方法了 // vue 给这些方法添加了修改页面的功能，使得页面可以修改 }, }) // { // name:'liuyuan', // girlF:{ // name:'zly', // age:33, // movies:[ // {id:1,name:'乘风破浪'} // ] // } // } </script> </body> </html>
6，事件相关
<!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="root"> <!-- 最初始的写法 --> <button v-on:click="test1">test1</button> <!-- 事件添加的简写 --> <button @click="test2">test2</button> <!-- 事件回调不带参数默认传递的是事件对象$event --> <button @click="test3">test3</button> <!-- 事件回调带了自己的参数 --> <button @click="test4('zhaoliying')">test4</button> <!-- 事件回调不但带了自己参数还要用到事件对象的东西 --> <button @click="test5($event,'zhaoliying')">test5</button> <!-- 原生事件对象：当事件触发的时候，浏览器会调用这个回调函数，浏览器会帮我们自动的封装一个对象 作为实参传给回调函数的第一个形参，事件对象内部是和这次触发事件相关的所有信息 --> <!-- 阻止事件冒泡 --> <div style="width:300px;height:300px;background-color:red" @click="outer"> <div style="width:100px;height:100px;background-color:green" @click.stop="inner"></div> </div> <!-- 取消浏览器的默认行为 --> <a href="http://www.atguigu.com" @click.prevent="removeDefault">点我去学习</a> <!-- 按键行为 --> <input type="text" @keyup.enter="testKey"> </div> <script src="./js/vue.js"></script> <script> //清除控制台报错 Vue.config.productionTip = false new Vue({ el:'#root', methods: { test1(){ console.log('test1调用') }, test2(){ console.log('test2调用') }, //事件回调函数如果没有传递其它参数，默认传递过来的就是事件对象 test3(event){ console.log('test3调用',event.target.innerHTML) }, test4(str){ console.log('test4调用',str) }, test5(event,str){ console.log('test5调用',str,event.target.innerHTML) }, outer(){ console.log('outer执行') }, inner(event){ console.log('inner执行') //原生阻止冒泡 // event.stopPropagation(); }, removeDefault(event){ console.log('哈哈') //原生阻止浏览器默认跳转行为 // event.preventDefault(); }, testKey(event){ // if(event.keyCode === 13){ // console.log('回车触发') // } console.log('回车触发') } }, }) </script> </body> </html>
7，自动收集表单数据
<!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="root"> <!-- //收集value值 --> <form action=""> 用户名：<input type="text" placeholder="请输入用户名" v-model="userInfo.username"> 密码：<input type="password" placeholder="请输入用户名" v-model="userInfo.password"> <br> <!-- //单选框， --> 性别： <input type="radio" name="sex" value="male" v-model="userInfo.gender">男 <input type="radio" name="sex" value="female" v-model="userInfo.gender">女 <br> <!-- 多选框 --> 爱好： 🏀<input type="checkbox" value="basketball" v-model="userInfo.fav"> ⚽<input type="checkbox" value="football" v-model="userInfo.fav"> 🏓<input type="checkbox" value="pingpang" v-model="userInfo.fav"> <br> 城市： <select v-model="userInfo.cityId"> <!-- select 收集的数据是选中的选项的value值 --> <option :value="city.id" v-for="(city, index) in cities" :key="city.id">{{city.name}}</option> </select> <br> <br> <br> <br> 自我简介： <textarea v-model="userInfo.des"></textarea> <br> <!-- 阻止默认行为 ，form表单中，默认button是提交跳转，需要阻止默认事件 --> <button @click.prevent="submit">提交</button> </form> </div> <script src="./js/vue.js"></script> <script> new Vue({ el: '#root', data() { return { cities: [ { id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '深圳' }, ], userInfo: { username: '', password: '', gender: '', //必须用数组来初始化，多选框 fav: [], cityId: '', des: '' } } }, }) </script> </body> </html>
8，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> </head> <body> <div id="root"> <!-- <h2>我爱你</h2> --> <p v-text="msg"></p> <!-- 我爱你 会解析标签--> <p v-html="msg" ref="p2"></p> <!-- <h2>我爱你</h2> --> <!-- <p>{{msg}}</p> --> <button @click="test">test</button> </div> <script src="./js/vue.js"></script> <script> new Vue({ el:'#root', data:{ msg:'<h2>我爱你</h2>' }, methods: { test(){ //获取p元素$refs.p2 console.log(this.$refs.p2.innerText) //我爱你 console.log(this.$refs.p3.innerHTML) //<h2>我爱你</h2> console.log(this.$refs.p3.innerText) //我爱你 } }, }) </script> </body> </html>
