vue基础复习
1. MVVM
2. 基本模板语法
el:‘’ 唯一根标签，控制页面中的哪个视图区域
data:{} 数据对象
methods:{} 定义方法
filters:{} 过滤器
directives:{} 指令
components:{} 组件
watch:{} 监听
computed:{} 计算
router:’’ 路由挂载
3. 指令
v-text 显示文本
v-html 显示文本，能够识别html标签
v-show 元素显示
v-if 元素隐藏
v-on 事件绑定
v-bind 属性绑定
v-model 双向数据绑定
v-for 遍历(结合key属性使用，标识数据的唯一性)
4. 案例
①隔行变色
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
li{
width: 100px;
height: 100px;
margin: 10px;
}
.pink{
background-color: pink;
}
.yellow{
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in fruit" key="index" :class="{'pink': index%2 === 0, 'yellow': index%2 !== 0}">{{index}} {{item}}</li>
</ul>
</div>
<script>
let a = new Vue ({
el:'#app',
data:{
fruit:["苹果","香蕉","橘子","桃子"]
}
})
</script>
</body>
</html>
②商品栏切换
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<style>
.main_div{
height: 300px;
width: 500px;
border: 1px solid black;
}
.top{
height: 50px;
width: 100%;
border-bottom: 1px solid black;
}
.tx{
height: 30px;
width: 30px;
border-radius: 50%;
margin-top: 10px;
margin-left:10px;
}
.hello{
float: right;
margin-right: 10px;
}
.b_left{
float: left;
width: 150px;
height: 250px;
border-right: 1px solid black;
text-align: center;
line-height: 40px;
}
.b_right{
float: right;
width: 340px;
height: 250px;
/* background-color: black; */
}
.tab{
width: 150px;
height: 40px;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div id="app" class="main_div">
<headerdiv></headerdiv>
<leftdiv></leftdiv>
<rightdiv></rightdiv>
</div>
<template id="headerdiv">
<div class="top">
<img src="./img/shsf爅.jpg" class="tx"/>
<p class="hello">欢迎您，amy</p>
</div>
</template>
<template id="leftdiv">
<div class="b_left">
<div class="tab"><router-link to="/user">商品信息</router-link></div>
<div class="tab"><router-link to="/goods">用户信息</router-link></div>
</div>
</template>
<template id="rightdiv">
<div class="b_right">
<router-view></router-view>
</div>
</template>
<template id="user">
<h1>这是用户信息的内容</h1>
</template>
<template id="goods">
<h1>这是商品信息的内容</h1>
</template>
<script>
let user={
template:"#user"
}
let goods={
template:"#goods"
}
let routerObj = new VueRouter({
routes:[
{path:"/user",component:user},
{path:"/goods",component:goods},
]
})
let a = new Vue({
el:'#app',
data:{
},
components:{
"headerdiv":{
template: "#headerdiv"
},
"leftdiv":{
template:"#leftdiv"
},
"rightdiv":{
template:"#rightdiv"
}
},
router:routerObj
})
</script>
</body>
</html>
本篇博客为本人学习Vue时的详细笔记，如有错误之处，还望各位指正。
文章为原创，如要转载请注明出处
