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>