Vue.js第二节
计算属性、事件绑定、条件判断、遍历循环
计算属性：
<!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="./vue.js"></script>
</head>
<body><div id="app"><h3>用户信息</h3><div >姓名：{{userInfo.name}}</div><div >性别：{{userInfo.sex}}</div><div >性别：{{getSexLable}}</div><!-- 这个表示函数的调用 [Vue warn]: Error in render: "TypeError: getSexLable2 is not a function"报错 其实这个 getSexLable 在Vue内部像是一个方法，但不是一个方法func--><!-- <div >性别：{{getSexLable2(userInfo.sex)}}</div> --><!--重点分析：第一步getSexLable3这个前面部分会先去调用计算属性，这个时候会返回一个我们声明的匿名函数体，那么我就可以直接拿来调用，因为我返回的是function所以我才能够通过（）括号调用函数的形式传参等执行--><div >性别：{{getSexLable3(userInfo.sex)}}</div></div></body><script>// 后端数据库一般存 0 1 代表男 女 Vue有专门的东西可以计算属性将数据做一个转换var s=new Vue({el:"#app",// 数据存放区data(){return{// 现在有两份数据 用户的基本信息userInfo:{name:"隔壁",sex:'0'},// 性别字典值 业务层面上这种值不会变，我如果要的话我找它拿就行了sexDict:[{code:'1',label:'男'},{code:'0',label:'女'}],name:'xxx'}},// 计算属性computed:{// 这是一个函数的形式 es6的增强语法。然后我们可以把这个方法名当做是变量名去使用getSexLable(){// 简单使用 // 在这里我只知道一份信息，在Vue实例中 除了data外 ，访问别的区域的时候，需要带上this// 但是这种Switch方法只能适应很小很小的场景 扩展能力差，并不是那么好用 但也是一种方式switch(this.userInfo.sex){case '1':return '男';break;case '0':return '女';break;}return '未知';},//该方法我希望它能够传值 ,所以该方法不可取getSexLable2(sexCode){console.log('the people`s sex is'+sexCode);},// 因为上面我这个方法行不通那么就 return一个function(){} 然后就好比在调用一个函数// 必须要有返回值getSexLable3(){return function (sexCode) {// 然后我们只根据这个code进行判断 无需再this.通过区域去拿值。我无需再关心我内部实现的逻辑怎么样，我只需要调用传值// 开发层级上经常用switch (sexCode) {case '1':return '男';break;case '0':return '女';break;} }}// 记住不仅该计算属性有这样的方法 而且它还有缓存的效果，每次监听到传入值变化的时候，会去对比前一次return的值，// 如果说相同就不会再去更新页面上的内容，可以达到减少开销的效果// 但是如果return 的是function可能会去重新计算 问题不大 开销一点点罢了}})
</script>
</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><script src="./vue.js"></script>
</head>
<body><div id="app"><!-- 我们vue中要绑定事件的话 就跟前面一节课一样 声明一个指令就行了 记住函数要在js里面声明.记住不传参可以不用写参数 --><button v-on:click="handler">按钮</button><!-- 以后都用下面这种写法 然后click等号右边可以是逻辑代码 --><button @click="num++">{{num}}</button><!-- 可以传参 $event：如果我们要用event建议通过参数的形式传递然后直接打印。是关键字。正常不会失效，也没有什么情景去拿事件对象--><button @click="handler(1,2,3,$event)">按钮</button><!-- -------------------------------------------------- --><!-- 条件判断 补充我们虽然学过属性绑定 但是我们不一定都通过事件的绑定去拿值，只是说有些变量需要通过绑定才拿到值采取，就是说这个值是变化的才去绑定比如father我就是固定好的属性值所以无需再去绑定 什么的，有点多此一举的行为--><!-- 以前我们父子级别中同样的事件行为 当孩子点击的时候 父亲也会触发 --><div class="father" style="border: 1px solid black; " @click="log">父亲<!-- 直接点stop就行了 --><div class="child" style="border: 1px solid black;" @click.stop="log">孩子</div></div></div>
</body>
<script>var s =new Vue({el:"#app",data(){return{num:0}},// 声明一个Methodsmethods:{handler(...rest){console.log(event);console.log(event.target);// vue的事件里面 this 不指向事件源 永远指向Vue实例对象// 如果非要获取事件源DOM可以通过事件的target属性console.log(this.num);console.log('jsikdsds');// 参数 console.log(rest);},log(){console.log('dont touch me again OK??????' );}}})
</script>
</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><script src="./vue.js"></script>
</head>
<body><div id="app"><!-- 我可以通过条件去判断该标签的显示和隐藏 让用户看起来还是一样的效果 --><div class="sex"><!-- 这个意思是如果sex等于1我就返回男 否则就返回女 if-else这个系列是在做节点操作 删除创建 --><!--v-if 右边只要有值就行 会自动转为 bool类型 比较方便 --><span class="man a1" v-if="userInfo.sex==2" @click="handler">男</span><!-- 记住else之一块 不是说不会显示 而是不会被创建 --><span class="woman a2" v-else @click="handler">女</span><!-- 优化先取个类名 --></br><!-- 我们有些标签是经常需要显示和隐藏的 如果频繁的进行节点删除和创建 对浏览器的开销是挺大的 --><!-- 所以有个指令是v-show 是通过css的display：none来控制的--><span class="man a3" v-show="userInfo.sex==1" @click="handler">男</span><!-- 记住else之一块 不是说不会显示 而是不会被创建 --><span class="woman a4" v-show="userInfo.sex==0" @click="handler">女</span><!-- 页面频繁切换显示隐藏 推荐使用v-show 如果是一些权限控制系统推荐使用v-if --><!-- 刚刚在控制台通过document.querySelector()发现 a1能被选到 但是 a2为空；a3,a4都能被选到（这样是很危险的）只要节点存在就可以通过控制台或者外挂一个脚本 。所以权限控制的推荐使用v-if--></div></div></body>
<script>var s=new Vue({el:"#app",data(){return{userInfo:{sex:'1'}}},methods:{handler(){console.log('xxxxxxxxxxxxxxxxxxxxxxxxxx');}}})
</script>
</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><script src="./vue.js"></script>
</head>
<body><!-- Vue是跟着数据走的记住// 我们可以遍历循环出数据来 --><div id="app"><h1>遍历数组（常用）</h1><!-- v-for 的语法比较特殊 item：表示当前的遍历项 具有局部作用域。因为我这里产生了遍历项 text找不到它的遍历项然后就去找data里面--><div class="card" v-for="item in cardList">{{item}}{{text}}</div><!-- 遍历数组对象 Vue能够把对象转成文本显示 我如果要用值直接. 一般都是通过该方式--><div class="pop" v-for="item in peopList">{{item.name}}</div><!-- 默认第二项是获取下标 可以省略掉-->·<div class="pop" v-for="(item,index) in peopList">{{item.name}}{{index}}</div><!-- 遍历字符串 --><div class="str" v-for="charone in text">{{charone}}</div><!-- 遍历数字 --><div class="number" v-for="(n,index) in 5">{{n}}</div><div>------------------------------------</div><!-- 遍历对象 记住 遍历的是每一个键的值 正常开发这个也常用牢记 遍历对象这个是键值对不是下标--><div class="obj" v-for="(ob,index) in bro">{{ob}}{{index}}</div><!-- 当使用`v-for`指令时，需要在该标签上写上`key`属性，并且理想的 key 值是每项唯一，以便vue实例能跟踪每个节点的身份，从而重用和重新排序现有元素。通常会使用属性绑定，对其赋值；不建议使用`index`值 --><!-- 遍历对象 记住 遍历的是每一个键的值 正常开发这个也常用牢记 遍历对象这个是键值对不是下标每一个v-for 写一个key 不能被定死 尽量不要用index 这样会导致代码执行完会有很多key都是相同的所以写v-for记得带上key 有些节点 因为v-for是遍历那些数组 串联出来的节点 下一次数组如果更新，vue会检测到数据变化会重新遍历一次 有些节点数据没变 你给了key Vue抓到之后 可以减少一些没有必要的重复遍历 提高性能 减少一些奇怪的bug 估计不会出现--><div>------------------------------</div><div class="obj" v-for="(ob,index) in bro" :key="ob+index">{{ob}}{{index}}</div></div></body><script>const s=new Vue({el:"#app",data(){return{cardList:[1,2,3,4,44],peopList:[{name:'zs',age:'12'},{name:'ls',age:'12'}],text:'hello world',bro: {name:"xiaomi",price:'1222'}}}})// 数组检测更新 Vue会捕捉到数据的变化 然后重新遍历数组 新增一项 Vue重写了push 自动更新页面上的内容 必须用Vue的setTimeout(() => {// s.peopList.push({name:"kk",age:'13'})// 通过这样的方式改变值 Vue是不会更新的视图上 无法被Vue捕捉并更新到视图上s.cardList[0]=9// 提供了全局的一个方法 第一个填我要更新的数据目标 第二个填下标 第三个填我要更新的值 三秒钟自己变了 ￥set一定能够保证数据的变化和视图的变化s.$set(s.cardList,0,10000)}, 3000);
</script>
</html>