-
<script type="text/javascript" src="https://cdn.fastadmin.net/assets/addons/ask/js/all.min.js?v=1.0.95" merge="true"></script>
aaaaaaaaaaaaaaaaaaaaa
<script type="text/javascript" src="https://cdn.fastadmin.net/assets/addons/ask/js/all.min.js?v=1.0.95" merge="true"></script>
查看全部 -
環(huán)境和工具介紹
開發(fā)工具：WebStorm或者VScode，推薦使用WebStorm，因為它可以集成更多的開發(fā)工具在里面（比如Git終端，而且有圖形化界面，操作方便），VScode也提供了一些智能化的插件，免費的、微軟開發(fā)的編輯器，有語法高亮、語法提示，以及版本控制都可以集成在該編輯器里。
開發(fā)環(huán)境：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。這樣以后下載前段依賴時就會很快。
調試環(huán)境：推薦使用谷歌.
vue的Chrome插件：下載網(wǎng)址https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd（谷歌可以很方便查看vue組件的狀態(tài)）
工程環(huán)境：vueCli工具，下載命令npm i -g vue-cli，查看vue版本vue --version
查看全部 -
查詢node版本：node -v
查詢npm版本：npm -v
全局安裝vue-cli工具：npm install -g @vue/cli
查詢vue-cli版本：vue --version
創(chuàng)建vue工程一：
進入創(chuàng)建工程的目錄下面
vue create hello-world
敲空格選擇：Router，Vuex，CSS Pre-processors
history：yes
CSS Pre-processors：Sass/SCSS
Airbnb config
保存時對代碼做檢查
默認配置
以后的項目按照以上步驟創(chuàng)建--NO
創(chuàng)建vue工程二：
vue ui
查看全部 -
F12開發(fā)者工具-console窗口。通過var? vm = new VUE({....})? ?vm.屬性名來調試屬性值或者參數(shù)值。
綁定class:??
混合模式：
:class="{'msg','color',{'big':item.big>0}}"? ? ?
簡單模式：
:class="{'color':true}"? ?或者? :class="{'msg','color'}"
綁定style:
:
查看全部 -
Vue:綁定屬性和事件：
屬性：v-bind:? 縮寫為“：”冒號
事件：v-on: 縮寫為“@”艾特
查看全部 -
<!DOCTYPE?html> <html> <head> <meta?charset="utf-8"> <title>vue練習</title> <script?src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.common.dev.js"></script> </head> <body> <div??id="app"> <h1>你好</h1> <div?class="bg"> {{msg}} </div> {{?count?}} {{(count+2)*10}} <div?id="bi"> <a?v-bind:href="url">百度</a> </div> <div?v-html="template"></div>???????????? <button?type="button"?v-on:click="submit()">加</button> </div> <script> new?Vue({ el:?'#app', data:?{ msg:?'hello?vue!!', count:?0, url:?'https://www.baidu.com', template:?'<div>你好磨課+++</div>' }, methods:?{??????????????????? submit?:function(){ this.count++; } } }) </script> </body> </html>查看全部 -
<!DOCTYPE?html><html> <head> <meta?charset="utf-8"> <title>vue練習</title> <script?src="? </head> ?????<body> ?????<div?class="bg"?id="app"> <h1>你好</h1> {{msg}} ?????</div> <script> new?Vue({ el:'.bg', data:{ msg:'hello?vue!!' ???} }) ??????</script> ???? </body> ?</html>查看全部 -
nvm安裝
Chrome瀏覽器vue調試工具安裝
nhdogjmejiglipccpnnnanhbledajbpd
查看全部 -
關于vue的一些問題查看全部
-
新建views/xx.vue
router.js
import?xx from?'../views/xx.vue'
{path：
name:
component:
}
? ? ? App.vue
<router-link?to="/xx">xx</router-link>
查看全部 -
創(chuàng)建：cmd>vue create 或者 vue ui
目錄：public/src/package.json
查看全部 -
watch (異步場景：監(jiān)聽一個變量/常量的變化）
computed（數(shù)據(jù)聯(lián)動：Vue實例中的多個變量，Vue實例中變量變化時將全局觸發(fā)）
watch:?{
????????????????msg:?function(newval,?oldval)?{
????????????????????console.log("newval?is:"?+?newval)
????????????????????console.log("oldval?is:"?+?oldval)
????????????????}
????????????},
????????????computed:?{
????????????????msg1:?function()?{
????????????????????return?'computed:'?+?this.msg?+?','?+?this.another?+?','?+
????????????????????????arr
????????????????}
查看全部 -
template script style
{{msg}}
{{js表達式}}
<div v-html="template"> //實現(xiàn)語句
<a v-bind:href="url"> //v-bind綁定屬性data，簡寫直接寫：(:href="url")
<button v=on:click="submit()"> //v-on綁定事件methods，簡寫@（@click)
new Vue({
????this.count++;? //this=Vue
})
查看全部 -
git簡介 創(chuàng)建項目 git clone，git init 創(chuàng)建分支，推送分支，合并分支 刪除分支，回退版本 git clone git@github.com:xxxxxx.git （克?。? git status (查看狀態(tài)) ls (查看列表) git branch 分支名 （創(chuàng)建分支） touch 文件（創(chuàng)建文件） git add . (把工作時的所有變化提交到暫存區(qū)) git commit -m "文字說明" (提交緩沖區(qū)的所有修改到倉庫) git push (將文件推送到遠程倉庫) git checkout -b 分支名 (創(chuàng)建一個分支并切換到創(chuàng)建的分支上) git checkout 分支名 (切換到某一個分支上) git merge 分支名 (合并某一分支上的內(nèi)容到當前分支上) git branch -D 分支名 (刪除本地某一個分支) git push origin :分支名 (刪除遠程倉庫的某一個分支) git reset --hare head^ (退回到上一個最近的版本) git reset --hare 版本號或者HEAD@{數(shù)字} (退回到指定的版本) git log (按提交時間列出所有的更新) git reflog (查看所有分支的所有操作記錄)查看全部
-
調試： Chrome的Vue插件 輸出：console.log 阻塞：alert() 斷點：debugger。配合：methods中定義output方法使用（output方法中進行console.log等操作皆可），在程序暫停后在terminal中執(zhí)行this.output()即可。 mounted：它是Vue的生命周期，當組件掛在完成后會執(zhí)行，可綁定window.vue，綁定后將代表這個組件。查看全部
舉報