基本使用：
vue init webpack vue-demo
結(jié)構(gòu):
```
new Vue({
el:'#app',
data:{
...
},
methods:{
....
}
})
```
<!-- 綁定屬性 v-bind:xxx 縮寫：xxx --> <div v-bind:title="title">鼠標(biāo)喵上去看一下</div>
<!-- 綁定html v-html --> <div v-html="h"></div>
綁定文字：{{xxx}}=v-text
<li v-for="(item,key) in 數(shù)組" :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代表節(jié)點不存在? ?v-show是將display設(shè)置成了none,不支持template標(biāo)簽(性能開銷小)
key值要使用id,不要使用index
通過$refs獲取dom節(jié)點? this.$refs.xxxx
v-on:click=? ?@click=? ? input---@change
@click.stop 阻止事件冒泡
@click.prevent 阻止默認(rèn)事件
@click.prevent.stop 同時阻止冒泡和默認(rèn)事件
@click.once 只執(zhí)行一次
vue實現(xiàn)多選?
<input type="checkbox" v-modal=''a'' value="0"/>注意多個要設(shè)置不同的value值
單選 type="radio" name屬性 表示是否多個radio屬于同一個組
下拉框?<select v-model="selected1">? <option value="0">唱歌</option> </select>
修飾符
v-model.lazy 光標(biāo)離開時觸發(fā)
v.model.trim 過濾首尾空格
v.model.number 只能輸入數(shù)字
//every()檢測數(shù)組元素是否都符合要求，都符合返回true,只要有一個沒有符合返回false
引入組件的方式：1、引入組件2、掛載組件3. 在模板中運行
scoped代表有作用域，css只生效于當(dāng)前頁面
xxxx.sync 同步狀態(tài)變化 this.emit(‘update:xxxx’,v)
數(shù)據(jù)不刷新的問題:
1.Vue.set(vm.items,index,value)
2.Vue.$set(vm.items,index,value)
3.splice(在哪添加(索引),添加的數(shù)量,添加的是數(shù)據(jù)(可多個))
生命周期
beforeCreate? '實例創(chuàng)建之前'
created? '實例創(chuàng)建完成'
beforeMount '模板編譯之前'
mounted? 數(shù)據(jù)請求應(yīng)該放在此處? ?'模板編譯完成'
beforeUpdate '數(shù)據(jù)更新之前'
updated? '數(shù)據(jù)更新完成'
beforeDestroy? '實例銷毀之前'
destroyed '實例銷毀完成'
computed 計算屬性 (和方法的不同之處計算屬性有緩存)
watch?
watch:{
????//‘name’:'action'? action是methods里面的方法
? ??name(newValue,oldValue){
? ??}
? ? obj:{
????????handler:(newValue,oldValue)=>{
????????},
? ? ? ? deep:true//深度監(jiān)聽
????}
}
修改對象 this.$set(this.obj,'age',20)
刪除屬性 this.$delete(this.obj,'age')
請求數(shù)據(jù)的方式
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并列
父組件調(diào)用子組件的時候，綁定動態(tài)屬性
在子組件里面通過props接受
this.$parent.父組件的data值?
父傳子，:aaa,子組件用props接收
子傳父，@aaa，子組件用this.$emit(‘a(chǎn)aa’,xxx)調(diào)用父組件傳入的事件。
組件定義
Vue.component('aaaa',{
? ??data:function(){return {count:0}}
? ??template:'<div>{{count}}</div>'
})
解決瀏覽器渲染閃爍的問題
v-cloak? 設(shè)置樣式：[v-cloak]{display:none}
父組件主動獲取子組件的方法
*? 1、調(diào)用子組件的時候定義ref? ? ? ? ?<v-header ref="header"></v-header>
*? 2、在父組件通過 this.$refs.header.屬性/方法? 獲取
子組件主動獲取父組件的方法? ? ??
this.$parent.數(shù)據(jù)、this.$parent.方法
非父子組件之間的傳值
* 1、新建js文件，引入vue，進(jìn)行實例化，暴露出此實例
* 2、在要廣播的地方引入定義的實例
* 3、調(diào)用 實例名.$emit('名稱',數(shù)據(jù))
* 4、接受 實例名.$on('名稱',function)
自定義v-model
父 <子 v-model="name"/>
子 <Input type="text" :value="text" @input="$emit('change',$event.target.value)"
export default{
model:{
props:'text', //對應(yīng)props的text
event:'change' //$emit觸發(fā)的事件要和此處對應(yīng)
},
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>
作用域插槽 在某個地方換一個樣式來渲染某一部分內(nèi)容
A:<div><slot content="123123"></slot></div>
B:<A><template slot-scope="props"><h1>{{props.content}}</h1></template></A>
動態(tài)組件
<component :is="組件名"></component>
keep-alive 組件緩存
? ? ? include: 只有匹配的組件才會緩存,符合條件：字符串/正則
? ? ? exclude: 任何組件都不會緩存，符合條件：字符串/正則
v-enter：進(jìn)場動畫的開始狀態(tài)
v-enter-to：進(jìn)場動畫的一個結(jié)束狀態(tài)
v-enter-active：進(jìn)場動畫生效時的狀態(tài)
把要加過渡動畫的元素加在<transition>標(biāo)簽里面
vue-router的使用
1、創(chuàng)建組件
2、配置路由
3、實例化vue-router
4、掛載路由
5、<router-view></router-view>放在app.vue根組件里面
vue路由導(dǎo)航跳轉(zhuǎn)方式
聲明式 <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}}" 直接路由帶路由參數(shù)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方式傳參，需要在路由中配置參數(shù)
{path:'/news/:id',component:News}
頁面中接受參數(shù)：$route.params.id
路由重定向和別名：
ex：{path:'*', redirect:'/home'}
路由攔截(在路由文件中攔截)
//next:Function,進(jìn)行管道中的一個鉤子，如果執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）；否則為false，終止導(dǎo)航。
router.beforeEach(function(to, from, next) {
? if(!sessionStorage.getItem('sign')){
? ? if(to.path !=='/home'){
? ? ? alert('請簽到！');
? ? ? next();
? ? }
? }
? next()
})
鉤子函數(shù):
全局:
beforeEach:在路由切換時開始調(diào)用
afterEach:在路由切換離開時調(diào)用
局部到單個路由:
beforeEnter
組件的鉤子函數(shù):
beforeRouterEnter,
beforeRouterUpdate,
beforeRouterLeave
包含三個參數(shù)?
to:即將進(jìn)入的導(dǎo)航對象
from:當(dāng)前要離開的導(dǎo)航對象
next:是一個函數(shù),調(diào)用resolve 執(zhí)行下一步
自定義組件的data必須是一個函數(shù)返回對象,主要是防止組件之間作用域相互影響.
動態(tài)路由
1、配置動態(tài)路由
* routes: [// 動態(tài)路徑參數(shù) 以冒號開頭{ path: '/user/:id', component: User }]
* get方法傳值?:to="'/newDetail?aid='+item.aid"? 用this.$route.query獲取
2、this.$route.params獲取動態(tài)路由的值
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'}
*結(jié)合官方文檔使用
Vuex
Vuex是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式
? ? 1.vuex解決了組件之間同一狀態(tài)的共享問題? （解決了不同組件之間的數(shù)據(jù)共享）
? ? 2.組件里面數(shù)據(jù)的持久化。? ? ? ? ? ? ? ?
*小項目不部建議用vuex?
vuex的使用：
1、src目錄下面新建一個vuex的文件夾
2、vuex 文件夾里面新建一個store.js
3、安裝vuex?
cnpm install vuex --save
4、在剛才創(chuàng)建的store.js引入vue? 引入vuex 并且use vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
5、定義數(shù)據(jù)
/*1.state在vuex中用于存儲數(shù)據(jù)*/
var state={count:1}
6、定義方法 mutations里面放的是方法，方法主要用于改變state里面的數(shù)據(jù)
var mutations={incCount(){++state.count;}}
7、類似vue里面的計算屬性 ， 改變state里面的count數(shù)據(jù)的時候會觸發(fā) getters里面的方法 獲取新的值 (基本用不到)
var getters= {computedCount: (state) => {return state.count*2 }}
8、 Action 基本沒有用
Action 類似于 mutation，不同在于：
mutation 提交的是 mutation，而不是直接變更狀態(tài)。
Action 可以包含任意異步操作。
var actions= {
? ? incMutationsCount(context) {? ? /*因此你可以調(diào)用 context.commit 提交一個 mutation*/
????????context.commit('incCount');? ? /*執(zhí)行 mutations 里面的incCount方法 改變state里面的數(shù)據(jù)*/
? ? }}
暴露
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');? /*觸發(fā) state里面的數(shù)據(jù)*/} }
3、獲取state里面的數(shù)據(jù)?
this.$store.state.數(shù)據(jù)
4、觸發(fā) mutations 改變 state里面的數(shù)據(jù)
this.$store.commit('incCount');
5、觸發(fā) actions里面的方法
this.$store.dispatch('incCount');
6、獲取 getters里面方法返回的的數(shù)據(jù)?
this.$store.getters.computedCount
注意：export default 一個? import 一個 from xxx.js?
雙向數(shù)據(jù)綁定?
var obj = {};
? ? ? ? ? ? //修改單個屬性
? ? ? ? ? ? Object.defineProperty(obj, 'name', {
? ? ? ? ? ? ? ? ? value: 'asdd',
? ? ? ? ? ? ? ? ? writable: true,//當(dāng)前屬性是否可以被修改
? ? ? ? ? ? })
? ? ? ? ? ? //修改多個屬性
? ? ? ? ? ? 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
