Vue.js入门

Directive 指令

 

v-for:

<li v-for=’food in foodList’>{{fppd}}

 

{{}}

 

new Vue({

  el:

  data:{

  foodList:[…]

}

})

 

 

v-bind:

:src

:class=’klass’

 

new Vue({

   el:

   data:{

     Klass:’btn btn-default’

}

})

 

:class = '{active:isActive}'

 

new Vue({

   el:

   data:{

     isActive:true

}

})

 

 

 

v-on:

v-on:click=’CLICK’

 

new Vue({

   el:

   methods:{

 CLICK(){

     Console.log(‘clicked’)

}

}

}

})

 

示例二:

v-on=’{ mouserenter:onEnter,mouseleave:onLeave }’

 

示例三:

<form v-on:submit=’onSubmit’>

</form>

 

示例四:

<form v-on:submit=’onSubmit($event)’>

</form>

 

示例五://vue把这个也封装了

<form v-on:submit.prevent=’onSubmit($event)’>

</form>

 

示例六:

 <form v-on:keyup=’fun’>

</form>

 

示例七:

<form v-on:keyup.enter=’fun’>

</form>

 

v-model:

v-model.lazy //blur的时候才会触发

v-model.trim

v-model.number //字符串转字母

 

 

computed:{

  sum(){

    return this.math + this.pyshics +this.english

}

}

 

 

组件:

Vue.component(‘alert’,{

Template:

Methods:{

}

})

 

<alert><alert/>

 

new Vue({

  el:’#seg1’

})

 

new Vue({

  el:’#seg2’

})

 

 

 

父子通信:

props:[‘a’,’b’]

 

子父通信:

$emit()

v-on:

 

 

 

任意平行间组件通讯:

事件调度器 var Event = new Vue()

“我说, 花花说” 案例

Event.$emit(‘xxx’,…)

在第二个组件中:

this.$on(‘xxx’,…)

 

Filter:

使用管道符 |

{{length|meter}}

 

Vue.filter('meter',function(val){

  return val + '元'

})

 

自定义指令:

自定义指令前面要加v,格式是v-directive

定义的时候就不用了

 

binding这个属性中有一些值,如binding.value...

 

自定义指令配置传参:

 

比如我想:

我可以:

。。。(这里写的不详细,以后可以再来看)

 

组合Mixins

官网示例:

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1

 

插槽Slots:

 

 

 

Vue-Router:

 

引入vue-router.js

 

Var routes = [

  {

Path:’/’,

Component:{

   Template:`

    <div>

      <h1>首页</h1>

    </div>

`

},

{

Path:’/about’,

Component:{

   Template:`

    <div>

      <h1>关于我们</h1>

    </div>

`

}

 

}

]

 

 

Var router = new VueRouter({

   Routes:routes

})

 

New Vue({

   El:’#app’,

   Router:router

})

 

<Router-link to=’/’></Router-link >

 

 

传参:

:params

{{$route.params.name}}

 

子路由:

Children:{

Path:

Component:

}

 

手动访问和传参:

this.router.push(‘/about’)

this.router.push({name:’user’,params:{name:’..’}})

 

命名视图:

Components:{

 A:{

Template:``

}

B:{

Template:``

}

}

 

<Route-view name=’A’

<Router-view name=’B’

 

导航钩子:

Router.beforeEach(function(to,from,next){})

Router.afterEach(function(to,from,next){})

 

 

路由匹配:

Console.log(‘to.matched:’,to.matched.some(function(item){

 

}))

 

 

元数据:

Path:’/’,

Meta:{

  Login_required.true

}

 

 

//item.meta.Login_required

 

Vue生命周期:

 

Watch:

el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
  // 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},



Mutation
JavaScript 的限制,Vue 不能检测对象属性的添加或删除:

对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或 _.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:

Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

你应该这样做:

vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

 

 


处理边界:

 

// 获取根组件的数据
this.$root.foo




// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar

// 调用根组件的方法
this.$root.baz()

对于 demo 或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来说就不然了。因此在绝大多数情况下,我们强烈推荐使用 Vuex来管理应用的状态。


//引用DOM
<base-input ref="usernameInput"></base-input>

现在在你已经定义了这个 ref 的组件里,你可以使用:

this.$refs.usernameInput


计划

 

 

=========================

Vue.extend:

Vue.extend是构造一个组件的语法构造器,你给这个构造器预设一些参数,而这个构造器给你一个组件,然后这个组件你就可以用到Vue.component这个全局注册方法里,也可以在任意Vue模板里使用这个构造器

 

Vue.mixin

与组件的区别:

 1.组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。
 2.而mixins则是在引入组件之后,则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。

 

 

Vuex:

vuex中的几个概念:

1.state  => $store.state.xxx

2.getter => store.getters.xxx (相当于是计算属性

3.mutation => {mutation就是mutation啦 mutation必须是同步操作

4.action => { 

Action类似于mutattion 不同在于

Action提交的是mutation,而不是直接变更状态  

 

让我们注册一个简单的action:

const store = new Vuex.Store({

  state:{

  count:0

 },

mutations:{

 increment(state){

  state.count++

  }

},

actions:{

 increment(context){

  contxt.commit('incremnt')

 }

}

})

##!!注意 context对象不是store实例本身

Action 可以包含异步操作

action通过store.dispatch方法触发:

store.dispatch('increment')

posted @ 2018-07-17 23:47  hh9515  阅读(420)  评论(0编辑  收藏  举报