模板语法
-
{{msg}}
-
html赋值: v-html=“”
-
绑定属性: v-bind:id=""
-
使用表达式:{{ok?‘yes’:‘no’}}
-
文本赋值:v-text=""
-
指令 :v-if=""
-
过滤器: {{message|captitalize}}和v-bind:id=“rawid |formatid”
Class 和 Style绑定
-
对象语法:v-bind:class="{actice:isActive}"
key-value ->active-isActive
-
数组语法
v-bind:class="{acticeClass:errorClass}"
data:{
errorClass:“text-danger”
}
-
style绑定-对象语法 :
v-bind:style="{color:activeColor}"
条件渲染
-
v-if
-
v-else
-
v-else-if
-
v-show
-
v-cloak
vue事件处理器
- v-on:click=“greet” 或者@:click=“greet”
- 加修饰符 v-on:click.stop
- v-on:keyup.enter还有很多修饰符
Vue组件
-
全局组件和局部组件
-
父子组件通讯-数据传递
-
Slot
父组件调用子组件
import Counter from './Counter'//子组件 export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, components:{ Counter } }
<Counter num="10"></Counter>
父组件给子组件传递数据:(单向传递,父->子)
子组件通过prop传递变量
export default { props:["num"], data () { return { num:0 } }
如果想要子组件往父组件传递数据,
1.父组件中,在子组件的引用中加入子组件的同名方法
<Counter v-bind:num="num" v-on:increae="increament" v-on:decreae="decreament"></Counter> //vue实例中也加入同名方法 methods:{ increament(){ this.num++; }, decreament(){ this.num--; }, }
2.在子组件方法中,调用emit来访问父组件中监听的方法
methods: { increament(){ this.$emit("increae"); }, decreament(){ this.$emit("decreae"); }, },
应用场景:导航栏,父子组件数据双向传递更推荐使用vuex