【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>