https://www.cnblogs.com/happ0/p/8075562.html vue 生命週期 詳解
https://www.cnblogs.com/aimeeblogs/p/9501490.html vue 面試題
https://www.jb51.net/article/129733.htm vue實現消息的無縫滾動效果的示例代碼
https://blog.csdn.net/qq_42597536/article/details/90262171 vue中動態加載圖片路徑的方法(輪播圖)
https://blog.csdn.net/lyyo_cd/article/details/84585661 Vuejs快速獲取input的值
https://blog.csdn.net/HeMister/article/details/88420494 VUE的開發規範
同時傳入事件對象和自定義參數
<div id="app">
<button @click="tm($event,123)">ddddd</button>
</div>
JS代碼
methods:{
tm:function(e,value){
console.log(e);
console.log(value);
}
假如異步了(例如Vuex 需要更新後的Vuex state)，需要等到某個函數加載完成後(賦值後得到新的state)，在進行賦值或者其他操作,我們就可以加個定時器 setTimeout(()=>{},1000) 間隔1秒就可以了。
let a = 1,
b = 2;
const a = 1,
b = 2;
阻止vue移動端滑動事件穿透：如果遮罩層也不需要響應滑動。直接在遮罩層上面使用vue的“阻止默認事件”：@touchmove.prevent
mode:'hash',//默認模式 地址欄後面加 #/
routes: []
mode:'history', //地址欄後沒有 #/
routes: []
linkActiveClass:'menuactive',//選中導航加樣式
routes: []
vue 方法放置順序
components:{} 模板
props:[''], 父子組件傳遞信息
data(){ rerurn {} },
created(){},
mounted(){},
activited(){},
update(){},
beforeRouteUpdate (to, from, next) {
console.log(to.path);
console.log(to.query);
console.log("update");
next();
},
metods:{},
filter:{},
computed:{}
watch:{ "$route"(){}, shuju(){},}
@input事件：input事件在輸入框輸入的時候回實時響應並觸發
// 有二級路由的話最開始的一個有(children)的二級路由不需要name
@change事件：change事件在input失去焦點纔會考慮觸發，它的缺點是無法實時響應。與blur事件有着相似的功能，但與blur事件不同的是，change事件在輸入框的值未改變時並不會觸發，當輸入框的值和上一次的值不同，並且輸入框失去焦點，就會觸發change事件。
Vue enter 回車事件
created() {
this.keyupSubmit();
},
//回車搜索
methods: {
keyupSubmit() {
document.onkeydown = e => {
let _key = window.event.keyCode;
if (_key === 13) {
this.searchValue();
}
};
},
}
this.loadnum ++ 一直點一直加
<router-link tag="li" :to="'/detail/'+'item.id'"></router-link> 加上tag就把標籤渲染成了 li標籤 綁定to加跳轉
var id = e.target.dataset.id 獲取自定義屬性值
如果獲取到的值(如緩存、圖片上傳後端返回或其他後端數據)是這種，或者數據顏色爲黑色，數據不能點擊打開查看!!!，對象裏面全是 "" 就要用JSON.parse 解析
{"ID":1,"UserName":"dj","Password":"123456","CreateTime":"2020-04-30T16:14:57.747"}
//JSON.stringify(obj);將JS對象轉爲JSON字符串。對象轉JSON、數組轉JSON、對象數組轉JSON 一般發給後端
//JSON.parse(string);將字符串轉爲JSON對象格式。 json轉js對象 一般解析獲取後端數據
//當前是否存在index
if(this.n.includes(index))
要判斷數組是否爲空 應該用 array.length
數據處理
js中往數組中插入對象
var datas = [
{ "id":1 , "name":"Gates","age":34 },
{ "id":2 , "name":"Bush","age":22 },
];
var newArr = [];
function addArr() {
for (var i = 0; i <datas.length; i++) {
var obj = {};
obj.id = datas[i].id;
obj.name = datas[i].name;
//或者
var obj = {id:datas[i].id,name:datas[i].name}
newArr.push(obj);
}
console.log(newArr);
}
微信小程序數組[{},{}]對象轉數組.forEach不可以操作對象
let arr = [{a:1},{a:2},{a:3}]
let newarr = []
arr.forEach((item,index)=>{
newarr.push(item.a)
})
console.log(newarr)//[1,2,3]
this.setData({
noticearr: newarr
})
對象轉化爲數組(forEach不可以操作對象)
let obj={
a:4,
b:5,
c:6
}
let newarr = []
for(let i in obj){
newarr.push(obj[i])
}
console.log(newarr)//[4,5,6]
let obj={
a:4,
b:5,
c:6,
d:{
a:4,
b:5,
c:6,
}
}
let newarr = []
for(let i in obj.d){
newarr.push(obj[i])
}
console.log(newarr)//4,5,6
免費的測試接口
http://www.tuling123.com/openapi/api
key: "c75ba576f50ddaa5fd2a87615d144ecf",
info: "先有雞還是先有蛋"
<img src="@/assets/logo.png" alt="">
background: url('~@/assets/images/quanbg.png') no-repeat center;
<li v-for ="item in images" :key="i">
<img :src="item" alt="">
</li>
images: [
require('@/assets/images/icon_banner.png'),
require('@/assets/images/icon_banner.png'),
],
路徑拼接：:src=" baseUrl+imgurl "
created(){this.baseStatic = BaseApi.baseStatic;}
// 生命週期函數就是Vue實例在某一個時間點自動執行的函數
如果當前頁面的css與前面頁面的css命名衝突，就在當前頁面style上加scoped <style scoped></style>
頁面(組件)命名 首字母都大寫 import Index from '@/pages/Index/Index' 文件夾可以不用首字母大寫
組件傳值：組件上面採用烤串命名法
<blogPost :post-title="hello!"></blogPost>
組件中：props: ['postTitle'] 駝峯命名法
src：這裏是我們要開發的目錄，基本上要做的事情都在這個目錄裏。裏面包含了幾個目錄及文件：
export default {
name: 'app' //name寫爲 template 下的第一個div的class名字
}
<template>
<div class="component-a">
</div>
</template>
<script>
export default {
name: 'component-a',
data(){}
}
</script>
vue中import與@import的區別
script中的import是js的語法, 是在js中去引用css文件。
style中的@import是stylus的語法，是在css中引用css文件。@import url('./css/tyle.css')
1）assets：資源目錄，放置一些圖片或者公共js、公共css。這裏的資源會被webpack構建；
2）components：組件目錄，我們寫的組件就放在這個目錄裏面；
3）router：前端路由，我們需要配置的路由路徑寫在index.js裏面；
4）App.vue：根組件；
5）main.js：入口js文件；
6）新建pages 放頁面 ：頁面命名 首字母大寫 （頁面引用註冊 router index.js）
import Index from '@/pages/Index/Index'
{//首頁
path: '/Index',
name: 'Index',
component: Index
},
5、static：靜態資源目錄，如圖片、字體等。不會被webpack構建
6、index.html：首頁入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定義了項目的npm腳本，依賴包等信息
8、README.md：項目的說明文檔，markdown 格式
9、.xxxx文件：這些是一些配置文件，包括語法配置，git配置等
Vue項目引用文件，省略後綴名原因如下
webpack配置文件中相關配置如下：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
(引入css文件需要加.css後綴名)
例如: import './assets/css/reset.css'; //公用css
頁面組成代碼
<template>
<div class="index">
{{message}}
</div>
</template>
<script>
export default {
data(){
return {
message:'我是首頁'
}
}
}
</script>
<style>
.index{
color:red;
}
</style>
直接調用 methods裏面的方法形式：{{ fn() }}
static 放一些類庫文件，而 assets 放置屬於該項目的資源文件。
放在assets/css/reset.css 或者新建styles
在main.js中加入
import "./assets/css/reset.css"
import "./assets/css/border.css"
或者在:index.html 中直接加入
<meta name="viewport" content="width=device-width,initial-scale=1.0">
移動端適配直接寫頁面上
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
console.log(docEl.style.fontSize)
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
(建議js在頁面引入、css在main.js引入，圖片資源在assets裏面新建images文件夾存放)
而直接在組件中引入卻可以，組件中引入也比較簡單： @import "./assets/css/style.css";