基本使用：
vue init webpack vue-demo
结构:
```
new Vue({
el:'#app',
data:{
...
},
methods:{
....
}
})
```
<!-- 绑定属性 v-bind:xxx 缩写：xxx --> <div v-bind:title="title">鼠标喵上去看一下</div>
<!-- 绑定html v-html --> <div v-html="h"></div>
绑定文字：{{xxx}}=v-text
<li v-for="(item,key) in 数组" :class="{'red':key==1,'blue':key==0}">{{key}}----{{item}}</li>
<div :class="{'red':flag,'blue':!flag}">xxxxxx</div>
<div :class="[class类名,class类名1]">xxxxxx</div>
<div class="box" v-bind:style="{width:boxWidth+'px'}"></div>
v-if代表节点不存在 v-show是将display设置成了none,不支持template标签(性能开销小)
key值要使用id,不要使用index
通过$refs获取dom节点 this.$refs.xxxx
v-on:click= @click= input---@change
@click.stop 阻止事件冒泡
@click.prevent 阻止默认事件
@click.prevent.stop 同时阻止冒泡和默认事件
@click.once 只执行一次
vue实现多选
<input type="checkbox" v-modal=''a'' value="0"/>注意多个要设置不同的value值
单选 type="radio" name属性 表示是否多个radio属于同一个组
下拉框 <select v-model="selected1"> <option value="0">唱歌</option> </select>
修饰符
v-model.lazy 光标离开时触发
v.model.trim 过滤首尾空格
v.model.number 只能输入数字
//every()检测数组元素是否都符合要求，都符合返回true,只要有一个没有符合返回false
引入组件的方式：1、引入组件2、挂载组件3. 在模板中运行
scoped代表有作用域，css只生效于当前页面
xxxx.sync 同步状态变化 this.emit(‘update:xxxx’,v)
数据不刷新的问题:
1.Vue.set(vm.items,index,value)
2.Vue.$set(vm.items,index,value)
3.splice(在哪添加(索引),添加的数量,添加的是数据(可多个))
生命周期
beforeCreate '实例创建之前'
created '实例创建完成'
beforeMount '模板编译之前'
mounted 数据请求应该放在此处 '模板编译完成'
beforeUpdate '数据更新之前'
updated '数据更新完成'
beforeDestroy '实例销毁之前'
destroyed '实例销毁完成'
computed 计算属性 (和方法的不同之处计算属性有缓存)
watch
watch:{
//‘name’:'action' action是methods里面的方法
name(newValue,oldValue){
}
obj:{
handler:(newValue,oldValue)=>{
},
deep:true//深度监听
}
}
修改对象 this.$set(this.obj,'age',20)
删除属性 this.$delete(this.obj,'age')
请求数据的方式
vue-resource this.$http.get(api).then(xx)
axios Axios.get(api).then(xx)
父子组件传参
<v-header :title="title" :fun="fun" :home="this"></v-header>
props:{'title':String,'fun':Function,'home':Object} 注意:和methods并列
父组件调用子组件的时候，绑定动态属性
在子组件里面通过props接受
this.$parent.父组件的data值
父传子，:aaa,子组件用props接收
子传父，@aaa，子组件用this.$emit(‘aaa’,xxx)调用父组件传入的事件。
组件定义
Vue.component('aaaa',{
data:function(){return {count:0}}
template:'<div>{{count}}</div>'
})
解决浏览器渲染闪烁的问题
v-cloak 设置样式：[v-cloak]{display:none}
父组件主动获取子组件的方法
* 1、调用子组件的时候定义ref <v-header ref="header"></v-header>
* 2、在父组件通过 this.$refs.header.属性/方法 获取
子组件主动获取父组件的方法
this.$parent.数据、this.$parent.方法
非父子组件之间的传值
* 1、新建js文件，引入vue，进行实例化，暴露出此实例
* 2、在要广播的地方引入定义的实例
* 3、调用 实例名.$emit('名称',数据)
* 4、接受 实例名.$on('名称',function)
自定义v-model
父 <子 v-model="name"/>
子 <Input type="text" :value="text" @input="$emit('change',$event.target.value)"
export default{
model:{
props:'text', //对应props的text
event:'change' //$emit触发的事件要和此处对应
},
props:{
text:String,
default(){
return ''
}
}
}
匿名插槽
A:<div><slot></slot></div>. B: <A><span>123123</span></A>
注:不能存在多个slot
具名插槽
A:<div><slot name="header"></slot></div> B:<A><div slot="header">aaaa</div></A>
作用域插槽 在某个地方换一个样式来渲染某一部分内容
A:<div><slot content="123123"></slot></div>
B:<A><template slot-scope="props"><h1>{{props.content}}</h1></template></A>
动态组件
<component :is="组件名"></component>
keep-alive 组件缓存
include: 只有匹配的组件才会缓存,符合条件：字符串/正则
exclude: 任何组件都不会缓存，符合条件：字符串/正则
v-enter：进场动画的开始状态
v-enter-to：进场动画的一个结束状态
v-enter-active：进场动画生效时的状态
把要加过渡动画的元素加在<transition>标签里面
vue-router的使用
1、创建组件
2、配置路由
3、实例化vue-router
4、挂载路由
5、<router-view></router-view>放在app.vue根组件里面
vue路由导航跳转方式
声明式 <router-link :to="...">
声明式常见方式
to="/home"
to="{name:home}"
to="{path:'home',query:{id:10}}" 地址栏/home?id=10
to="{name:'home',query:{id:10}}" 地址栏/home?id=10
to="{path:'home',params:{id:10}}" 直接路由带路由参数params，params不生效，如果提供了path，params会被忽略
to="{name:'home',params:{id:10}}" 地址栏/home/10
编程式 router.push(...)
编程式常见方式
router.push('/home')
router.push({path:'homename'})
router.push({path:'home',query:{id:10}})
router.push({name:'home',query:{id:10}})
router.push({path:'home',params:{id:10}})
router.push({name:'home',params:{id:10}})
params方式传参，需要在路由中配置参数
{path:'/news/:id',component:News}
页面中接受参数：$route.params.id
路由重定向和别名：
ex：{path:'*', redirect:'/home'}
路由拦截(在路由文件中拦截)
//next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
router.beforeEach(function(to, from, next) {
if(!sessionStorage.getItem('sign')){
if(to.path !=='/home'){
alert('请签到！');
next();
}
}
next()
})
钩子函数:
全局:
beforeEach:在路由切换时开始调用
afterEach:在路由切换离开时调用
局部到单个路由:
beforeEnter
组件的钩子函数:
beforeRouterEnter,
beforeRouterUpdate,
beforeRouterLeave
包含三个参数
to:即将进入的导航对象
from:当前要离开的导航对象
next:是一个函数,调用resolve 执行下一步
自定义组件的data必须是一个函数返回对象,主要是防止组件之间作用域相互影响.
动态路由
1、配置动态路由
* routes: [// 动态路径参数 以冒号开头{ path: '/user/:id', component: User }]
* get方法传值 :to="'/newDetail?aid='+item.aid" 用this.$route.query获取
2、this.$route.params获取动态路由的值
vue使用mint-ui
import 'mint-ui/lib/style.css'
import Mintfrom 'mint-ui';
Vue.use(Mint);
vue使用element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
*webpack.config.js 配置file_loader http://element.eleme.io/1.4/#/zh-CN/component/quickstart
{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,loader: 'file-loader'}
*结合官方文档使用
Vuex
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式
1.vuex解决了组件之间同一状态的共享问题 （解决了不同组件之间的数据共享）
2.组件里面数据的持久化。
*小项目不部建议用vuex
vuex的使用：
1、src目录下面新建一个vuex的文件夹
2、vuex 文件夹里面新建一个store.js
3、安装vuex
cnpm install vuex --save
4、在刚才创建的store.js引入vue 引入vuex 并且use vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
5、定义数据
/*1.state在vuex中用于存储数据*/
var state={count:1}
6、定义方法 mutations里面放的是方法，方法主要用于改变state里面的数据
var mutations={incCount(){++state.count;}}
7、类似vue里面的计算属性 ， 改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)
var getters= {computedCount: (state) => {return state.count*2 }}
8、 Action 基本没有用
Action 类似于 mutation，不同在于：
mutation 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
var actions= {
incMutationsCount(context) { /*因此你可以调用 context.commit 提交一个 mutation*/
context.commit('incCount'); /*执行 mutations 里面的incCount方法 改变state里面的数据*/
}}
暴露
const store = new Vuex.Store({
state,
mutations,
getters,
actions
})
export default store;
组件里面使用vuex：
1.引入 store
import store from '../vuex/store.js';
2、注册
export default{
data(){ return {}},
store,
methods:{incCount(){this.$store.commit('incCount'); /*触发 state里面的数据*/} }
3、获取state里面的数据
this.$store.state.数据
4、触发 mutations 改变 state里面的数据
this.$store.commit('incCount');
5、触发 actions里面的方法
this.$store.dispatch('incCount');
6、获取 getters里面方法返回的的数据
this.$store.getters.computedCount
注意：export default 一个 import 一个 from xxx.js
双向数据绑定
var obj = {};
//修改单个属性
Object.defineProperty(obj, 'name', {
value: 'asdd',
writable: true,//当前属性是否可以被修改
})
//修改多个属性
Object.defineProperties(obj, {
'name': {
value: '123213',
writable: true
},
'age': {
value: 10,
writable: false
}
})
//存取方法 getter setter
var a=0;
Object.defineProperty(obj, 'name', {
get: function () {
console.log('get');
return a
},
set: function (val) {
console.log('set');
a = val
}
});
最后附上源码地址:
https://github.com/mvpdream/vueDemo
