vue系统性学习

不再以dom操作元素
1.v-cloak解决闪烁问题

<style>
[v-cloak]{
	display:none
}
</style>
<p v-cloak>{{msg}}</p>

2.v-text和v-html

<p v-text="msg"></p>
<p v-html="msg"></p>

3.v-bind和v-on
v-bind:title等于:title
v-on:click等于@click
定时运行

setInterval(()=>{},500)

事件修饰符
@事件名.事件修饰符=""
只触发本身事件，不触发外围div事件

@click.stop="event"

不触发href

@click.prevent="event"

捕获事件，先执行这个事件，才会执行触发本身事件

@click.capture="event"

事件发生在自身才做响应，冒泡上来的不做响应

@click.self="event"

事件只响应一次，一次后失效

@click.once="event"

4.v-model双向绑定
5.v-bind绑定样式

:class="['class1','class2',flag?'active':'']"
:class="['class1','class2',{'active':flag}]"
:style=""

6.v-for和:key
:key保证属性值的唯一

过滤条件展示

<tr v-for="item in search(keyword)" :key="item.id"></tr>

search(keyword):function(){
return this.list.filter((element)=>{
    if(element.name.indexOf(keywords)!=-1){
          return true;
    }else{
          return false;
    }
})
}

7.v-if和v-show
v-if每次删除再创建
v-show是控制display属性

删除记录some,
some和foreach区别：some循环内部可以return结束循环
this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1)
return true;
}
})
8.vue过滤器
{{xxx|过滤器}}或者

私有过滤器

data:{
},
method:{
},
filter:{
   dataFormat:function(data,pattern=""){
   ...
   return "xxxx"
   }
}

全局过滤器

