美文网首页
Vue.js 笔记

Vue.js 笔记

作者: 枝头残月野狼嚎嗷嗷呜 | 来源:发表于2017-03-23 08:47 被阅读0次

    定义一个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来捕捉

    相关文章

      网友评论

          本文标题:Vue.js 笔记

          本文链接:https://www.haomeiwen.com/subject/qvrgnttx.html