v-html? :?
1.v-bind用來綁定數(shù)據(jù)和屬性以及表達(dá)式，縮寫為'：'
2.v-model
使用在表單中，實(shí)現(xiàn)雙向數(shù)據(jù)綁定的，在表單元素外使用不起作用
// 計(jì)算屬性 因?yàn)槭莾?nèi)部get方法所以調(diào)用時(shí)不用加小括號(hào)
//
計(jì)算屬性比方法好 因?yàn)椴还茏龆嗌俅?內(nèi)部只調(diào)用一次做緩存
?
@是v-on的縮寫?監(jiān)聽dom事件 比如 @input監(jiān)聽輸入事件
@click 監(jiān)聽點(diǎn)擊事件
?
Webpack配置注意
?
Path 引用node里的包
Path調(diào)用resolve函數(shù)可以動(dòng)態(tài)獲取絕對(duì)路徑
?
在package.json中的scripts中 引用變量名
然后 用npm run 變量名 去運(yùn)行?build:”wenpack”
Npm run
bulid 運(yùn)行時(shí) 優(yōu)先去找本地的
npm init 初始化webpack
?
一般全局webpack在開發(fā)中不用
本地webpack根據(jù)項(xiàng)目需求的版本去安裝對(duì)應(yīng)的版本??
Npm install
webpack@對(duì)應(yīng)版本--save-dev??? 3.6.0
?
DevDependencies開發(fā)時(shí)依賴
?
?
打包c(diǎn)ss時(shí)?直接在入口require 然后安裝對(duì)應(yīng)的依賴在webpack配置
?
對(duì)于打包不同的文件 有不同的規(guī)則需要
?
打包圖片時(shí)因?yàn)檎也坏铰窂?需要在webpack中配置
publicPath:'dist/'
對(duì)圖片的格式進(jìn)行hash處理 防止沖突 在圖片配置中設(shè)置
img/[name].[hash:8].[ext]'
?
?
網(wǎng)頁兼容性
Es6轉(zhuǎn)換es5
npm install--save-dev babel-loader@7 babel-core babel-preset-es2015
?
修改presets: ['es2015']
?
?
?
安裝vue后要去webpack中配置vue?因?yàn)関ue默認(rèn)是用runtime vue.js
要編譯 網(wǎng)頁顯示 需要用esm.js
?
?
開發(fā)vue文件?需要install vue-loader vue-template-complier
然后配置webpack? 才可以識(shí)別 vue的版本改為13.0.0 合適的版本 看需要
?
在webpack配置文件中的resolve中 配置extendions [‘.js’]?文件可以實(shí)現(xiàn)不加后綴名引入
?
?
plugins
：插件?用來擴(kuò)展webpack的功能
?
?
打包html的plugins
Npm install html-webpack-plugin–save-dev
?
需要在webpack配置文件中引入html-webpack-plugin
然后進(jìn)行模板配置
?
?
Js壓縮所需要的plugin 丑化是要發(fā)布的時(shí)候才用開發(fā)階段不推薦
Npm install uglifyjs-webpack-plugin@1.1.1–save-dev
?
若安裝不了 則npm i -D uglifyjs-webpack-plugin
然后再package.json改版本號(hào)為1.1.1 然后npminstall
?
?
Cli2腳手架中使用對(duì)應(yīng)的 webpack版本是3.6.0? dev-sever對(duì)應(yīng)版本是2.9.3
Vue init
webpack 項(xiàng)目名稱
?
搭建本地服務(wù)器
Npm install webpack-dev-server@2.9.3–save-dev
contentBase 決定為哪個(gè)文件夾服務(wù) 默認(rèn)是根文件夾
port 端口號(hào)
inline頁面實(shí)時(shí)刷新
historyApiFallback:在Spa頁面 依賴html的history模式
?
在webapck配置文件的script配置命令"dev": "webpack-dev-server--open",
--open自動(dòng)打開
?
?
Webpack配置之配置分離
開發(fā)時(shí)的依賴dev
生產(chǎn)時(shí)依賴prod
公共依賴base
?
npm install
webpack-merge --save-dev 安裝工具進(jìn)行合并依賴
?
在devconfig.js中配置 拉取對(duì)應(yīng)
const WebpackMerge= require('webpack-merge');
const baseConfig = require('./base.config.js')
module.exports = WebpackMerge(baseConfig,{
? devServer:{
??? contentBase:'./dist',
??? inline:true,
? }
})
?
然后再package.json中配置
"dev":"webpack-dev-server --open --config ./build/dev.config.js"
????????????? 打包指定的上一層目錄下../?????
path :path.resolve(__dirname,'../dist'),
?
?
vuecli 腳手架安裝
npm install-g @vue/cli
?
拉取舊版本
Npm install-g @vue/cli-init
?
初始化
Vue init
webpack 項(xiàng)目名稱
?
初始化?ES-lint是只編程規(guī)范限制?關(guān)掉限制的話 到index.js改為false
?unit單元測(cè)試 一般不用
Js以前在瀏覽器才能跑起來 現(xiàn)在直接用node加js名稱 跑
?
Babelrc 是對(duì)瀏覽器兼容的一些配置
?
兩種模式
Runtime-coplier之后的開發(fā)如果還想用到template 就使用它
Runtime-only：之后的開發(fā)使用的是.vue文件開發(fā) 就使用它
[if !supportLists]1.?????[endif]性能更高2. 代碼量更少
?
?
Vci3的創(chuàng)建?vue? create項(xiàng)目名稱????
Vue ui 實(shí)現(xiàn)用戶界面管理項(xiàng)目
?
若想在js文件實(shí)現(xiàn)配置 則需要新建一個(gè)vue.config.js? 在里面進(jìn)行配置 導(dǎo)出modules.export
?
?
?
?
箭頭函數(shù)中的this是如何查找
向外層作用域中 一層層的查找this? 知道this有定義
?
?
Vuerouter學(xué)習(xí)
?
首先 必須要安裝對(duì)應(yīng)的vuerouter 插件 然后 引入 安裝
//配置路由信息
import Vue from 'vue'
import Router from 'vue-router'
// 1.
通過vue.use安裝插件 導(dǎo)入vue
Vue.use(Router);
//2.
創(chuàng)建vuerouter對(duì)象
const routes = [];
constrouter = new VueRouter({
? routes
})
// 3.
將router對(duì)象傳入到vue實(shí)例中
export default? router
?
最后在main.js中使用配置router? 配置映射關(guān)系?一個(gè)映射就是一個(gè)對(duì)象
?
使用vuerouter的步驟是1.創(chuàng)建路由的組件2.配置路由的映射3.使用router-view和router-link
?
Router-link渲染為一個(gè)a標(biāo)簽
Tag=button 是渲染成一個(gè)按鈕 就不是默認(rèn)渲染成a標(biāo)簽了replace不可返回按鈕
active-class="active" 意思是把默認(rèn)的激活類名改為active或者在配置文件改
?
?>首頁
關(guān)于
?
Redirect屬性:默認(rèn)跳轉(zhuǎn)的網(wǎng)頁
在newrouter里 mode：history 可以去掉網(wǎng)頁url上的#
?
Vuerouter在全局加了一個(gè)$router屬性用來跳轉(zhuǎn)url this.$router.push
?
?
動(dòng)態(tài)路由學(xué)習(xí)p
path: '/user/:userId',
component: User,
?
User組件中
// route當(dāng)前哪個(gè)活躍
return this.$route.????? .userId;
?
動(dòng)態(tài)綁定
?
懶加載 用的時(shí)再加載 加快速度
const Home = () =>? import('../components/Home')
const About = () =>?import('../components/About')
const User = () =>?import('../components/User')
?
?
query查詢 ？
<router-link :to="{path:'/profile',query:{name:'linhuan',id:'001'}}">檔案</router-link>或者通過button事件
再通過
{{$route.query.id}}
?
?
Router全局守衛(wèi)
router.beforeEach((to,from,next)=>{
? document.title =to.matched[0].meta.title;
? next(); //next必須有
})
?
meta為每個(gè)組件的屬性
aftereach 后置鉤子
?
?
beforeRouterleave? 記錄離開之前 當(dāng)前組件的狀態(tài) 下次回來時(shí)回到這個(gè)時(shí)刻
有next一般都要用next? 要在homevue中路徑加入activated() {
? console.log('activated');
? this.$router.push(this.path)
},
?
beforeRouteLeave (to, from, next) {
? //導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
? //
可以訪問組件實(shí)例`this`
}
actived和disactived 只有在組件保持了keep-alive時(shí)才有效 keepalive保持只創(chuàng)建一次
?
keep-alive的兩個(gè)屬性
include 包含的才不會(huì)重復(fù)渲染?exclude?排除組件
?
tagbar項(xiàng)目
[if !supportLists]1.?????[endif]在style 標(biāo)簽中引入css @import指令
?
Css樣式
Flex 水平 分布
vertical-align: middle; //設(shè)置圖片與文字直接無縫隙
?
components里面放公共的組件
獨(dú)立的組件放在view里面
?
?
indexOF? 注釋：indexOf() 方法對(duì)大小寫敏感！用來判斷path是否為當(dāng)前活躍route
注釋：如果要檢索的字符串值沒有出現(xiàn)，則該方法返回 -1。
?
v-bind ：?如果過于復(fù)雜 可以放在一個(gè)methods或者計(jì)算屬性中
ActiveStyle是一個(gè)計(jì)算屬性 動(dòng)態(tài)綁定 然而v-model是和表單有關(guān)的動(dòng)態(tài)綁定
?
?
路徑取別名 在webpack公共配置里 respsolve 配置 用的時(shí)候加~
?
?
Promise學(xué)習(xí)
[if !supportLists]1.?????[endif]// promise本身是一個(gè)函數(shù) 兩個(gè)參數(shù)也是函數(shù)?resolve里面參數(shù)data 代碼放在then里面進(jìn)行處理?箭頭函數(shù)只有一個(gè)參數(shù)時(shí)可以省略括號(hào)
[if !supportLists]2.?????[endif]Reject處理請(qǐng)求失敗?失敗后用catch捕獲接收
?
All方法傳入的是一個(gè)數(shù)組 []可以放入多個(gè)請(qǐng)求 當(dāng)多個(gè)請(qǐng)求都完成時(shí)才執(zhí)行then
?
Vuex
[if !supportLists]1.?????[endif]安裝2.使用3.掛載在main.js
?
[if !supportLists]2.?????[endif]直接通過mutation來修改公共屬性 詳情見代碼?兩種提交風(fēng)格
?
State? 公共屬性
mutations 一些處理方法
getters 類似于計(jì)算屬性 處理好的值放在里面 再由$store調(diào)用
getters里面的屬性要傳參數(shù) 必須返回一個(gè)函數(shù) 該函數(shù)的參數(shù)就是動(dòng)態(tài)填入的值
?????? fifter過濾函數(shù) 過濾一些不滿足條件的?find找到條件符合的函數(shù)
[if !supportLists]3.?????[endif]修改store里的state 都是通過action 添加到state里
Mutation里的函數(shù)的第二個(gè)參數(shù) 是一個(gè)值 而getters中的第二個(gè)參數(shù)是getters本身
incrementCount(state,count){
? state.counter +=count;
}
4.Vuex的響應(yīng)式系統(tǒng)中??新添加的屬性不會(huì)響應(yīng)雖然可以添加到數(shù)組中 若想要響應(yīng)直接用 vue的set方法 刪除則用Vue的 delete方法
// 官方推薦寫法
this.$store.commit(INCREMENT)?
在另外一個(gè)js文件定義好并導(dǎo)出
?
[if !supportLists]4.?????[endif]action 類似于mutation?就是幫mutation 處理異步操作的
看圖線上的方法?action通過dispatch
Action里面的參數(shù)是$store
?
[if !supportLists]5.?????[endif]modules可以模塊化?每個(gè)模塊對(duì)應(yīng)state mutation acition
module里的東西 自動(dòng)添加到整個(gè)的state
關(guān)于 每個(gè)module里的getters 第三個(gè)參數(shù)是根state
fullName3(state,getters,rootState){
? return getters.fullName2 +rootState.counter
}
[if !supportLists]6.?????[endif]對(duì)項(xiàng)目結(jié)構(gòu)進(jìn)行分解
Axios學(xué)習(xí) 通過npm安裝npm install axios –save 運(yùn)行時(shí)用到 所以加save
?
[if !supportLists]1.??????????[endif]Promse方式相關(guān)
[if !supportLists]2.??????????[endif]抽取axios相關(guān)共同配置?若不想用公共配置 可以用axios的create方法進(jìn)行配置?具體看文檔???
[if !supportLists]3.??????????[endif]當(dāng)請(qǐng)求方式為post 時(shí)?查詢對(duì)象要放在請(qǐng)求體里
?
購物商城開發(fā)
[if !supportLists]1.?????[endif]一般css會(huì)有normalize這個(gè)css? 在github引入?還有base.css
[if !supportLists]2.?????[endif]取別名 html引用要加~ 創(chuàng)建一個(gè)vue.config.js 進(jìn)行配置??然后從vuecli2中復(fù)制editorconfig 統(tǒng)一編程風(fēng)格
[if !supportLists]3.?????[endif]Home.vue 面向home.js請(qǐng)求開發(fā)
[if !supportLists]4.?????[endif]在vue中請(qǐng)求來的數(shù)據(jù)?保存在當(dāng)前組件的data中?方便使用 通過瀏覽器插件vuedevtool進(jìn)行查看
[if !supportLists]5.?????[endif]Iview ui組件
[if !supportLists]6. [endif].tab-control{
position: sticky;
top: 44px;
}
這個(gè)sticky屬性
[if !supportLists]7.?????[endif]將一個(gè)數(shù)組與另外一個(gè)數(shù)組連接
const nums1=[1,2,3,4]
const nums2 = [5,6,7]
nums2.push(...nums1);
8. display: flex;
/*布局包裹*/
flex-wrap: wrap;
justify-content: space-around; 均等分padding: 2px;
商品樣式進(jìn)行展示包裹樣式
