組件模板代碼寫法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue2.0模板語法</title>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.min.js"></script>
<script type="text/javascript">
$(function(){
Vue.component("my-aaa",{
template:'<h3>我是組件</h3>'
})
var vm = new Vue({
el:"#box",
data:{
msg:"Vue 2.0"
}
})
})
</script>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
{{msg}}
</div>
</body>
</html>
多個元素的書寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.min.js"></script>
<script type="text/javascript">
$(function(){
Vue.component("my-aaa",{
template:'#aaa'
})
var vm = new Vue({
el:"#box",
data:{
msg:"Vue 2.0"
}
})
})
</script>
</head>
<body>
<template id="aaa">
<div>
<h1>這個是一個組件</h1>
<b>加粗部分</b>
</div>
</template>
<div id="box">
<my-aaa></my-aaa>
{{msg}}
</div>
</body>
</html>
問題小結(jié): 組件外面必須有一個根元素包裹(1.0可直接書寫)
組件定義
//js代碼(1.0版本)
<script type="text/javascript">
window.onload=function(){
Vue.component(組件名稱,{
data:{
// 數(shù)據(jù)
},
methods:{
// 方法
},
template:
})
}
</script>
//js代碼(2.0版本)=>Vue.extend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.min.js"></script>
<script type="text/javascript">
var Home={
template:'#aaa'
};
Vue.component("my-aaa",Home);
window.onload=function(){
Vue.component(組件名稱,{
data:{
// 數(shù)據(jù)
},
methods:{
// 方法
},
template:
})
}
</script>
</head>
<body>
<template id="aaa">
<h1>這個是一個組件</h1>
<b>加粗部分</b>
</template>
<div id="box">
<my-aaa></my-aaa>
{{msg}}
</div>
</body>
</html>
小結(jié):組件分局部和全局之分
生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.min.js"></script>
<script type="text/javascript">
$(function(){
new Vue({
el:"#box",
data:{
msg:"Vue2.0"
},
methods:{
update:function(){
this.msg = "我是Vue2.0"
}
},
beforeCreate(){
alert("組件實例剛剛被創(chuàng)建");
},
created(){
alert("組件已經(jīng)創(chuàng)建完成")
} ,
beforeMount(){
alert("模板編譯之前");
},
mounted(){ //=>(類似1.0ready)
alert("模板已經(jīng)編譯完成");
},
beforeUpdate(){
alert("組件更新之前") //查看數(shù)據(jù)的更新狀態(tài)
},
updated(){
alert("組件更新完畢")
},
beforeDestroy(){
alert("組件銷毀前")
},
destroyed(){
alert("組件銷毀后")
}
})
})
</script>
</head>
<body>
<div id="box">
<input type="button" value="更新數(shù)據(jù)" @click="update"/>
{{msg}}
</div>
</body>
</html>
Vue 循環(huán)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue2.0 循環(huán)可以重復(fù)添加數(shù)據(jù)</title>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.min.js"></script>
<script type="text/javascript">
$(function(){
new Vue({
el:"#box",
data:{
list:["width","height","border"]
},
methods:{
add(){
this.list.push("new background");
}
}
})
})
</script>
</head>
<body>
<div id="box">
<input type="button" value="添加" @click="add"/>
<ul>
<li v-for="value in list">
{{value}}
</li>
<br />
<!-- 2.0去掉了隱式變量 -->
<li v-for="(value,index) in list">
{{value}} {{index}}
</li>
<!-- 1.0版本-->
<li v-for="(index,value) in list">
{{value}} {{index}}
</li>
</ul>
</div>
</body>
</html>
過濾器
自定義過濾器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>自定義過濾器</title>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.min.js"></script>
<script type="text/javascript">
$(function(){
Vue.filter("toDou",function(n,a,b){
alert(a+","+b)
return n<10?'0'+n:''+n;
})
new Vue({
el:"#box",
data:{
msg:9
}
})
})
</script>
</head>
<body>
<div id="box">
{{msg | toDou("1","2")}}
</div>
</body>
</html>
