-
使用場景：
多個視圖依賴于同一狀態(tài)（例：菜單導航）
來自不同視圖的行為需要變更同一狀態(tài)（例：評論彈幕）
vuex介紹：
vue的狀態(tài)管理模式
作用：組件狀態(tài)集中管理
組件狀態(tài)改變遵循統(tǒng)一的規(guī)則
查看全部 -
vue代碼風格規(guī)范：https://cn.vuejs.org/v2/style-guide/
查看全部 -
組件化思想的優(yōu)勢
查看全部 -
組件化帶來的問題
查看全部 -
//=======================================
查看別人的web界面
chrome 調(diào)試查看DOM結構
Header，Body里面看js/css引用，搜索相應的js庫
查看source、network中的js，使用反編譯與斷點進行調(diào)試
查看全部 -
源碼 https://github.com/kanlidy/vue-lessons-demo
vue serve demo1.vue-->快速調(diào)試該組件
<ul>
????<li v-for="(item,index) in lists"
????????? ?@click="choose(index)"
????????????:class="{active : index == current && current !==' '}"
????????? ?:key="index">
????????{{item}}?
????</li>
</ul>
<button type="button" @click="add()"></button>
<ul>
????<li v-for="(item,index) in target" :key="index">{{item}}</li>
</ul>
<script>
export default{
????name: "demo1",
????data () {
????????return{
????????????current: '',//用于記錄
????????????lists:[1,2,3,4,5,6,7,8,9]，
????????????target:[]
????????}
????},
????methods: {
????????choose (index){
????????????this.current = index
????????},
????????add(){
? ? if(this.current === ' '){ return }//只有選中后，點擊‘添加’才會產(chǎn)生列表
??????this.target.push(this.lists[this.current])
????? this.current = ' '//設置成只有點擊數(shù)字后才能記錄
????????}
????}
}
</script>
<style scoped>
li.active{
????background : green;
}
</style>
//==========================
<template> <div> <ul> <li v-for="(item,index) in lists" @click="choose(index)" :class="{active: index == current && current !==''}" :key="index"> {{item}} </li> </ul> <button type="button" @click="add()">添加</button> <ul> <li v-for="(item,index) in target" :key="index">{{item}}</li> </ul> </div> </template> <script> ?export default { ? ?name: "demo1", ? ?data () { ? ? ?return { ? ? ? ?current: '', ? ? ? ?lists: [1,2,3,4,5,6,7,8,9], ? ? ? ?target: [] ? ? ?} ? ?}, ? ?methods: { ? ? ?choose (index) { ? ? ? ?this.current = index ? ? ?}, ? ? ?add () { ? ? ? ?if(this.current === ''){return} ? ? ? ?this.target.push(this.lists[this.current]) ? ? ? ?this.current = '' ? ? ?} ? ?} ?} </script> <style scoped> li.active{ ?background: green; } </style> 查看全部 -
1）創(chuàng)建項目
git clone-->將遠程倉庫代碼下載到本地，默認創(chuàng)建一個hellogit.git文件
git init-->初始化一個 Git 倉庫
（2）創(chuàng)建分支，推送分支，合并分支
git status-->查看哪些文件處于什么狀態(tài)
git branch 或者 git branch -a-->查看分支
touch xx.txt-->創(chuàng)建文件
git add . 或git add xx.txt-->將所有文件待提交
git commit -m "注釋"-->注釋說明
git push origin master-->推送到遠程
git checkout -b xxx--> 創(chuàng)建本地分支 ； git push origin xxx-->推送本地分支到遠程
git checkout master-->切換到master分支 ； git merge xxx-->合并創(chuàng)建的本地分支 ；git push origin master-->推送到遠程
（3）刪除分支、回退版本
git branch -D xxx-->刪除創(chuàng)建的本地分支 ；git push origin :xxx-->刪除在遠程創(chuàng)建的本地分支
git reset --hard head^-->退回上一個版本
git reset --hard xxx-->退回指定的版本
---------------------?
查看全部 -
git clone-->將遠程倉庫代碼下載到本地，默認創(chuàng)建一個hellogit.git文件
git status-->
git add .-->將所有文件待提交
git commit -m "注釋"
git push origin master-->上傳到master
查看全部 -
第一種：vue的chrome擴展插件；
第二種 ：在methods中用console.log，alert()有阻塞行為，debugger；
第三種：在mounted（）{}中綁定window.vue=this;-->window.vue.function()-->方法是methods中的方法
第四種：在cdn方式引入vue時，將vue實例化，設置一個全局變量，即vue實例:var app=new Vue();
查看全部 -
store.js中：
Vue.use(Vuex)? //引用組件
export default new Vuex.Store({
state:{//組建狀態(tài)集中管理
????count :0
},
//=========================
mutations:{//改變Vuex中狀態(tài)的方法集
????increase （）{
????????this.state.count ++
????}
},
//=========================
actions:{
}
})
//==================================
在Info.vue中：
<button @click="add()">添加</button>
引入store文件
import store from '@/store'-->@代表src
export default{
????name: 'Info',
????store,//申明引入的store
????methods: {
????????add(){
????????????store.commit('increase'）
????????}
????}
}
當每次點擊添加按鈕時，調(diào)用add（）方法，再提交該方法中“increase”事件，即會使store.js中state的count自增。
//================================================
在About.vue中：
????????{{msg}}
import store from '@/store'-->@代表src
export default{
????name: 'about',
????store,//申明引入的store
????data () {
? ? ? ?return {
????????????msg: store.state.count
????????}
????}
}
創(chuàng)建的store.js中寫入 Vue.use(Vuex)? //引用組件
在其他組件中引用store文件，并在default使用store
store.commit
查看全部 -
views中? ：新建組件
New->Vue Component->命名
<template>模板
<script>代碼
<style>樣式
//==============================
router.js中：定義組件，導入位置
上面導入:import 大寫名字 from './views/大寫名字.vue';
{
????path: /小寫名字（與views中的一致）'',
????name: 小寫名字'',
????component: 大寫名字,
}
//===================================
App.vue中：連接到組件
<router-link to="/小寫名字">大寫名字</router-link>
查看全部 -
npm install -g @vue/cli? -->安裝vue_cli工具
vue create 項目名-->創(chuàng)建項目
vue ui界面
//==================
Router-->路由組建
Vuex-->狀態(tài)管理組建
CSS Pre-processors-->預編譯組建
查看全部 -
v-if="條件表達式"：滿足要求，執(zhí)行該標簽中的內(nèi)容
v-else-if="條件表達式"：當v-if表達式不滿足時，執(zhí)行該標簽中的內(nèi)容
v-esle：當v-else-if表達式不滿足時，執(zhí)行該標簽中的內(nèi)容
//=========================
v-show="表達式" show:{{data中的變量}}--和v-if類似
//=========================
v-for="item in list"--->循環(huán)list集合中的值
//=========================
v-bind://的綁定style
等同于
v-bind:
data:{
????styleMsg:{
????????color : 'red'
????}
}
//=========================
v-bind:class="{'active' :true}"---作用？？
v-bind:class="['active' ,'add','more',{'another' : true}]"
查看全部 -
watch:{//監(jiān)聽器，異步場景
????msg:function(newVal,oldVal){
????????方法體//將data：{}中的變量對應的msg的值改變后，觸發(fā)該方法????}
}
//====================================
conputed:{//計算屬性，數(shù)據(jù)聯(lián)動
????msg1:function(){
????????方法體//改變data：{}（本實例）中的任意變量的值改變后，都會觸發(fā)該方法
????????????????? ? //實例外：先改變變量值，不會觸發(fā)該方法，再改變本實????????????????????????????例中的變量值，也會顯示實例外的改變后值
????}
}
查看全部 -
v-on:click="submit()"-->@click="submit()"
methods:{
????submit:function(){
????????方法體；
????}
}，//===========================
v-bind:href="url"-->縮寫:href="url"
data:{
????url:'http://www.baidu.com',
}
查看全部
舉報