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

1. 引入vue.js文件（CDN文件，便捷）

2. 新建元素

3. 創(chuàng)建vue對象，綁定元素，賦值

   
   

new?Vue({
?//指定綁定的dom元素
?el：'',
?//vue對象定義的數(shù)據(jù)變量
?data:?{
?????//變量名和變量值
?????msg:?'hello?vue'
?}
})

軟回車：shift + enter，這樣就不會因為回車而執(zhí)行。

引用在線的庫時，如果不是要調(diào)試這個庫，可以引用壓縮版的，即.min...，而且能夠節(jié)約網(wǎng)絡響應的時間。

vue的開發(fā)環(huán)境

集成場景！

import?store?from?'@/store'
export?default?{
????name:?"info",
????store,
????data?()?{
??????return?{
??????????msg?:?'hello?vue?in?china'
??????}
????},
????mounted?(){
????????window.vue?=?this;
????},
????methods:?{
????????add?()?{
????????????console.log('add?event?from?info!');
????????????alert(1)
????????????debugger
????????????store.commit('increase')
????????},
????????output?()?{
????????????console.log('this?is?output')
????????}
????}
}

<script>
????import?store?from?'@/store'
????export?default?{
????????name:?"info",
????????store,
????????data?()?{
??????????return?{
??????????????msg?:?'hello?vue?in?china'
??????????}
????????},
????????methods:?{
????????????add?()?{
????????????????console.log('add?event?from?info!');
????????????????alert(1)
????????????????debugger
????????????????store.commit('increase')
????????????}
????????}
????}
</script>

this.msg

import?store?from?'@/store'
export?default?{
????name:?"info",
????store,
????data?()?{
??????return?{
??????????msg?:?'hello?vue?in?china'
??????}
????},
????methods:?{
????????add?()?{
????????????console.log('add?event?from?info!');
????????????alert(1)
????????????debugger
????????????store.commit('increase')
????????},
????????output?()?{
????????????console.log('this?is?output')
????????}
????}
}

調(diào)試方式

console.log? ? ?console.error

alert

debugger

@ 代表src 目錄 是在vue 配置文件中 配置的

<template>
??<div?class="about">
????<h1>This?is?an?about?page</h1>
??</div>
</template>
<script>
??import?store?from?'@/store'
??export?default?{
????name:?"about",
????store,
????data?()?{
?????return?{
???????msg?:?store.state.count
?????}
????}
??}
</script>

import?Vue?from?'vue';
import?Vuex?from?'vuex';

Vue.use(Vuex);

export?default?new?Vuex.Store({
??state:?{
????count?:?0
??},
??mutations:?{
????increase?()?{
??????this.state.count++
????}
??},
??actions:?{

??},
});

????????<button?type="button"?@click="add()">add</button>
????</div>
</template>

<script>
????import?store?from?'@/store'
????export?default?{
????????name:?"info",
????????store,
????????methods:?{
????????????add?()?{
????????????????console.log('add?event?from?info!');
????????????????store.commit('increase')
????????????}
????????}
????}
</script>

npm run serve

vuex 規(guī)則

狀態(tài)管理模式

集中管理

統(tǒng)一的規(guī)則

新建文件 vuex 會自動生成store.js 文件

菜單導航

評論彈幕

都是用多個views 構成，用戶的操作會帶來視圖的狀態(tài)的變化 state? ?，然后會進行更新，actions

自己能看懂的代碼?

別人能看懂的代碼

格式與命名規(guī)范

https://cn.vuejs.org/v2/style-guide/

什么是組件化？

獨立的，可復用的，整體化的

為什么要組件化？

實現(xiàn)功能模塊的復用；

高執(zhí)行效率；

開發(fā)單頁面復雜應用；

如何進行拆分？

300行原則；復用原則；業(yè)務復雜性原則；

組件帶來的問題：

組件狀態(tài)管理vuex;多組件的混合使用，多頁面，復雜業(yè)務（vue-router）;

組件間的傳參，消息，事件管理（props, emit/on, bus）

package.json

安裝的依賴包 版本號