|
vue.js是一个框架，是声明式编程
1.创建
const o = new Vue()
2.框架
在创建vue时括号内可以传入一个对象
对象内有一些固定的框架
1.el：绑定dom对象
2.data：基础数据
3.methods：函数
4.conputed：计算属性
const o = new Vue({
el:'#main',
data:{
games:[
{name:'musedash',price:18},
{name:'musedash',price:20},
{name:'musedash',price:40},
{name:'musedash',price:50},
]
},
computed: {
totalprice:function(){
var s = 0;
this.games.forEach(element => {
s = s + element.price;
});
return s;
}
},
methods: {
}
})
3.插值语法
在标签内写入{{}}可以将双括号内的内容作为变量进行解析
4.指令
v-once 只会解析一次，已经展示不能被修改
v-html 解析传来的html，覆盖之前的所有内容
v-text 将字符串原封不动展示，覆盖之前的所有内容
v-pre 对内容不做解析，原封不动得显示
v-cloak 在页面解析之前不做显示
//需要自己定义，这也说明vue可以自定义指令
vue的变量被解析后会清除标签内的指令
v-bind 可以为标签动态绑定属性值 例如class src href style
有变量，对象，数组三种写法
5.作业
要求在页面上展示一个列表
列表的第一项默认选中，当点击某一项时该项会被选中，其他会被取消选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业</title>
<script src="./环境/vue.min.js"></script>
<style>
*{
padding: 0px;
border: 0px;
margin: 0px;
}
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color:aqua;
}
#main{
width: 308px;
height: 408px;
background-color: aquamarine;
display: flex;
justify-items: center;
}
li{
list-style: none;
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
border: 1px solid aqua;
}
.now{
background-color: chartreuse;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li v-for="(item,index) in games" v-bind:class="{'now':index == active_index}" @click="active_index = index">
{{item}}</li>
</ul>
</div>
<script>
var o = new Vue({
el: '#main',
data:{
games: ['原神','明日方舟','炉石传说','喵斯快跑'],
active_index:0,
},
})
</script>
</body>
</html>
|