定义一个Vue对象
new Vue({
el:"#id",
data:{
foo:xxx,
bar:xxx
},
methods:{
method1:function(){
},
method2:function(){
}
},
watch:{
"foo":function(value,oldValue){
}
},
components:[aaaa,bbbb]
})
其中el代表这个Vue对象会作用在哪个元素上,el后面是一个表达式。
data代表model,里面的对象和值可以在画面上渲染
methods里面的函数相当于事件,可以与页面元素绑定
watch是对model的监听,当值发生变化时做一些动作
components 导入其他组件
Vue的指令
- v-text
- v-html
绑定元素的内容 - v-bind:属性名 可简写为 :属性名
绑定属性 - v-model 用于表单元素双向绑定
- v-on:事件名 可简写为@事件名 如@click
绑定事件,还可在事件名后面加上修饰符 如 @keyup.enter 指按enter时触发的事件
还可以加.stop .prevent 表示阻止默认事件响应和冒泡,还有一些其他修饰符 - v-if v-show
条件显示,两者区别是 if将不输出dom元素,show无论何时都输出,只是用css隐藏 - v-for
循环
跟Angular差不多
Vue的组件
props属性,定义可以向组件内传的值
$emit函数,用于向组件外部发射事件
slot 允许父组件向子组件内部固定位置插入元素
另外还有broadcast和dispatch,需要通过events来捕捉
网友评论