整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在Vue中引入外部的JavaScript文件，可以使用以下幾種方法：
1. 使用`<script>`標簽引入外部的JavaScript文件。在Vue的HTML模板中，可以直接使用`<script>`標簽來引入外部的JavaScript文件。例如，如果要引入一個名為`external.js`的文件，可以在Vue組件的模板中添加以下代碼：
```html
<template>
<div>
<!-- Vue組件的內容 -->
</div>
</template>
<script src="/path/to/external.js"></script>
```
請注意，`<script>`標簽應該放在Vue組件的模板之后，這樣才能正確引入和使用外部的JavaScript文件。
2. 使用`import`語句引入外部的JavaScript文件。在Vue的JavaScript代碼中，可以使用ES6的`import`語句來引入外部的JavaScript文件。例如，如果要引入一個名為`external.js`的文件，可以在Vue組件的JavaScript代碼中添加以下代碼：
```javascript
import '/path/to/external.js';
export default {
// Vue組件的選項
}
```
請注意，`import`語句必須放在Vue組件的JavaScript代碼的頂部，這樣才能正確引入和使用外部的JavaScript文件。
3. 在Vue的`index.html`文件中引入外部的JavaScript文件。如果要在整個Vue應用中都使用某個外部的JavaScript文件，可以在Vue的`index.html`文件中直接引入該文件。在`index.html`文件的`<head>`標簽中添加以下代碼：
```html
<head>
<!-- 其他的HTML代碼 -->
<script src="/path/to/external.js"></script>
</head>
```
請注意，這種方法會在整個Vue應用中都引入外部的JavaScript文件，而不僅僅是某個特定的Vue組件。
說明: 文本數據渲染 用法: v-text = "Vue實例中的數據" => 簡寫 {{Vue實例中的數據}}
相當于JavaScript中的innerText
說明: HTML渲染數據 用法:v-html = "Vue實例中的數據" 會解析html結構 渲染至頁面
相當于JavaScript中的innerHTML
注意: 在網站上動態渲染任意的 HTML 是非常危險的!!! 因為容易導致 XSS 攻擊 只在可信內容上使用 v-html 絕對不要用在用戶通過(提交)的內容上使用
說明: 事件綁定(綁定事件監聽器) 用法: v-on:事件名 = "事件處理函數" => 簡寫 @事件名 = "事件處理函數"
$event.target 獲取當前事件觸發的DOM元素 $event.path[0](el.path[0]) 也可以獲取當前事件觸發的DOM元素 path數組中有從觸發事件源的元素的所有上一級元素 直到window 實參不傳遞(沒有任何參數) 默認在形參中第一個就是事件參數
實參傳遞 就必須傳遞$event 來獲取獲取事件參數
面試問及
之前在使用餓了么UI的時候給一個組件添加一個原生的事件 但是一直觸發不了 后面查閱文檔發現這個組件內部并沒有注冊我使用的原生事件 事件修飾符.native就可以直接監聽并觸發組件的原生事件
說明: 屬性綁定(行內屬性) 用法: v-bind:屬性名="Vue實例中的數據" => 簡寫 :屬性名="Vue實例中的數據" 當Vue實例中的數據改變之后 頁面會同步更新
isRed = true 就有red這個類 isRed = false 就沒有red這個類 isRed 在 Vue 實例data中聲明
class = "red" :class = "{'yellow' : isYellow}"
說明: 雙向數據綁定 用法: v-model = "Vue實例中的數據"
注意: v-model 只能設置給from表單屬性
說明: 循環渲染 用法: v-for = "(item,index) in items" :key = "index"
items是源數據數組 item是被迭代的數組元素的別名 index是被迭代的數組元素的下標(索引)
push() pop() shift() unshift() splice() sort() reverse() ...
這種修改數組中的元素是無法實現數據改變后頁面會同步改變(只會修改data中的數據 但是頁面不會同步改變)
說明: 條件(表達式或布爾值)判斷渲染 用法: v-if = "表達式或布爾值" v-else-if = "表達式或布爾值" v-else
v-if 和 v-else-if 后面必須跟表達式或布爾值 v-else-if 和 v-else 不能獨立使用 必須跟在 v-if 后面
說明: 條件渲染 用法: v-show = "表達式或布爾值" 根據表達式或布爾值的真假切換元素的display屬性
v-show 不支持 <template>元素 也不支持 v-else
都是用來判斷渲染數據的
1.有較高的切換性能消耗 2.惰性渲染 第一次如果條件為false 則不會渲染到頁面 需要等后面條件切換后才會進行第一次渲染 3.條件切換是切換DOM數中這個元素的移除或添加 4.如果運行時條件很少改變則使用v-if
1.有較高的初始渲染消耗 2.初始渲染 不管條件 第一次加載頁面的時候都會渲染到頁面 3.條件切換只是切換元素的display屬性 4.如果運行時條件會非常頻繁的切換則使用v-show
說明: 這個指令保存在這個元素上 直到關聯實例結束編譯
插值表達式在網絡較滿的情況下可能會出現數據閃爍問題 可以通過給實例(#app)盒子添加一個 v-cloak 指令 通過這個指令的特性(如頁面中還有插值表達式就會存在這個指令 如果頁面的插值表達式都被替換成數據 就會自動移除這個標簽) 配合css [v-cloak]{display:none|opacity:0}來解決數據閃爍的問題
說明: 這個指令添加的元素 內部的胡子語法只會在第一次渲染的時候執行解析一次 后面數據發生改變后也不會觸發更新
某些元素只需要解析一次 后續不需要更新 就可以使用這個指令 提升性能
1.使用get和set函數 需要把計算屬性函數改成計算屬性對象 2.計算屬性默認執行get方法(根據相關的數據計算返回當前屬性的值) 3.當計算數學值自身改變后執行set方法 4.可以用來計算稅前和稅后的互推算
watch:{
XXX:{
deep:true,
handler(newVal,oldVal){
// 處理代碼
}
}
}
watch: {
// watch里面的 $router 這些對象前面不要帶this
"$route.path"(newVal, oldVal) {
if (newVal.indexOf("/login") >= 0) {
this.welcom = "歡迎登陸";
}
if (newVal.indexOf("/register") >= 0) {
this.welcom = "歡迎注冊";
}
}
}
watch: {
$route: function(newVal,oldVal) {
console.log(this.$route.path);
}
}
1.偵聽器用來檢測數據的改變 2.當偵聽的那個數據發生改變后就會觸發偵聽器中的對應函數 3.一般我更多的使用是用偵聽路由的變化 => 重新獲取數據(如搜索在對應的router-view中顯示對應的數據) 4.之前碰到過一個坑點 偵聽器默認無法偵聽復雜數據類型 5.后面使用深度偵聽 depp:true 來解決了這個問題 6.或者偵聽精確到對象中的那個值也可
Vue.filter("formatData", (形參=管道符前面的數據,形參=想要傳入的數據...) => {
處理數據； `返回`處理之后的數據
});
filters:{
formatTime(形參=管道符前面的數據,形參=想要傳入的數據...){
處理數據； `返回`處理之后的數據 }
}
獲取data中的所有數據
用于當前Vue實例的初始化選項 可以獲取自定義選項
new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) // => 'foo'
}
})
組件的出現就是為了拆分Vue實例的代碼量 能夠讓我們以不同的組件來劃分不同的功能模塊 需要什么功能就去調用對應的模塊即可 局部功能界面
Vue.component('組件名',{參數})
組件名請使用小寫 大寫需要駝峰命名法
Vue.component('sayHiBaby',{參數})
頁面中標簽使用 <say-hi-baby></say-hi-baby>
父向子傳參 通過 props 向子組件傳遞數據 可以在組件實例中通過 this.xxx 拿到傳遞過來的值 高級寫法(props驗證)
props:{
xxx:{
// 數據類型
type:"String",
// 必須傳遞
required:"true",
// 默認值
default:"mystring"
....
}
}
props可以傳遞任何數據類型 包括函數
為什么組件的data是一個函數 而Vue實例的data是一個對象?
1.每一個Vue組件都是一個Vue實例 2.都是通過new Vue() 創建出來的 3.如果data是一個對象的話 那么這些組件的引用指向就會相同 4.一個的值修改后 其他的值也會修改(這是JavaScript語法的特性) 5.如果data是一個函數 函數中再返回一個對象 6.那么每個Vue組件都有了自己的作用域 互不干擾
Vue生命周期鉤子 || Vue生命周期函數 Vue提供給開發者一系列的回調函數 讓我們可以在Vue的各個階段添加自定義的邏輯處理
創建期間的生命周期函數(1次)
Vue渲染解析插值表達式 并不是在頁面中直接渲染解析 而是將整個掛載在Vue實例的模版 拿到內存中去解析 等全部解析完成后 再一次性的渲染到頁面(批量) (因為有可能頁面中有很多一樣的data中的值 如果是在頁面中直接渲染解析會很耗性能)
運行期間的生命周期函數(0次-多次)
銷毀期間的生命周期函數(1次)
想要銷毀Vue實例 調用 vm.$destroy() 即可 注意: 這個方法方法并不會銷毀Vue實例的一些如 定時器或計時器等方法 會造成 '內存泄漏' 所以在完全銷毀之前 需要在 beforeDestory 鉤子中清除定時器等...
url地址和組件之間的關系
必須添加 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
<router-link to="/login" tag="span">登陸</router-link>
<router-link to="/logout" tag="span">注冊</router-link>
<router-view></router-view>
const login = { template: "#tempLogin" };
const logout = { template: "#tempLogout" };
const routes = [
{ path: "/login", component: login },
{ path: "/logout", component: logout }
];
const router = new VueRouter({
routes
});
new Vue({
el:"xxx",
router
})
設置路由匹配成功后 router-link 的樣式屬性
/login => /login/user
觸發 添加樣式
/login/user => /login/user
觸發 添加樣式
點了跳轉 沒有任何邏輯 類似于(a標簽設置了href) <router-link to="地址">XXX</router-link>
跳轉的同時執行其他需要執行的邏輯 router.push('地址')
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
next()
})
to
去哪個路由 一般通過to來判斷對應路由做對應處理
from
來自哪個路由
next()
必須next()才可以繼續跳轉頁面(像node"express"里面的中間件)
1.判斷登陸狀態 如判斷token... 2.可以在跳轉路由時先判斷這個頁面這個用戶是否有權限訪問... 3.可以每次路由跳轉前都提示用戶跳轉至什么頁面...
{ path: '/user', component: User,
children: [
{
path: 'index',
component: Index
}
]
}
配置錯誤路由規則
Axios是一個基于 promise(實現了鏈式調用) 的 HTTP 庫 可以用在瀏覽器和 Node.js 中 專注于發請求 專注于網絡請求的一個庫`
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
成功回調
失敗回調
// 為給定 ID 的 user 創建請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可選地，上面的請求可以這樣做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
基礎的地址應用 沒有必要每次都寫 可以直接抽離出來
axios.defaults.baseURL = '設置的基地址'
Vue.prototype.$axios = axios
axios填寫路徑時后面直接寫對應的路徑即可 前面的公共部分不需在寫(寫了也不會影響)
axios.defaults.withCredentials = true
const xxx = axios.create({
// 即地址
baseURL: 'https://some-domain.com/api/',
// 可以統一設置請求頭
headers: {Authorization: token}
});
xxx.get()
xxx.post()
axios.interceptors.request.use(function (config) {
// 可以在發請求之前在這里設置一些請求頭
`config.headers.Authorization=token`
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
// 可以在獲取響應數據之后設置一些提示 如獲取失敗/成功
`response.data.code == 200?`
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
vue-resource已經不再更新 推薦使用Axios
Vue提供的讓程序員可以在動畫的各個時機 添加 自定義邏輯 的鉤子 也可稱之為 動畫鉤子或動畫函數
// 指定顯示的transition
xxx-enter-active
// 指定隱藏的transition
xxx-leave-active
// 指定隱藏時的樣式
xxx-enter/xxx-leave-to
transition標簽包裹
transition-group標簽包裹
動畫樣式的開始類名
解析為的標簽名
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 進入中
// --------
beforeEnter: function (el) {
// ...
},
// 當與 CSS 結合使用時
// 回調函數 done 是可選的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 離開時
// --------
beforeLeave: function (el) {
// ...
},
// 當與 CSS 結合使用時
// 回調函數 done 是可選的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
npm install vuex --save
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 數據
count: 0
},
mutations: {
// 方法
increment (state) {
state.count++
}
}
})
new Vue({
el:xxx,
// 掛載到Vue實例上
store
})
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
把很多開發中需要用到的功能整合到了一起 讓Vue開發人員專注于邏輯代碼即可 是用webpack配置出來的
vue create 項目名 <= 項目名不要有中文!!!不要大些 cd 項目名 npm run serve
npm init webpack "項目名" cd "項目名" npm instal npm run dev
最后一步選 No, I will handle that myself 自己再npm i 下載速度會快一點
|-- build : webpack 相關的配置文件夾(基本不需要修改)
|-- dev-server.js : 通過 express 啟動后臺服務器
|-- config: webpack 相關的配置文件夾(基本不需要修改)
|-- index.js: 指定的后臺服務的端口號和靜態資源文件夾
|-- node_modules
|-- src : 源碼文件夾
|-- components: vue 組件及其相關資源文件夾
|-- App.vue: 應用根主組件
|-- main.js: 應用入口 js
|-- static: 靜態資源文件夾
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 檢查忽略的配置
|-- .eslintrc.js: eslint 檢查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主頁面文件
|-- package.json: 應用包配置文件
|-- README.md: 應用描述說明的 readme 文件
npm install vue-router
import VueRouter from 'vue-router'
`const router = new VueRouter({
routes
})`
`new Vue({
router
})`
為元素添加隨機屬性 樣式中添加屬性選擇器 2者結合 就把css的作用范圍 約束
餓了么前端團隊開發的PC端的基于Vue的組件 內部封裝了很多現成的組件 在VueCLI中使用elementUI npm i element-ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 有些組件并沒有在組件內部使用原生事件 但是有些情況需要一些原生事件 就可以使用.native修飾符來觸發
返回所有匹配成功的值 創建一個新數組, 其包含通過所提供函數實現的測試的所有元素 (數組過濾)
const oldArr = ["dajsk", "dkjdklas", "kgjftlk", "ksf", "ds", "mfksjjks"];
let res = oldArr.filter((val, index) => val.indexOf("d") != -1); // 返回所有匹配成功的值
console.log(res); // [ 'dajsk', 'dkjdklas', 'ds' ]
返回匹配的第一個值 返回數組中滿足提供的測試函數的第一個元素的值 沒有匹配成功返回undefined
const oldArr = ["dajsk", "dkjdklas", "kgjftlk", "ksf", "ds", "mfksjjks"];
let res1 = oldArr.find((val, index) => val.indexOf("d") != -1); // 返回匹配的第一個值
console.log(res1); // dajsk
將匹配成功的值做對應的計算后再次返回 創建一個新數組 其結果是該數組中的每個元素都調用一個提供的函數后返回的結果
const oldArrMap = [3, 4, 7, 1, 8, 5];
let res2 = oldArrMap.map((val, index) => {
// 將匹配成功的值做對應的計算后再次返回
if (val > 5) {
val = val * 2;
}
return val;
});
console.log(res2); // [ 3, 4, 14, 1, 16, 5 ]
因為這些方法都是返回的新數組 并沒有覆蓋原來的數組所以可以繼續鏈式調用數組的方法繼續過濾
遍歷數組 方法對數組的每個元素執行一次提供的函數
const oldArrForEach = [3, 6, 8, 2, 8, 0];
let num = 0;
oldArrForEach.forEach((val, index) => {
num += val;
});
console.log(num); // 27
oldArrForEach.forEach((val, index) => {
if (index == 2) return console.log(val); // 8
});
注意 需要在瀏覽器聲明callback去的函數 需要在script請求前聲明 兼容性強 只能發送get請求
網絡請求設計方法時 考慮到數據的操作主要：增刪改查 方法的命名可以體現這個操作 一般常用的就是get和post
每次請求 瀏覽器和服務器交互完畢后 彼此并沒有留下什么 繼續請求 也無法判斷你是誰 如登陸功能 為了能夠保存一些信息 服務器返回響應報文時 會偷偷的帶一個響應頭 作用是在瀏覽器中偷偷保存一些信息set-cookie 瀏覽器接收到這個響應頭后 會在本地保存這個響應頭 第二次請求時 瀏覽器就會自動帶上這個信息去服務器 服務器接收到這個信息 就知道你是誰了 ajax跨域請求 默認不攜帶cookie 需要設置 跨域cookie在瀏覽器中無法看到 需要抓包
Seesion 是將用戶數據存儲在服務器中 通過sessionId來驗證查找服務器中的用戶信息 sessionId一般是存放在瀏覽器的cookie中的
所以Session需要配合瀏覽器的cookie或者瀏覽器的其他存儲技術一起使用
和cookie差不多 也可以記錄登陸狀態 服務器生成的 通過用戶瀏覽器版本、用戶信息...生成的一個密鑰
瀏覽器不會自動保存 可以接口本地存儲來保存token 瀏覽器不會自動攜帶發送 每次請求接口時可以通過headers攜帶存儲的token headers{ Authorization ：token }
可以把數據存儲到本地(瀏覽器) 只要用戶不刪除 則會一直保存 每個域名都是獨立的保存數據 不同域名不能互相訪問 長久保存數據可以存儲到 localStorage 可以存儲5M數據
短暫存儲數據 可以多頁面傳值 相當于localStorage會更安全 瀏覽器關閉后就不會保存了 可以存儲5M數據
若有感興趣的小伙伴，需要VUE學習文檔思維導圖原圖的，關注我，私信回復獲?。篤UE學習文檔思維導圖
作者：藍海00
轉載鏈接：https://www.jianshu.com/p/125ce0c89603
目開發中遇到導入表格常見的就是excel和csv 格式，一般情況下我們會前端首先得到這個表格里面的數據，然后再把數據發送給后端，也有的是直接上傳文件傳給后臺后臺自己處理，這樣就不好控制上傳前預覽和處理數據，如果不需要預覽直接上傳的需求，那還是直接上傳文件交給后臺處理，本文實例是基于vue+elementu-ui 表格去實現。
https://www.papaparse.com/
1.安裝
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
