-
vue-cli工程化工具
【一】vue-cli創建工程的兩種方法
全局安裝vue-cli工具的命令：npm install -g @vue/cli，-g表示全局安裝。
創建vue工程：首先需要進入到創建工程的目錄
創建vue工程命令：vue create 項目名（小寫字母、可以有橫線和下劃線）
回車后，會出現vue-cli的一些選項，如果使用default就會創建默認的工程，第二個則是手動選擇創建工程，手動選擇會出現很多選項，首先會安裝一些配套的組件，比如路由組件，選擇可以按空格就選擇了，這里選擇一些常用的組件，綠色就代表選中了。
這里的ESLint代表平時寫代碼的一些規范
這里選擇保存時對我們的代碼進行一個檢查。第二個表示更新時或者提交時做一個代碼的檢查。
如果安裝的比較慢的話，可以使用ctrl+c來取消安裝，然后進入要創建項目的目錄中，使用c npm安裝項目所需要的依賴。
運行項目的命令：npm run serve
第二種創建vue工程的命令：vue ui,然后粘貼地址到瀏覽器中，通過圖形化界面方式創建vue工程化項目。
如果創建了項目，在Projects中就會顯示這個項目。
【二】vue-cli創建的工程目錄
查看安裝了那些插件
查看vue項目依賴
vue項目的運行
src文件夾：放置源文件。
public：放置的公共文件。
node_modules library root：前端依賴。
項目的入口：public文件夾下——>index.html（有個id為app的div),所有的js的vue實例都綁定到app的div上，而且這里加載了兩個東西，一個是router,一個是store，store就相當于vuex狀態管理，store是幫助管理組件之間的狀態。這里的$mount('#app')可以理解為之前學習的Vue的el，這里就是將這個js綁定到index.html上。
views：相當于頁面的視圖（Home.vue首頁，About.vue關系頁），而且Home.vue中引入了components/HelloWorld.vue這樣一個組件。
運行項目方式：有個叫做package.json,它相當于對整個文件進行解釋說明的一個文件，比如：項目的名稱，項目的版本號，打包使用到的一些依賴，開發所使用到的依賴，以及它們所使用到的版本，這里需特別注意"scripts"這里面是開發中長使用的命令。
npm run server
npm run build
npm run lint
這里只需要了解三個目錄（public、src、package.json)、其他相當于配置文件，簡單了解即可。
查看全部 -
條件渲染、列表渲染、Class與Style綁定
【一】條件渲染：根據條件進行渲染，比如中秋節頁面呈現中秋節樣式，過了中秋節就沒有這種樣式了。
條件渲染常用指令：
v-if（還有v-else v-else-if v-show等）：標簽里屬性前寫，后面的值是Javascript表達式用來做一些判斷，如果滿足，則該標簽起作用。
后續會講解v-if和v-show的使用場景及區別。
v-show：它的功能和v-if相似，如果v-show不成立，相當于給標簽添加上了display:none。
【二】列表渲染：類似于Java中for循環。比如：一個星空頁面會有很多很多<html>標簽，如果手寫很麻煩，這里就可以通過列表渲染實現這樣情景。
列表渲染常用指令：
v-for：可以遍歷vue實例中數組的每一項。
可以渲染對象數組
v-for與v-if結合使用：
v-for高階應用：
【三】Class與Style綁定
Style的綁定：舉例使用v-bind:綁定標簽的style樣式，它與原來不適用v-bind是有區別的，原來是，使用v-bind后，v-bind:，也可以不使用行內式（可以寫在vue實例的data里）。還可以添加一些其它的樣式，但是如果Key中有-，就需要要兩邊添加''，其中key也可以是駝峰式命名方法，這樣就不用給key添加''了。
Class的綁定：給class綁定值，擁有多種寫法。
也可以使用判斷
查看全部 -
計算器與偵聽器（比較常見和常用）
計算屬性關鍵詞：computed
偵聽器關鍵詞：watch
watch的使用：首先在Vue實例中聲明，比如偵聽的是msg變量，后邊寫個function，這個msg可以傳入兩個變量進來，一個是新值，一個是舊值，可以通過console.log('newval is:'+newval)在調試窗口中打印輸出,當msg值發生變化時這個function就會被執行。
打開前端調試窗口
常見的調試前端Vue的方式（在調試窗口中可以對代碼進行改變，但愿有頁面代碼不會改變），通過給Vue一個變量，然后就可以在調試窗口中使用該變量，這個給app變量的msg做一個變化，看偵聽的函數會不會起作用。
computed的使用：計算的值必須都在Vue實例的data中聲明的，也就是return返回的值，例如聲明一個<p>標簽，標簽內容聲明為{{msg1}}，Vue實例中，computed的key為msg1（這個msg1可以沒有在data里聲明），然后定義function函數，return 'computed:'+this.msg，如果msg改變則msg1也跟著改變。
watch和computed里的function的區別：watch的function只能監聽watch的key指定值（msg）的變化，但是computed不一樣，只要在return中里一個值發生變化該函數都會執行。
如下圖，改變了another的值該函數也執行了，在窗口調試中，可以通過shift+回車，來實現多個語句的一起執行。
監聽的值一定都是Vue實例中data的值，如果實例data值之外的值則不會監聽，也就是如果改變這個值，頁面不會被渲染。
但是在這種情況下如果改變在Vue實例中data之中的值，那么那個不再data之中的值也會跟著被改變。
watch（異步場景）和computed（數據聯動）的使用場景：watch通常來說監聽的一個變量，這個變量可能是一個單一的變量也可能是一個數組，而computed可以監聽很多個變量，但是這個變量一定是在vue實例中的。
查看全部 -
模板語法
【1】Vue文件結構（template,script,style)
template:相當于模板，類似于html中的標簽。
script:js的腳本代碼。
style:樣式代碼。
【2】模板語法包含插值、指令（指令縮寫）
插值：可以在標簽內的{{}}中進行插值，并且該{{}}支持表達式運算。
如果插入的值為標簽，可以通過如下方式顯示標簽。
v-bind:為頁面標簽屬性綁定數據，可以通過在標簽屬性前添加v-bind:（v-bind可以用:代替），然后給改屬性起個名稱，在Vue實體中給該名稱一個數據值即可。
谷歌調試
通過選擇Elements，就可以看到標簽的頁面的具體信息，這里div的id為app-bind
Vue中函數的執行方式，例如點擊事件是通過v-on:click="函數名"（這里還有一種便捷方式寫法，也就是把v-on用@代替）,然后需要在Vue實體中聲明key為methods，如下圖。
查看全部 -
推薦使用vue的方式：cdn的方式，https://www.bootcdn.cn/。
引入vue方式：如果是在內網上使用，就把vue下載下來，之后引入到<head>中。推薦使用BootCDN這種方式，然后搜索vue庫，這里選擇壓縮版本min（min如果只是使用這個庫，而不是去調試)最好不要使用beta版本，可能會出現一些問題。
使用vue:在body中的<script>標簽如下，使用class方式綁定標簽<div>,該情況下會優先綁定頁面上第一個class為指定的元素，第二個不會綁定?？梢允褂胕d選擇器方式解決。
如果想使兩個class名相同的標簽有相同的內容，可以通過設置一個容器給它們包起來，這樣容器中的標簽的內容就都會是綁定的內容。如下
查看全部 -
vue框架知識體系
【1】基本概念（條件渲染、列表渲染、事件綁定、聲明周期、模塊化思想）
【2】組件的使用思想及使用方式（路由組件Vue-router、前后端分離會使用到http請求，而http客戶端請求最常用的就是Vue-resource插件（官方不推薦使用，但是它仍然很好用，官方推薦使用的是Axios。
【3】常用API
查看全部 -
環境和工具介紹
開發工具：WebStorm或者VScode，推薦使用WebStorm，因為它可以集成更多的開發工具在里面（比如Git終端，而且有圖形化界面，操作方便），VScode也提供了一些智能化的插件，免費的、微軟開發的編輯器，有語法高亮、語法提示，以及版本控制都可以集成在該編輯器里。
開發環境：Node.js。
nvm介紹：node的版本管理工具（前端依賴庫之間的兼容性問題）。
——nvm命令——
nvm --version查看nvm版本
nvm --help查看幫助
nvm ls查看本地安裝node版本
nvm ls-remote查看nvm服務器上有哪些版本
nvm install v11.0.0安裝某版本的node
nvm use v8.12.0切換nvm版本
注意：下載npm包時，可以通過設置鏡像為淘寶的鏡像，可以下載快一些。命令為：npm install -g cnpm --registry=https://registry.npm.taobao.org。這樣以后下載前段依賴時就會很快。
調試環境：推薦使用谷歌.
vue的Chrome插件：下載網址https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd（谷歌可以很方便查看vue組件的狀態）
工程環境：vueCli工具，下載命令npm i -g vue-cli，查看vue版本vue --version
查看全部 -
課程安排
Vue2.x框架常用知識點——20%
Vue2.x核心技術——30%
集成Vue2.x——30%
——第二章——Vue2.x框架常用知識點
【1】認識vue：Hello Vue應用
【2】模塊語法，v-bind屬性綁定，事件綁定
【3】條件渲染、列表渲染、Class與Style綁定(渲染比較重要）
——第三章——Vue2.x核心技術
【1】認識vue-cli工具，Vue代碼規范
【2】Vue組件的調試方法（比較重要）
【3】vue-router路由,vues狀態管理(比較重要）
——第四章——集成Vue2.x
【1】介紹開發工作流workflow（單頁面、多頁面）
【2】單頁面Demo（動態表單、列表動態展示）
【3】使用Cli工具，開發常見的應用組件（比較重要）
查看全部 -
vue:很流行的前端框架，特點：易用性、靈活性、高效性。
——課程知識點
【1】Vue2.x框架常用知識點（模板語法、條件渲染、列表渲染等）
【2】Vue2.x核心技術（vue-router、vuex）
【3】集成Vue2.x
查看全部 -
查看全部
-
//test?demo?1 <!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>Document</title> ????<script?src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> ????</head> ????<body> ????????<div?id="ele_1"> ????????????<p>{{?msg?}}</p> ????????????<p>{{?msg1?}}</p> ????????????<button?@click="changeMsg()">點擊更改參數</button> ????????</div> ????????<script> ????????????var?ele_1?=?new?Vue({ ????????????????el:?'#ele_1', ????????????????data:?{ ????????????????????msg?:?0, ????????????????????msgAdd:?0 ????????????????}, ????????????????methods:?{ ????????????????????changeMsg:?function(){ ????????????????????????this.msg?+=?1; ????????????????????} ????????????????}, ????????????????watch:?{ ????????????????????msg:?function(oldM,newM){ ????????????????????????console.log(oldM); ????????????????????????console.log(newM); ????????????????????} ????????????????}, ????????????????computed:?{ ????????????????????msg1:?function(){ ????????????????????????console.log('進入computed了！'); ????????????????????????return??this.msg?+?' '+?this.msgAdd; ????????????????????} ????????????????} ????????????}) ????????</script> ????</body> </html>查看全部 -
watch 屬性中對當前實例中的data值監聽可傳入兩個參數：
改變之前的值
改變之后的值
watch 和 computed 的區別：
watch 是對實例中data的某個參數值得變化進行監聽
computed 是在計算內容中的包含的值發生變化時才會觸發，觸發后會對當前值重新計算并返回參數。（即： 計算的值會進行緩存，只有在計算的參數值發生變化時才重新計算并返回）
查看全部 -
1查看全部
-
1，安裝環境nvm
2,chrome? vuejs tooldev
3,cdn
查看全部 -
常用指令： 列表渲染
查看全部
舉報