vue的4个常用选项
filters 过滤器
computed 计算属性
methods 方法
watch 观察
vue的生命周期
1.beforeCreate 即将创建
2.created 创建完毕
3.beforeMount 即将挂载
4.mounted 挂载完毕
5.beforeUpdate 即将更新渲染
6.updated 更新成功
7.beforeDestroy 销毁之前
8.destroyed 销毁成功
vue的10个指令
v-html
v-text:”” {{}}
v-if
v-else
v-show
v-for
v-bind:”” :””
v-model
v-on:”” @click:”“
v-once
*组件
<div id="app">
<my-article></my-article>
</div>
<div id="app"></div>
<script>
Vue.component('my-article',{
template:`<div>
<div>
<h1>这里是文章的标题</h1>
<div>
<span>2017年4月10日</span>
<span>原创</span>
</div>
</div>
<img src="cover.jpg" alt="">
</div>`
});
let vm = new Vue({
el:"#app",
});
</script>
最主要说下组件跟组件之间的通信
props,这其实就是组件之间的一种通信方式:父组件→子组件传递数据。
<div id="app">
<son :info="msg"></son>
</div>
<script>
Vue.component('son',{
props:['info'],
template:'<div>{{info}}</div>'
});
const app = new Vue({
el:"#app",
data:{
msg:"我是父组件的数据"
}
});
</script>
子组件→父组件传递数据。
<div id="app">
<son @connect="say"></son>
</div>
<script>
Vue.component('son',{
template:`<button @click="send">点击</button>`,
methods:{
send(){
this.$emit('connect');
}
}
});
const app = new Vue({
el:"#app",
methods:{
say(){
console.log(`监听成功设置`);
}
}
});
</script>