友情链接
阅读绪言:相信这篇文章可能会对产生一些帮助和引起思想的碰撞,因为大家的学习历程是相似的,遇到的困惑也有一定的共通性,如果文章出现谬误之处,欢迎各位童鞋及时指正。
**Vue.js是什么** 是一套构建用户界面的渐进式框架,与其他框架不同的是,Vue只关注视图层。 Vue.js是一种MVVM框架,html是view层,js是Model层,通过vue.js完成中间的逻辑,实现绑定的效果。 **基本语法** 利用Vue构造函数,构造一个Vue的实例,然后在实现Vue实例的el接口实现和HTML元素的挂载, 构造函数Vue需要传入一个选项对象,包括,el ,data ,methods,生命周期钩子函数
computed实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="xixi">{{getMessage}}</div>
<script>
var vm =new Vue({
el:"#xixi",
data () {
return {
message: 'xixi'
}
},
computed:{
getMessage () {
return this.message
}
}
})
</script>
</body>
</html>
条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="xixi">
<p v-if='ok'>Hello World!</p>
<p v-else>Hello Universal</p>
</div>
<script>
var vm = new Vue({
el:"#xixi",
data () {
return {
ok: true
}
}
})
</script>
</body>
</html>
子传父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{total}}</p>
<my-counter @xixi="fatherClick"></my-counter>
</div>
<script>
Vue.component('my-counter', {
template: '<div @click="templateClick">{{count}}</div>',
data () {
return {
count: 0
}
},
methods :{
templateClick () {
this.count+=1;
this.$emit('xixi')
}
}
})
var vm = new Vue({
el:"#app",
data () {
return{
total:3
}
},
methods: {
fatherClick() {
this.total+=1
}
}
})
</script>
</body>
</html>
父组件可以通过监听子组件的自定义事件,从而改变父组件的数据;
子组件每点击一次,触发templateClick函数,该函数在执行过程中通过$emit(‘xixi’)发出templateClick事件;
button控件同时监听xixi事件,每次发出该事件就改变父组件的total值;
今天最最最重要的slot用法
slot的详细讲解