1：基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1:导入vue的包 -->
<script src="js/vue.js"></script>
<title>Vue的基本使用</title>
</head>
<body>
<!-- 2:写入模板 -->
<div class="box">{{content}}</div>
<!-- 3：写vue代码 -->
<script>
var vm = new Vue({
el:'.box',
data:{
content:"Vue修改后的数据"
}
});
</script>
</body>
</html>
2：修改属性：v-bind： 或者 直接 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el : ".div1",
data:{
content : "操作数据",
url : "https://www.baidu.com",
linkdata : "百度链接"
}
})
};
</script>
<title>Document</title>
</head>
<body>
<div class="div1">
<a :href="url">{{linkdata}}</a>
<p>{{content}}</p>
</div>
</body>
</html>
3:调用方法：v-on: 或者 @
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/vue.js"></script>
<script>
window.onload= function(){
var vm = new Vue({
el: '.box',
data : {
content : "操作的数据",
linkdata:"百度链接",
url:'http://www.baidu.com',
count : 0
},
methods:{
fnAddClick:function(){
this.count += 1;
}
}
})
}
</script>
<title>Document</title>
</head>
<body>
<div class = "box">
<button @click = "fnAddClick"> 计时器:{{count}}</button>
<a :href="url">{{linkdata}}</a>
<p>{{content}}</p>
</div>
</body>
</html>
4：条件渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el : '.box',
data : {
flag : 2,
is_show:2,
}
})
}
</script>
<title>Document</title>
</head>
<body>
<div class="box">
<li v-if="flag==1">我是1111111</li>
<li v-else-if="flag==2">我是2222222</li>
<li v-else-if="flag==3">我是3333333</li>
<li v-else-if="flag==4">我是4444444</li>
<li v-else>我是5555555</li>
<p v-show="is_show==2">显示展示</p>
<p v-show="is_show==3">隐式展示</p>
</div>
</body>
</html>
5：列表渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<script src="js/vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:".box",
data : {
// 1:普通列表
mylist:[1,2,3,4,5],
//2：对象列表
person:{
name : "小明",
age : 23,
},
//3:对象，列表套字典
persons :[
{
name : "任善文",
age : 23
},
{
name : "小贱贱",
age : 24
}
]
}
})
}
</script>
</head>
<body>
<div class="box">
<!-- 1：普通列表 -->
<ul>
<li v-for="item in mylist">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in mylist">{{item}}--{{index}}</li>
</ul>
<!-- 2:对象列表 -->
<ul>
<li v-for="(item,key) in person">{{key}}---{{item}}</li>
</ul>
<!-- 3:列表套字典的遍历 -->
<ul>
<li v-for="item in persons">{{item.name}}---{{item.age}}</li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号