Vue.filter('dataFormat',function(data,pattern=""){
var dt = new Date(data);
...
if(pattern.toLowerCase()=="yyyy-mm-dd"){
return '${y}-${m}-${d}'
}else{
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})

9.键盘修饰符
.enter .esc .tab .space .delete .up .down .left .right
v-on:keyup.enter=""
自定义键盘修饰符别名
Vue.config.keycodes.f2=113
10.vue自定义指令
全局自定义指令
Vue.directive(‘指令名称’,{})
使用时v-focus

Vue.directive('focus',{
bind:function(el){...},
inserted:function(el){el.focus()},
update:function(el){...},
componentUpdated:function(el){...},
unbind:function(el){...}
})

私有指令

{method:{
},
directive:{
'fontsize':{
bind:function(el,binding){
el.style.fontSize=parseInt(binding.value)+‘px’
}
}
}}

11.vue-resource发送网络请求

import Vue from 'vue'
import VueResource from 'vue-resource'
#全局使用
Vue.use(VueResource)

使用
this.$http.get("url").then(funciton(data){

})
//默认表单根式提交
this.$http.post("url",{key:value},emulateJson:true).then(funciton(data){

})

12.vue动画
（1）过渡类动画

<transition>
content
</transition>

<style>
.v-enter{
  opacity:0;
}
.v-enter-active{
transition:all 1s ease
}
.v-enter-to{
opacity:1;
}
.v-leave{}
.v-leave-active{}
.v-leave-to{}
</style>

（2）animate.css第三方类库实现动画

import Animated from 'animate.css'
Vue.use(Animated)
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" :duration="{enter:800,leave:800}">
content
</transition>

（3）钩子函数实现半场动画
钩子函数，参数有el代表dom元素
enterMethod(el,done){
el.offsetWidth;
#结束要调用done进入after-enter事件
done()
}

<transition v-on:before-enter="" v-on:enter="" v-on:after-enter="" v-on:enter-cancelled=""
 v-on:before-leave="" v-on:leave="" v-on:after-leave="" v-on:leave-cancelled="">
content
</transition>

（4）列表动画

<transition-group>
	<li></li>
</transition-group>

<style>
.v-enter{
  opacity:0;
}
.v-enter-active{
transition:all 1s ease
}
.v-enter-to{
opacity:1;
}
.v-leave{}
.v-leave-active{}
.v-leave-to{}
#中间删除记录，后面的记录会有上动画
.v-move{}
.v-leave-active{}
</style>

13.vue组件

<Test></Test>
import Test from './component/test'
export default{
#data必须是函数，这样才是局部数据
   data(){
   return {
   }
   },
   components:{
   			Test
   },
   mehod:{
   }
}

动态组件
通过data控制显示什么组件

<component v-bind:is="vueName"></component>

组件传值
父组件向子组件传值
父组件通过v-bind:属性名=“属性值”发送到子组件，子组件通过prop属性接受来自父组件的属性
子组件向父组件传值
父组件v-on:func=“m”
子组件通过事件传值 this.$emit(‘func’,参数)

插槽
分发引用组件时的元素内容
组件内

父组件<hello>你好</hello>
组件
<p>hello组件内部元素：<slot></slot></p>

具名插槽

父组件<hello><div slot='girl'>girl</div><div slot='boy'>boy</div></hello>
组件显示girl,boy 不写slot对应都是默认插槽
<p>hello组件内部元素：<slot name='girl'></slot>----<slot name='boy'></slot></p>

作用域插槽
组件间的传值
父向子传值用prop，子向父传值用slot方式

父组件
<hello v-bind:cick=‘属性值’ ><div slot-scope='a'>{{a.cs.id}}</div></hello>
子组件
<slot :cs='cick'></slot>
export default{
props:['cick']
}

知识点：

scoped作用是样式只在本vue组件有效果
<style scoped></style>

获取dom元素

<p ref='refTest'>test</p>
this.$refs.refTest.innerText
#获取组件方法及属性
<hello ref='hello'></hello>
this.$refs.hello.show()
this.$refs.hello.data.dateContent

14.vue-router

main.js

import VueRouter from 'vue-router'
Vue.use(VueRouter)
#路由规则
var router  = new VueRouter({
	routes:[{
	#监听的地址
	path:'/login'，
	#展示对应的vue
	component:'hello'
},{
path:'/',
//重定向
redirect:'/login'
}
]，
//方式一 选中样式
linkActiveClass:'myClass'
})

var vm = new Vue({
el:"#app',
render:c=>c(App4),
//路由挂载到vm
router:router  
})

使用
router-link-active选中地址高亮
<router-link to="/login" ></router-link>
//占位符，vue-router提供的元素匹配的组件展示在router-view中
<router-view></router-view>
<style scoped>
//方式二设置选中样式
.router-link-active{
}
</style

路由模块化封装
将路由装载到router.js

export default router

路由规则传递参数
方式一
/path?id=xx&name=xx
获取{{this.$route.query.id}}

方式二 restful
/login/admin/pass
路由匹配规则
path:’/login/:name/:password’
获取{{this.$route.params.name}}
路由的嵌套

Accout组件
<router-link to="/accout/login" ></router-link>
<router-link to="/accout/cancel" ></router-link>
<router-view></router-view>

var router  = new VueRouter({
	routes:[
	{
	path:'/accout'，
	component:'Accout',
	children:[{
	#前面不要加‘/’
path:'login'，
	component:'Login',
},{
path:'cancel'，
	component:'Cancel',
}]
}
]
})

路由命名视图

<div>
	<div class="header">
		<router-view></router-view>
	</div>
	<div class="container">
		<router-view name="left"></router-view>
		<router-view name="main"></router-view>
	</div>
</div>

var router  = new VueRouter({
	routes:[
	{
	path:'/'，
	components:{
	//多组件匹配
	'default':Header,
	'left':Left,
	'main':Main
    }
}
]
})

15.watch和computed
watch 1个影响多个数据
//监听路由地址
watch:{
‘$route.path’:fuction(newVal,oldVal){
}
}
computed 多个数据影响一个
16.vuex状态管理
vuex公共数据管理工具，把共享数据保存在vuex,方便整个程序中的所有组件获取或修改公共数据

import Vuex from 'vuex'
Vue.use(Vuex)
var store = new Vuex.Store({
//共享数据
state:{count:0},
//修改共享数据需要定义的方法，不能直接改属性，参数最多2个
mutations:{
subtract(state,obj){
   state.count-=(obj.c+obj.d)
}},
//对共享数据进行包装处理
getters:{
optCount:funciton(state){
return ‘值为’+state.count
}
}
})

new Vue({
render:h=>h(App),
//挂载
store
}).$moute("#app")

{{this.$store.state.count}}
this.$store.commit('方法名',this.value)
{{this.$store.getters:optCount}}