-
vue-cli創建步驟
查看全部 -
切換項目目錄：cd /project/vue/
創建項目：vue create hello-world?或者vue create hello_world
查看全部 -
課程知識點
Vue2.x 框架常用知識點（模板語法、條件渲染、列表渲染等）
Vue2.x 核心技術（vue-router、vuex)
Vue2.x 集成入項目
課程重點
Vue2.x框架常用知識點 —— 20%
Vue2.x核心技術——30%
重點Vue2.x集成框架——30%
難點、模擬實際應用Vue2.x框架常用知識點（第二章）
認識vue：Hello Vue 應用
模塊語法，v-bind屬性綁定，事件綁定
條件渲染、列表渲染、Class與Style綁定
Vue2.x核心技術（第三章）
認識 vue-cli 工具，Vue 代碼規范
Vue組件的調試方式
Vue-rounter，vuex
vue 的路由以及狀態管理
集成Vue2.x（第四章）
簡單介紹 workflow 開發工作流
介紹單頁面、多頁面的開發方式
單頁面Demo（動態表單、列表動態展示）
使用Cli工具，開發常見的應用組件
例如登錄模塊、動態的列表渲染
開發環境
IDE（集成環境）
webstorm
可以集成更多的開發工具在里面（比如Git終端，而且有圖形化界面，操作方便）
visuals Studio Code（VS code）
提供了一些智能化的插件，免費的、微軟開發的編輯器，有語法高亮、語法提示，以及版本控制都可以集成在該編輯器里。
使用 webstorm 開發
工具常規配置
configure > Preferences
深色主題：Appearance > Theme > Darcula
應用 Apply
字體設置 Font > size
行間距 Font > Line spacing
Node.js 開發環境
nvm：Node Version Manager （Node的版本管理）
前端Node依賴庫之間的兼容問題
GitHub nvm-sh
GitHub nvm-Windows
nvm 安裝方法
Linux、macOS、Windows
Linux、macOS 可以使用 curl 命令安裝、export 配置環境變量
Windows 安裝方式
nvm-noinstall.zip： 這個是綠色免安裝版本，但是使用之前需要配置
nvm-setup.zip：這是一個安裝包，下載之后點擊安裝，無需配置就可以使用，方便。
Source code(zip)：zip壓縮的源碼
Sourc code(tar.gz)：tar.gz的源碼，一般用于Linux和macOS
nvm命令
Windows下：
nvm arch [32|64]： 顯示node是運行在32位還是64位模式。指定32或64來覆蓋默認體系結構。
-nvm install <version> [arch]：該可以是node.js版本或最新穩定版本latest。（可選[arch]）指定安裝32位或64位版本（默認為系統arch）。設置[arch]為all以安裝32和64位版本。在命令后面添加–insecure，可以繞過遠端下載服務器的SSL驗證。
nvm list [available]：列出已經安裝的node.js版本。可選的available，顯示可下載版本的部分列表。這個命令可以簡寫為nvm ls [available]。
nvm on： 啟用node.js版本管理。
nvm off： 禁用node.js版本管理(不卸載任何東西)
nvm proxy [url]： 設置用于下載的代理。留[url]空白，以查看當前的代理。設置[url]為none刪除代理。
nvm node_mirror [url]：設置node鏡像，默認為https://nodejs.org/dist/.?？梢栽O置為淘寶的鏡像https://npm.taobao.org/mirrors/node/
nvm npm_mirror [url]：設置npm鏡像，默認為https://github.com/npm/npm/archive/?？梢栽O置為淘寶的鏡像https://npm.taobao.org/mirrors/npm/
nvm ?uninstall <version>： 卸載指定版本的nodejs。
nvm use [version] [arch]： 切換到使用指定的nodejs版本?？梢灾付?2/64位[arch]。
-nvm use <arch>：將繼續使用所選版本，但根據提供的值切換到32/64位模式
nvm root [path]： 設置 nvm 存儲node.js不同版本的目錄 ,如果未設置，將使用當前目錄。
-nvm version： 顯示當前運行的nvm版本，可以簡寫為nvm v
npm 安裝
國內下載慢，可以使用 taobao 的鏡像下載各版本 node
Linux、MacOS：
npm?install?-g?cnpm?--registry-https://registry.npm.taobao.org
windows：
使用命令行方式：
nvm?node_mirror?https://npm.taobao.org/mirrors/node/ nvm?npm_mirror?https://npm.taobao.org/mirrors/npm/
安裝的目錄下修改settings.txt文件，添加如下兩行
node_mirror:?https://npm.taobao.org/mirrors/node/? npm_mirror:?https://npm.taobao.org/mirrors/npm/
安裝 node.js
查看版本 nvm list available
安裝node.js ，nvm install 版本號
使用 node.js , nvm use 版本號
同時安裝相應版本的 npm
在 DOS 下使用 npm 命令時，需要進入相應版本的 node 文件夾中。因為沒有配置該 node 版本的環境變量
調試環境
Chrome 的 Vue 插件
id輸入如下：
nhdogjmejiglipccpnnnanhbledajbpd
遇到chrome無法拖拽 crx 時，將后綴改為 zip，直接拖拽即可。
工程環境 Vue-cli
在DOS中，進入 node 版本目錄
執行如下命令，進行安裝
npm?i?-g?vue-cli
提示過期，改用如下命令
npm?install?-g?@vue/cli-init
查看全部 -
課程重點
Vue2.x框架常用知識點 —— 20%
Vue2.x核心技術——30%
重點Vue2.x集成框架——30%
難點、模擬實際應用Vue2.x框架常用知識點（第二章）
認識vue：Hello Vue 應用
模塊語法，v-bind屬性綁定，事件綁定
條件渲染、列表渲染、Class與Style綁定
Vue2.x核心技術（第三章）
認識 vue-cli 工具，Vue 代碼規范
Vue組件的調試方式
Vue-rounter，vuex
vue 的路由以及狀態管理
集成Vue2.x（第四章）
簡單介紹 workflow 開發工作流
介紹單頁面、多頁面的開發方式
單頁面Demo（動態表單、列表動態展示）
使用Cli工具，開發常見的應用組件
例如登錄模塊、動態的列表渲染
查看全部 -
為什么學
小而美（靈活的語法、靈活的開發方式）
豐富的生態（模塊、插件、開發團隊、開發資料）
社區活躍、資料完整
廣泛的應用（移動端、PC端）
vue 的流行程度
github 上的 vue 點贊排名
vue 排名第三 11萬多贊
Facebook/react 排名第四
angular.js 已在第二面
可以看到全球程序員對vue的一個態度
學習方法
看
看目錄
看出老師總結出來的知識框架
倍數看
講的慢，可以使用倍數觀看
重點看
可以挑選，觀看重點部分
記
記筆記
記重點
記討論
練習
隨堂練
作業練
實戰練
課程知識點
Vue2.x 框架常用知識點（模板語法、條件渲染、列表渲染等）
Vue2.x 核心技術（vue-router、vuex)
Vue2.x 集成入項目
查看全部 -
另外一個老師前幾章講的vue-cli：http://www.xianlaiwan.cn/learn/1173
查看全部 -
computed如果包含實例外的變量，如果只修改實例外變量，computed不會計算；當修改了實例內變量時，computed會計算，并且此時實例外變量會被更新。
查看全部 -
watch：異步場景
computed：數據聯動
查看全部 -
mac打開調試窗口
查看全部 -
實現同時渲染
查看全部 -
el對應有多個元素，會只渲染第一個元素。
查看全部 -
cdn地址：https://www.bootcdn.cn
查看全部 -
用npm下載淘寶鏡像：npm install -g cnpm --registry-https://registry.npm.taobao.org
查看全部 -
谷歌插件下載：https://chrome-extension-downloader.com
查看全部 -
var app = new Vue({
watch:{
????msg: function(newval,oldval){
????}
},
?computed:{
????msg1: function(){
return: 'computed:' + this.msg
}
}
})
console:
app.msg='new value...'
查看全部
舉報