vue学习日记Day4：
学习了一些新的指令和一些小练习，今天还算顺利，但是距离目标依然很远，继续努力吧。
v-for：
v-for 指令基于一个数组来渲染一个列表，指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。（vue.js官网中的），在下面的代码中 我用的是cloth in clothes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="cloth in clothes">{{cloth}}</li>
</ul>
<hr>
<ul>
<li v-for="cloth in clothes">{{cloth.name}}:${{cloth.price}}</li>
</ul>
<hr>
<!-- 加个序号 -->
<ul>
<li v-for="(cloth,index) in clothes">{{index}}--{{cloth.name}}:${{cloth.price}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
// clothes是个数组
clothes:[
{
name:'衬衫',
price:'180',
},
{
name:'外套',
price:'200',
},
{
name:'裤子',
price:'380',
},
]
}
})
</script>
</body>
</html>
<ul>
<li v-for="cloth in clothes">{{cloth}}</li>
</ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="value in user">{{value}}</li>
</ul>
<hr>
<ul>
<li v-for="(value,key,index) in user">{{index}}--{{key}}:{{value}}</li>
</ul>
<hr>
<p v-for="count in 5">第{{count}}次循环</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
user:{
firstname:'Join',
lastname:'Doe',
age:30
}
}
})
</script>
</body>
</html>
v-once：
v-once绑定的数据不会因为数据双向绑定而改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="app">
<!-- v-once就不会受到双向绑定的影响，不会变 -->
<p v-once>{{msg}}</p>
<p>{{msg}}</p>
<input type="text" name="" id="" value="" v-model="msg" />
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
msg:'hello',
}
})
</script>
</body>
</html>
v-once在必要的时候是可以用到的。
<p v-once>{{msg}}</p>
v-text和v-html：
v-text就是直接输出呢一段字符串。
v-html可以包含html标签，来展示一个页面的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="app">
<p v-text="html">//v-text
{{html}}
</p>
<p v-html="html"></p>//v-html
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
html:"<input type ='date'>"//包含了input标签
}
})
</script>
</body>
</html>
（1）点赞练习：
显示点赞数30，点一下变成31，再点就显示不能点了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="app">
<input type="button" name="" id="" value="" v-model="txt" @click="change()" />{{number}}
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
txt:'点赞',
number:30,
},
methods:{
change(){
if(this.txt==='点赞'){
this.txt='已点赞';
this.number++;
}
else if(this.txt==='已点赞'){
alert('再别点了,够了!!!!');
}
},
},
})
</script>
</body>
</html>
（2）隐藏练习：
有一个盒子，点击显示就能显示出来，点击影藏就影藏起来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
#aa{
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="app">
<input type="button" v-model="txt" @click="change()" />
<div id="aa" v-show="isShow">
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
txt:'显示隐藏',
isShow:true,
},
methods:{
change(){
if(this.txt==='显示隐藏'){
this.isShow = !this.isShow;
this.txt='显示出现';
}
else if(this.txt==='显示出现'){
this.txt='显示隐藏';
this.isShow = !this.isShow;
}
}
}
})
</script>
</body>
</html>
总结：
1.主要学习了新的指令（v-html、v-text、v-once、v-for）。
2.并且完成了一些小练习（比较基础），虽然比较基础但是还是要多写，熟悉语法，在后边的项目中会起到一些帮助。加油，每天努力一点点。
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
