创建一个Vue实例:
new Vue({ el:"#app", //el是控制元素
data:{ msg:"hello", }, //存储数据
methods:{ handleClick:function () { this.msg="123" } } //所调用的方法
})
一些vue功能
v-model：用作双向绑定数据
computed：计算属性 当数据发生变化会重新计算生成新的数据,具有缓存作用
computed:{
fullName:function () {
return this.firstName+" "+this.lastName
}
},
watch：监听属性 当值发生变化触发该函数
v-show=布尔值 true的时候会显示
v-if=布尔值 true的时候会重新生成显示 false会删除该元素
v-for: item of object或者 (item,index) of object 或者 (value, key, index) of object
记得要给 :key值 不推荐index作为key 建议使用ajax传回来的id作为key值
@click:点击事件
v-once:只渲染元素和组件一次
ref="名字"类似于DOM 通过this.$refs.名字获取
<router-link to="转化的路由地址">
子组件
全局定义方式:
Vue.component(组建名,{
props: {
list: Array //传值和类型 还有default 正则表达式等其他属性
}
//父组件向子组件传递的参数 用这个接收
template: //模板
data () { //子组件使用data必须通过函数返回
return{
content:'this is content'
}
}
})
子组件向父组件传递参数
子组件中:
this.$emit(向上发起一个事件名字,传递的参数)
例:this.$emit('delete',this.index)
父组件中:
在使用的这个子组件中添加@事件名字=处理函数名
例:@delete="handleDelete"
handleDelete:function (index) { //index为子组件传回来的参数
this.list.splice(index,1)
}
Vue生命周期函数
给组件绑定原生事件
@click.native="handleClick" 子组件直接让父组件处理该事件
非父子组件间传值(Bus/总线/分布订阅模式/观察者模式)
定义一个总线
Vue.prototype.bus=new Vue()
向总线发送数据
this.bus.$emit(事件名,参数)
例:
this.bus.$emit('change',this.selfContent)
获取数据：
this.bus.$on(事件名,function (接受的参数) {
this_.selfContent=msg
})
例
this.bus.$on('change',function (msg) {
this_.selfContent=msg
})
Vue中的插槽(slot)
内部定义:
<slot name="header">
外部使用：
<div slot="header">
Vue中的作用域插槽
有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽
定义插槽:
<slot v-for="item of list" :item="item" :test="11"></slot>
使用插槽
<template slot-scope="props">
<li>{{props.item}}--hello</li>
</template>
Vue中CSS动画原理
<transition name="fade" @before-enter="进入前的函数"
@enter="进入时的函数"
@after-enter="进入后的函数">
包裹内容
</transition>
设置样式:
.fade-enter-active,.fade-leave-active{
transition: opacity .5s;
}
.fade-enter,.fade-leave-to/* .fade-leave-active below version 2.1.8 */{
opacity:0;
}
Vue中的ajax请求
例：
npm下载axios
import axiosfrom 'axios'
axios.get('/api/index.json?city=' +this.city).then(this.getHomeInfoSucc)
getHomeInfoSucc（传回来的值）{
处理传回来的内容
}
VUEX
index.js
Vue.use(Vuex)
export default new Vuex.Store({
state: state, //共同存储的值
actions: actions,
mutations: mutation,
getters: { //类似computed 重新生成一个值
doubleCity (state) {
return state.city +' ' + state.city
}
}
})
actions.js
export default {
changeCity (ctx, city) { //向mutations提交
ctx.commit('changeCity', city) //第一个参数为mutations里的函数名字,第二 //是内容参数
}
}
mutations.js
export default {
changeCity (state, city) { //改变state的值
state.city = city
}
}
state.js
let defaultCity ='深圳'
try {
if (localStorage.city) { //localStroage是本地的一种缓存机制 有的 //用户可能关闭这个功能而抛出异常 所以需要try catch
defaultCity = localStorage.city
}
}catch (e) {
}
export default {
city: defaultCity
}
如何使用VUEX
如果获取值
import {mapState}from 'vuex'
computed: {
...mapState(['city'])
}
就可以获取state里面名字为city的值
如何改变值
import {mapState, mapMutations}from 'vuex'
methods: {
handleCityClick (city) {
this.changeCity(city) //根据下面的mapMutations发起改变请求
this.$router.push('/') //路由改变的其中一个方法
},
...mapMutations(['changeCity'])
}
