vue全家桶
标签篇
<template></template>无意义标签
<component :is="组件名"></component>该组件替代
指令篇
值是引号，引号里面是变量：
v-model
仅用于input textareas select表单元素，忽略表单元素的value,checked,selected属性，有后两项属性的表单标签，需加value属性;
<input type="checkbox" v-model="b" value="游泳"/> <input type="checkbox" v-model="b" value="吃饭"/> <input type="checkbox" v-model="b" value="睡觉"/> {{b}} data:{b:[]} //点击哪个，就会把那个的value添加到或删除到了数组中
源码通过Object.defineProperty的get和set方法来实现视图层和数据层的双向绑定。
手工实现v-model原理
let obj={}; let temp={}; Object.defineProperty(obj,'name',{ get(){ return temp.name }, set(val){ temp.name=val; } }
v-if控制元素有无/v-show控制样式显示隐藏
v-else-if
v-else
三种指令必须挨着，才能构成逻辑判断
<button @click="cut=!cut">单</button>
<template v-if="cut">
<label>注册</label>
<input type="text" key="1"/>
</template>
<template v-else>
<label>登陆</label>
<input type="text" key="2"/>
</template>
template标签不支持v-show指令
v-bind属性绑定，简写: 表示字符串内的为变量
绑定class和style属性有两种方式
对象的方式和数组的方式
.style1{ background: yellow } .style2{ color:red; } .style3{ font-size: 30px; } <div :class="['style1','style2']">以数组的方式</div> <div :class="{style1:cut,style2:cut2,style3:cut3}" >以对象的方式</div>
data:{ cut:true, cut2:false, cut3:false, }
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
v-for 哪个标签需要循环就给那个标签加v-for="(item,index) in obj" 第一个参数是item，第二个是index
v-text 可以解决以{{}}小胡子写法的页面刚加载时一闪而过出现{{}}的尴尬，v-text是把变量编译好了的数据
v-html
v-cloak
v-once
表示view层只变化一次，显示第一次的数据，不论model数据层变化了多少次，如：
<div v-once>{{msg}}</div> <input type="text" v-model='msg' />
v-on简写@ 事件名.修饰符.修饰符
双击事件dblclick
键盘事件 如@keyup.ctrl.a="fn" 或@keyup.ctrl.a="fn()"，写成函数定义或调用都可以 表示同时按住ctrl键和a键 触发fn函数，
事件会自动给fn传递event参数:
methods里的fn(e){}
如何传递其他参数:@click=““fn($event,其他参数)””
事件的修饰符:
.stop停止冒泡,.capture捕获,.self event的target是它时才触发,.once只触发一次,.prevent阻止默认事件
{{}}可以写表达式，赋值运算 三元表达式 计算。 this指代vm， this.person 可以不写this
如 :{{'hello' | handle}}会将hello作为参数传给实例里的filters里的handle函数
实例篇
vm会代理data,methods,computed,变量名不能重名，因为都是vm对象上的属性，可通过vm.person访问，通过vm.$set(vm.person,key值,value值)可以设置对象。
数据劫持:vue会遍历data里的对象，给之加上getter，setter（get set方法）,使之可以双向数据绑定
let vm=new Vue({
el:挂载点,(vue的作用范围，源码使用querySelector方法)
data:{
person:{}
},
methods:{
函数的this指向vm实例，不能用箭头函数写法，因为箭头函数里的this就是指向上一级作用域了
},
filters:{//函数只能在该挂载点范围内有效，如想在全局有效则在 new vue之前给原型加方法 // Vue.filter('handle',(data)=>{return data+'handle'})
handle(data){
return data+‘handle’
}
}
computed:{
属性名:{//属性名可以直接用
get(){
return值
},
set(val){
}
},
属性名(){
return 值
//写成这种方式，默认没有set，只有get
}
watch:{
属性名(newval,oldval){//监听该属性，变化了就执行该函数
}
},
directives:{//创建指令 使用:v-指令名
指令名(el,bindings){//将绑定该属性的元素作为参数传给第一个函数，绑定的东西传给第二个参数
}
},
components:{
子组件名:{
template:''标签或是'#id'
(将<template id='id'>
<slot></slot>
<slot name=''></slot>
</template>写到html中 模板用到slot表示组件的innerHTML内可以加标签，标签有slot属性，值与name对应 )
data(){
return 对象
}
}
},
props:{
属性名:{
type:[Number,Boolean,Array,String,Object],//多类型或单类型
default:()=>{return []},//需要是函数 返回值形式
validator(val){
return 真假值
}
}
}//或数组 用于父传子通信
}
});
全局组件
Vue.component('组件名',{
template:
....
})
生命周期的钩子函数
let vm = new Vue({ beforeCreate(){//初始化内部的方法 console.log(this,'bc') }, data:{ flag:'red', a:123, attr:[3,4,5] }, created(){//初始化data等 请求数据 console.log(this,'c') }, beforeMount(){//没用 }, //template:'<div id="self">{{flag}}</div>',模板 如没有则用挂载点 有则用该模板 mounted(){//真实dom渲染完成 console.log('------------') console.log(this.$refs.choose); this.$nextTick(()=>{ this.attr=[1,1,1,1,1] console.log(this.$refs.choose); }) }, beforeUpdate(){//一般用watch来替代 console.log('更新之前') }, updated(){//一般用watch来替代 console.log('更新了') }, beforeDestroy(){//清除定时器 解除事件绑定 console.log('销毁前') }, destroyed(){ console.log('销毁') } }).$mount('#app') //等同于el:'#app', vm.$destroy();
实例方法
通信篇
1,父传子:通过绑定属性
2,子传父:(有一种情况子可以直接修改父的props，那就是父传子的是obj类型，子修改obj则父的obj也变了)
给父组件加上绑定事件@事件名='函数'，就会有内置的.$on('事件名',function(接收传递的数据){}),
子组件通过 .$emit('事件名',要传递的数据)触发事件，来传递数据。
3,跨组件间通信:
let eventBus=new Vue();
事件车，将所有用于通信的事件绑定到该实例上
通过$emit和$on来触发监听
4,vuex
新建vuex目录:
1)state.js保存状态的文件 :export default 状态对象
2)mutations-type.js用来集中定义事件名的文件:export const 事件名='事件名'
3)mutations.js保存action的文件:
import * as types from './mutations-type.js'
export default 事件函数对象如
fn(state,传参){state是状态对象}或
[types.名字](){}
4)getters.js保存计算属性对象:
属性名:(state)=>{return }
5)index.js:
import Vue from 'vue' import Vuex from 'vuex'; Vue.use(Vuex); import state from './state.js'; import mutations from './mutations.js'; import getters from './getters.js'; let store=new Vuex.Store({ state, mutations, getters })
export default store;
在主文件的new Vue({
store,//将存储放在实例里
})
使用方法:
import {mapState,mapMutations,mapGetters} from 'vuex';
import * as Types from ''
methods:{
...mapMutations([对应的事件名])//console.log(mapMutations([对应的事件名]))的值是对象，里面有key事件名,value函数体
其他函数可使用该函数并传参,例如edit(参数){this[Types.名字](参数)}
}
computed:{
...mapState([对应的状态名])//返回结果同上 名字是state.js里保存的变量名
...mapGetters([对应名])//返回结果同上 名字是state.js里保存的变量名
}
实例的方法$emit、$on、$refs
路由篇
router文件夹下index.js配置路由表
import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router);//使router全局能用 Vue.use全局 let router=new Router({ mode:url访问模式 hash or browser linkActiveClass:链接访问的class //更名 linkExactActiveClass:当前页面的class //更名 routes: [ {path:'/path/:变量名/:变量名',
component:组件名,
children:[ {path:'子路径也要写上父路径',component:组件名} ]
},
{
path:'/detail/:id',
component:()=>import ('../components/Detail'),//组件拆分,路由按需加载的方式,提升网路访问速度,该函数返回的是promise对象
name:'detail'
}, { path:'*',redirect:''重定向路径 } ] }) new Vue({ router, //将路由放在实例里 })
$route.params.变量名、$router.go(负数)返回第几级，.back()返回上一级，.push(路径)跳到哪里，.replace()替换
<router-view></router-view>
<router-link to='/url地址' :to="{name:'detail',params:{id:item.id}}"(动态传地址) tag='哪种标签' exact精确匹配 ></router-link>
缓存组件
<keep-alive>
<要缓存的组件>
</keep-alive>
(组件渲染一次后不会销毁，从而也不会重新渲染)
解决办法:增加生命周期的钩子函数
activated(){
加了keep-alive会多次执行，不加keep-alive则不执行
}
deactivated(){
keep-alive移除时调用
}
安装脚手架
npm init -y
npm install vue
vue init webpack 项目名
.vue文件模板
<template></template> <script> export default { } </script> <style scoped lang="less">规定样式语言</style>
App.vue是根组件，用来渲染路由页面<router-view></router-view>
main.js是webpack中 entry打包的文件
安装的外部插件，都在这里引用，全局声明
import Vue from 'vue'; import App from './App.vue'; import router from './router/index.js'; new Vue({ el: "#app", render:h => h(App),runtime模式 或template:complier模式, router//配置router路由 });
dev模式如何改端口号config->index.js，
