计算属性、事件绑定、条件判断、遍历循环
计算属性：
<!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
}
},
// 声明一个Methods
methods:
{
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>