vue vue对象的一些基础特性
2018-05-15 本文已影响0人
不睡觉呀
1.vue 对象的标签内容扩展和标记信息的添加
（1）.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 标签内容扩展及标注信息的添加</title>
</head>
<body>
<div id="a">
<message title="This is a title" content='This is content'></message>
<message title="This is a title" content='This is content'></message>
<message title="This is a title" content='This is content'></message>
<message title="This is a title" content='This is content'></message>
<message title="This is a title" content='This is content'></message>
<message title="This is a title" content='This is content'></message>
</div>
<script src="vue.min.js"></script>
<script>
Vue.component("message",{
props:["title","content"],
data:function(){
return {author:"where autor are "}
},
template:"<div><h1>{{title}}</h1><p>{{content}}</p><hr>{{author}}</div>"
});
new Vue({
el:"#a"
})
</script>
</body>
</html>
效果：
image.png
2.vue 替换一个标签
(1).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 替换一个标签</title>
</head>
<body>
<div id="a">
<p>123333</p>
</div>
<script id="tpl">
<div>
<p>This is from tpl</p>
</div>
</script>
<script src="vue.min.js"></script>
<script>
new Vue({
el:"#a",
template:"#tpl"
});
</script>
</body>
</html>
效果：
image.png
3.vue vue对象的数据绑定和生命周期
（1）.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue vue对象的数据绑定和生命周期</title>
<style>
.class0{
background: skyblue;
color: black;
}
</style>
</head>
<body>
<div id="a">
{{name}}
<a :href="avatar" :class="'class'+count[0]" target="__blank">哔哩哔哩动画</a>
</div>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:"#a",
data:{
name:"hahahah",
avatar:"https://www.bilibili.com/",
count:[0,2,3,5,8,9,4],
message:"hehe"
},
beforeCreate:function(){
console.log("beforeCreate");
},
created:function(){
console.log("created");
},
beforeMount:function(){
console.log("beforeMount");
},
mounted:function(){
console.log("mounted");
},
beforeUpdate:function(){
console.log("beforeUpdate");
},
updated:function(){
console.log("updated");
}
});
</script>
</body>
</html>
效果：
image.png
4.vue 一个vue对象的计算属性
（1）.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 一个vue对象的计算属性</title>
</head>
<body>
<div id="a">
<p>{{f1}}</p>
<p>{{f2}}</p>
<p>{{f3}}</p>
</div>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:"#a",
data:{
f1:"aaaa",
f2:"bbbbb"
},
computed:{
f3:function(){
return this.f1+" "+this.f2
}
}
});
</script>
</body>
</html>
效果：
image.png
