【34】复习下Vue.js（一）

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>