组件模板代码写法
<!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>
问题小结: 组件外面必须有一个根元素包裹(1.0可直接书写)
组件定义
//js代码(1.0版本)
<script type="text/javascript">
window.onload=function(){
Vue.component(组件名称,{
data:{
// 数据
},
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:{
// 数据
},
methods:{
// 方法
},
template:
})
}
</script>
</head>
<body>
<template id="aaa">
<h1>这个是一个组件</h1>
<b>加粗部分</b>
</template>
<div id="box">
<my-aaa></my-aaa>
{{msg}}
</div>
</body>
</html>
小结:组件分局部和全局之分
生命周期
<!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("组件实例刚刚被创建");
},
created(){
alert("组件已经创建完成")
} ,
beforeMount(){
alert("模板编译之前");
},
mounted(){ //=>(类似1.0ready)
alert("模板已经编译完成");
},
beforeUpdate(){
alert("组件更新之前") //查看数据的更新状态
},
updated(){
alert("组件更新完毕")
},
beforeDestroy(){
alert("组件销毁前")
},
destroyed(){
alert("组件销毁后")
}
})
})
</script>
</head>
<body>
<div id="box">
<input type="button" value="更新数据" @click="update"/>
{{msg}}
</div>
</body>
</html>
Vue 循环
<!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(){
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>
网友评论