第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

store.js中引入了vue和vuex；然后Vue.use(Vuex)

state中記錄的是狀態(tài)；

mutations是唯一可以改變集中狀態(tài)的方法集的定義；

使用實例：

在傳遞狀態(tài)的視圖組件中import store from '@/store';//@符號代表src目錄

傳遞過去的狀態(tài)名稱在state中定義；在mutations中定義一個方法，對狀態(tài)進(jìn)行改變；在出發(fā)狀態(tài)改變的視圖組件中使用store.commit('mutation')進(jìn)行狀態(tài)改變觸發(fā)

在需要接收狀態(tài)改變的視圖組件中先import store from '@/store';然后使用store.state.name可以直接引用被更改了的狀態(tài)

vuex狀態(tài)管理在項目目錄下的store.js中進(jìn)行

vuex進(jìn)行組件間的狀態(tài)管理常用場景為：

1、多個視圖依賴于同一狀態(tài)，例如導(dǎo)航菜單的狀態(tài)切換

2、來自不同視圖的行為需要變更同一狀態(tài)，如評論彈幕

組件間的狀態(tài)管理，使用vuex

routes對應(yīng)的路由配置包含：path為路由路徑'/'為根目錄；name為路由的名稱;component對應(yīng)的是引入的具體組件

app.vue文件為項目界面結(jié)構(gòu)，其中<router-link to="/">title</router-link>為路由切換標(biāo)簽，<router-view/>則顯示當(dāng)前的路由組件視圖

項目的src目錄下router文件定義路由

組件的三個特點：獨立性，可復(fù)用性，完整性

解決組件化帶來的問題的方式：vuex進(jìn)行組件間的狀態(tài)管理，vue-router組件間的路由管理；還有組件間的傳參、消息、事件管理

查看node版本：node -v

查看npm版本：npm -v

安裝vue-cli：npm install -g @vue/cli

查看vue版本：vue --version

在當(dāng)前目錄創(chuàng)建vue工程：vue create project-name，使用上線箭頭和空格鍵進(jìn)行選定

在項目目錄中使用npm run serve命令運(yùn)行項目

使用可視化方式創(chuàng)建項目：vue ui

項目目錄下public目錄下index.html文件為項目入口文件，src目錄下的main.js為主要框架腳本：使用import Vue from 'vue';import App from './App.vue';import router from './router';import store from './store'//此為vuex組件;然后直接在實例中進(jìn)行綁定，最后使用.$mount('#app')掛載到app元素上

src目錄下的views目錄中存放不同的頁面視圖文件

components目錄下存放模塊化的課被重復(fù)引用的組件

項目根目錄下package.json中記錄了項目及依賴所有的配置和版本，其中的scripts鍵下存放的是開發(fā)中在命令行下使用的命令，使用npm run command來執(zhí)行

?

條件渲染：v-if v-else v-else-if，v-show

列表渲染：v-for <div v-for="item in list">

style和class 的綁定：style可寫成對象形式，然后通過屬性綁定v-bind進(jìn)行綁定；class綁定寫成對象形式，鍵名是真是的class名稱，值為布爾值或表達(dá)式，或者可以使用數(shù)組直接輸出字符串，也可以用對象表達(dá)式+數(shù)組混合的方式

new?Vue({
????el:'#id',
????data:{
????????msg:'hello?vue'
????},
????watch:{
????????msg:function(new_value,old_value){
????????????console.log(new_value);
????????????console.log(old_value);
????????}
????},
????computed:{
????????msg1:function(){
????????????return?'msg1_value';
????????}
????}
})

watch用于監(jiān)聽跟蹤一個值的變化，computed則監(jiān)聽return中引用的屬性值的變化，然后計算新的屬性值

可以將new?Vue的實例復(fù)制給一個變量?var?app，然后在chrome命令行工具中使用app.msg來對vue實例進(jìn)行操作

### vue的計算屬性和監(jiān)聽屬性的方法

- computed

- watch

### vue文件結(jié)構(gòu)

- template

- script

- style

### 模板語法

- v-html和v-text已經(jīng){{}}書寫方式的區(qū)別

- v-bind和v-on以及縮寫

最基本的一個使用方式

new Vue({

el:'#id',
data:{
????msg:'hello?vue'
}

})

www.bootcdn.cn靜態(tài)資源cdn服務(wù)

vue2.x知識體系思維導(dǎo)圖