vue学习日记day2
还是对第一天的补充：
新的一些选项
例如：template模板，计算属性，监听观察，v-if和v-show的初步认识
学习内容（新选项）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
h2{
}
h3{
background-color: #000;
color: white;
}
</style>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h3>{{msg}}</h3>
<h4>
{{say()}}
</h4>
<!-- count要当做属性调用，不能当做方法来调用 -->
<h3>{{count}}</h3>
<input type="text" name="" id="" value="" v-model="name"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:'hello',
msg:'我是另外一个',
name:'pjx'
},
//template:"<p>我是通过模板显示的:{{msg}}</p>",
methods:{
say:function(){ //简写为say()
return this.name+"说："+this.message
}
},
//计算属性
computed:{
count(){
return 1+1;
}
},
//监听、观察 watch
watch:{
name(newdata,old){
console.log(newdata,old)
}
},
})
console.log(vm.$data.message)
</script>
</body>
</html>
这个代码就是新的一些选项，在视图部分不要写太多东西，都写在下面的模型部分，就比如计算属性
<h3>{{1234+1234}}</h3>
完全可以写成这样↓视图部分就不会显得太臃肿。
<div id="app">
<!-- count要当做属性调用，不能当做方法来调用 -->
<h3>{{count}}</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
computed:{
count(){
return 1234+1234;
}
},
})
</script>
还有一个是监听选项。是对新数据和旧数据的观察。
//监听、观察 watch
watch:{
name(newdata,old){
console.log(newdata,old)
}
},
学习内容（v-show，v-if）：
v-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- view -->
<div id="app">
<h1>用户名: {{username}}</h1>
<h3 v-if="isvip">用户类型: vip</h3>
<!-- v-if和v-else中间不能有其他的元素 -->
<h3 v-else>用户类型: 普通用户</h3>
<hr>
<h1 >用户允许登陆时间:</h1>
<h3 v-if="age>18">允许24小时登录</h3>
<h3 v-else-if="age>14">允许8小时登录</h3>
<h3 v-else>允许4小时登录</h3>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
username:"pjx",
isvip:true,
age:24,
}
})
</script>
</body>
</html>
v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#pane{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-show="isShow" id="pane">
hello vue
</div>
<!-- 点击事件 -->
<button @click="bb">切换显示内容</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
isShow:true,
},
methods:{
bb(){
app.isShow = !app.isShow;
}
}
})
//
// v-if不显示时，第一次就直接不渲染，如果内容已经显示，则将其改为不显示，将内容直接从dom去除。
// 只是渲染一次用v-if
// v-show不显示时，就会改为display:none，但是会渲染在dom上。反复需要切换的内容时，使用v-show。
</script>
</body>
</html>
在切换频率比较频繁的情况下用v-show更好一点。
①v-if不显示时，第一次就直接不渲染，如果内容已经显示，则将其改为不显示，将内容直接从dom去除， 只是渲染一次用v-if
②v-show不显示时，就会改为display:none，但是会渲染在dom上。反复需要切换的内容时，使用v-show。
总结：
今天效率不是很高，在听课过程中发现之前听过的课程比较更适合我，然后导致来回切换课程混着听，进度慢，不是很扎实，明天还需要重新学习v-show，v-if（新课），新课更加细节一点。加油（别嘲笑哈，小白一枚，正在努力）！