安裝
使用npm安裝，全系統(tǒng)就會多一個vue命令。注意文件夾權(quán)限，否則報錯
npm install -g @vue/cli
使用
在要創(chuàng)建的文件夾下，會在該文件夾下創(chuàng)建一個新文件夾vue_cli_test。選項：Vue2---npm（選yarn會報錯，如果要改回來，則vi ~/.vuerc 將yarn改為npm）
vue create vue_cli_test
運(yùn)行
cd vue_cli_test
npm run serve
默認(rèn)端口號是8080，可能得改
停止
crtl+c
目錄介紹
見ipad筆記 和vscode代碼注釋
開發(fā)注意事項
-
抽取組件，實(shí)現(xiàn)靜態(tài)頁面
注意：1.一個組件實(shí)現(xiàn)一個最小的功能 2.List拆成多個Item子組件
-
數(shù)據(jù)放在那個vue
1.比如List中每個item的數(shù)據(jù)，是寫在List的容器，還是寫在item，還是其他地方(放入app才能傳值)
2.數(shù)據(jù)在哪個vc，方法就在哪個vc
v-model使用在標(biāo)簽綁定參數(shù)（綁定的參數(shù)是該標(biāo)簽的value） 雙向綁定 但不要綁props傳過來的值
胡子語法僅顯示值
v-bind 簡寫為: ，一般用在props傳值，或者在標(biāo)簽內(nèi)部使用解析式如:key="todoObj.id"。或者用在:checked="todoList.length === doneTotal"
@、v-show等就是把click show等方法提取出來 起個名字在下面實(shí)現(xiàn)
watch操作 監(jiān)視，只要監(jiān)視的對象發(fā)生改變 則進(jìn)行一次操作，在app中
胡子語法中的數(shù)據(jù)來源只能是：data、props、computed。沒有props、computed，就必須在data中寫
自定事件適用于 子組件→父組件 傳值，在父組件給子組件綁定事件，然后在父組件中回調(diào)，子組件中觸發(fā)（子傳父（兄弟組件）用全局事件總線替代、父傳子用props替代）
全局事件總線：A接受B的數(shù)據(jù)，則A給總線（
on）+寫回調(diào)，B觸發(fā)事件傳數(shù)據(jù)。
父傳子：直接props，任意組件間：全局事件總線
綁定事件兩種寫法
1.已經(jīng)在methods中寫了,直接this.deleteTod作為第二個參數(shù)
this.$bus.$on('deleteTod',this.deleteTod)
2.es6現(xiàn)場實(shí)現(xiàn),使用箭頭函數(shù)
this.$bus.$on('hello', (data)=>{
console.log("school收到了：", data)
})
- 一些trick
1.v-show(可直接根據(jù)里面表達(dá)式?jīng)Q定是否顯示該組件)，則引號中是表達(dá)式，原生的如value，需要加:，則引號里面才是表達(dá)式！??！這是v-bind的原理
<input v-show="todo.isEdit" :value="todo.Title">
2.拿到input輸入的值
1.方法中
xxx(接受的值,e,...)
data = e.target.value
2.使用v-model雙向綁定 常用?。?<input type="text" placeholder="enter" v-model="searchName"/>
--------
data(){
return{
searchName:""
}
},
--------
methods:{
search(){
console.log(this.searchName)
}
}
拿到標(biāo)簽給標(biāo)簽添加屬性，需要給標(biāo)簽ref="hty",------.fouce()表示給他一個焦點(diǎn)，但是需要加一個nextTick外殼，保證刷新成功
nextTick：指dom跟新后再調(diào)用里面的。一般用在改變數(shù)據(jù)后要基于新DOM進(jìn)行標(biāo)簽操作時使用
this.$refs.hty.fouce()
- ajax請求
npm i axios
get
// 發(fā)送請求 http://localhost:5001/students
axios.get('http://localhost:5001/students').then(
// 成功
response => {
// response中的data才是需要的值
console.log("成功",response.data)
},
// 失敗
error => {
// error.message里面是具體的原因
console.log("失敗",error.message)
}
)
當(dāng)get帶參數(shù)時，使用ES6模板變量語法${this.searchName}。 ``。
search(){
// 發(fā)起請求https://api.github.com/search/users?q=xxx
// xxx需要是this.searchName 因此使用es6語法-模板字符串
// 特點(diǎn) 引號是`` 傳參是${this.searchName}
axios.get(`https://api.github.com/search/users?q=${this.searchName}`).then(
// 成功
response => {
// response中的data才是需要的值
console.log("成功",response.data)
},
// 失敗
error => {
// error.message里面是具體的原因
console.log("失敗",error.message)
}
)
}
出現(xiàn)跨域錯誤CORS,最好在服務(wù)器解決，腳手架也給了解決方式。
- 引入第三方css文件，最好在html中引入，這里用相對路徑寫法
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
而不是在app.vue中import，import會有嚴(yán)格檢查，css中的字體什么的沒有就報錯。
- 遍歷時v-for時，必須要有key在,不在循環(huán)中，就得提出來 :key+表達(dá)式
<div class="card" v-for="user in users" :key="user.id">
<font color='red'>一個標(biāo)準(zhǔn)的v-for:屬性值用動態(tài)綁定(:或v-bind),標(biāo)簽內(nèi)容用胡子語法</font>
<div class="card" v-for="user in users" :key="user.login">
<a :href="user.html_url" target="_blank">
<img :src="user.avatar_url" style='width: 100px'/>
</a>
<p class="card-text">{{user.login}}</p>
</div>
路由
- 先裝插件 注意是插件 用的時候先import然后use。必須制定版本為3，才能在vue2中用，現(xiàn)在默認(rèn)版本是4了。
npm i vue-router@3
使用步驟
1.main.js中 這里配置一次即可
// 引入router插件
import VueRouter from "vue-router"
// 引入router文件
import router from "./router"
// 是一個插件 因此需要use
Vue.use(VueRouter)
// 新建一個router文件夾 使用了router的項目都有這個文件夾
// 創(chuàng)建實(shí)例
new Vue({
el:"#app",
render: h => h(App),
// 配置路由
router:router
2.router文件夾中的index.js中寫路由，每次新路由都過來寫
// 該文件用于創(chuàng)建路由器
import VueRouter from "vue-router"
// 引入組件
import About from '../components/About.vue'
import Home from '../components/Home.vue'
// 需要暴露
export default new VueRouter({
// 寫路由規(guī)則
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
},
]
})
3.a標(biāo)簽轉(zhuǎn)<router-link> 另外 href變to active變active-class="active"
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
4.顯示路由指定的組件放哪 像插槽
<router-view></router-view>
<font color='red'>路由小結(jié)：將組件分為路由組件和一般組件，路由組件無需注冊，根據(jù)url的不同來顯示，放在pages文件夾中。一般組件需引入注冊，放在components文件夾中</font>
5.二級路由寫法 不要加斜杠
// 需要暴露
export default new VueRouter({
// 寫路由規(guī)則
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
// 二級路由注意 不要寫/
children:[
{
path:'homenews',
component:HomeNews
},
{
path:'homemessage',
component:HomeMessage
},
]
},
]
})
6.二級路由跳轉(zhuǎn)時 要帶上一級路由(必須帶上 不然有問題)
7.使用非a標(biāo)簽路由時時，比如button，無法使用router-link，需要使用this.$router.push
methods:{
// 點(diǎn)擊按鈕實(shí)現(xiàn)路由的方式
// 這里沒有msg 需要在綁定click時，從ul標(biāo)簽內(nèi)部拿到并傳參過來
btnRoute(msg){
// 使用$router
this.$router.push({
path:'/home/homemessage/detail',
query:{
id:msg.id,
title:msg.title
}
})
}
8.路由切換頁面后，輸入框中的內(nèi)容消失，需要保持在緩存中，使用keep-alive。其中include="HomeNews"需要緩存的組件名字。組件的name。不能在HomeNews.vue中包裹。
多個緩存頁面，則 :include="['HomeNews','HomeMessage']"
<keep-alive include="HomeNews">
<router-view></router-view>
</keep-alive>
9.路由index.js文件中配置mode:"history"后url中就沒有#了，但是在部署到nginx后需要由nginx判斷是前端路由還是后端路由。
mode:'history',
10.打包成js css。當(dāng)前工程內(nèi)生成一個dist文件夾，里面就是需要部署的內(nèi)容。
npm run build
Element UI 庫
1.安裝(也可以link引入 但是采用腳手架 建議npm i)
npm i element-ui
不用加s(官網(wǎng)加了)，本質(zhì)是一個插件
2.按需引入（見官網(wǎng)）一般在部署前替換成按需
有坑,第一步：在babel.config.js中加入.presets中寫@babel/preset-env而不是官網(wǎng)上的es2015
{
"presets": [["@babel/preset-env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
