VUE入门
<!DOCTYPE html>
<html>
<head>
<title>VUE入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="zx125"></div>
<script type="text/javascript">
new Vue({
el:"#zx125",
template:'<p>{{zx}}</p>',
data:{
zx:"HELLO VUE"
}
})
</script>
</body>
</html>
el 挂载点
template 模板
{{zx}} 插值表达式
v-on:click=“zx” 也可以写成 @click=“zx”
<!DOCTYPE html>
<html>
<head>
<title>VUE入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="zx"></div>
<script type="text/javascript">
new Vue({
el:"#zx",
template:'<p @click="click1">{{msg}}</p>',
data:{
msg:"HELLO VUE"
},
methods:{
click1:function() {
this.msg="不要怕&啊杰咯"
}
}
})
</script>
</body>
</html>
v-text="zx"
文本输出
v-html="zx"
会被浏览器解析成界面
v-bind: 属性绑定 可以简写 ：
双向数据绑定 v-model
<!DOCTYPE html>
<html>
<head>
<title>VUE入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="zx">
<input v-model="msg">
<div :title="msg2">{{msg}}</div>
</div>
<script type="text/javascript">
new Vue({
el:"#zx",
data:{
msg:"HELLO VUE",
msg2:"你好呀"
}
})
</script>
</body>
</html>
**computed **
用于数据的拼接
watch 侦听器
可以监听数据的改变等等
<!DOCTYPE html>
<html>
<head>
<title>VUE入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="zx">
<input v-model="msg">
<input v-model="msg2">
<div>{{fullname}}</div>
<div>{{count}}</div>
</div>
<script type="text/javascript">
new Vue({
el:"#zx",
data:{
msg:"",
msg2:"",
count:0
},
computed:{
fullname:function() {
return this.msg+" "+this.msg2
}
},
watch:{
fullname:function(){
this.count++;
}
}
})
</script>
</body>
</html>
v-if v-show
都是控制显示和隐藏
v-if 频率少使用，直接去除dom
v-show 频率高使用，给dom加样式
v-for
加：key加快渲染
<!DOCTYPE html>
<html>
<head>
<title>VUE入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="zx">
<div v-show="show">hahah</div>
<button @click="click1">bu</button>
<ul>
<li v-for="(item,index) of lis" :key="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#zx",
data:{
show:true,
lis:[1,2,3,4]
},
methods:{
click1:function(){
this.show=!this.show;
}
}
})
</script>
</body>
</html>
todolist
<!DOCTYPE html>
<html>
<head>
<title>VUE入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="zx">
<input v-model="input_value">
<button @click="click1">提交</button>
<ul>
<li v-for="(item,index) of lis" :key="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#zx",
data:{
input_value:"",
lis:[]
},
methods:{
click1:function(){
this.lis.push(this.input_value)
this.input_value=""
}
}
})
</script>
</body>
</html>
todolist组件拆分
<!DOCTYPE html>
<html>
<head>
<title>VUE入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="zx">
<input v-model="input_value">
<button @click="click1">提交</button>
<ul>
<zx v-for="(item,index) of lis" :key="index" :content="item"></zx>
</ul>
</div>
<script type="text/javascript">
//全局组件声明
Vue.component('zx',{
//接收参数
props:["content"],
template:'<li>{{content}}</li>'
})
new Vue({
el:"#zx",
data:{
input_value:"",
lis:[]
},
methods:{
click1:function(){
this.lis.push(this.input_value)
this.input_value=""
}
}
})
</script>
</body>
</html>
组件和实例的关系
其实所有的组件就是实例，可以有实例的所有属性和方法
如果实例没有template，默认的就是挂载点里面飞内容为模板
父 子组的通信 (带删除的todolist)
父子组件传值的问题（难点，重点）：
父组件怎么向子组件传递数据呢？通过属性的形式向子组件传递数据
子组件怎么向父组件传递数据呢？通过发布订阅模式$emit(事件，参数)，子组件发布一个事件，父组件之前恰好之间就已经订阅了这个事件，那么子组件就可以通过发布订阅的形式，向父组件发布数据了。
<!DOCTYPE html>
<html>
<head>
<title>VUE入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="zx">
<input v-model="input_value">
<button @click="click1">提交</button>
<ul>
<zx v-for="(item,index) of lis" :key="index" :index="index" :content="item"
//订阅
@delete="handleDelete"></zx>
</ul>
</div>
<script type="text/javascript">
Vue.component('zx',{
//接收参数
props:["content",'index'],
template:'<li @click="delClick">{{content}}</li>',
methods:{
delClick:function(){
//发布
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#zx",
data:{
input_value:"",
lis:[]
},
methods:{
click1:function(){
this.lis.push(this.input_value)
this.input_value=""
},
handleDelete:function(index){
this.lis.splice(index,1)
}
}
})
</script>
</body>
</html>