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, {
|
你应该这样做:
vm.userProfile = Object.assign({}, vm.userProfile, {
|
处理边界:
// 获取根组件的数据
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
与组件的区别:
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')