# Vue引用js文件的多種方式 **1.vue-cli webpack全局引入jquery** (1)首先 npm install jquery --save (--save 的意思是將模塊安裝到項目目錄下，併在package文件的dependencies節點寫入依賴。) (2)在webpack. ...
Vue引用js文件的多種方式
1.vue-cli webpack全局引入jquery
(1)首先 npm install jquery --save (--save 的意思是將模塊安裝到項目目錄下，併在package文件的dependencies節點寫入依賴。)
(2)在webpack.base.conf.js裡加入
"""
var webpack = require("webpack")
"""
(3)在module.exports的最後加入
"""
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
"""
(4) 在main.js 引入就ok了
"""
import $ from 'jquery'
"""
(5)然後 npm run dev 就可以在頁面中直接用$ 了.
2.vue組件引用外部js的方法
項目結構如圖:
content組件代碼：
"""
<template>
<div>
<input ref='test' id="test">
<button @click='diyfun'>Click</button>
</div>
</template>
<script>
import {myfun} from '../js/test.js' //註意路徑
export default {
data () {
return {
testvalue: ''
}
},
methods:{
diyfun:function(){
myfun();
}
}
}
</script>
"""
test.js代碼：
"""
function myfun() {
console.log('Success')
}
export { //很關鍵
myfun
}
"""
用到了es6的語法。
3.單vue頁面引用內部js方法
(1) 首先 npm install jquery --save (--save 的意思是將模塊安裝到項目目錄下，併在package文件的dependencies節點寫入依賴。)
(2) 在需要引用的vue頁面import引入$,然後使用即可
這個圖中有黃色的警告，如果把console.log($)改成這樣:
"""
export default{
mounted: function(){
console.log($)
}
}
"""
Vue數組操作
vue中數組的操作總結：
根據索引設置元素：
1.調用$set方法：
this.arr.$set(index, val);2.調用splice方法：
this.arr.splice(index, 1, val);合併數組：
this.arr = this.arr.concat(anotherArr);清空數組：
this.arr = [];主要的數組方法：
1.變異方法(修改了原始數組)，vue為觸發視圖更新，包裝了以下變異方法：
push()
pop()
shift()
unshift()
splice() //無論何時，使用該方法刪除元素時註意數組長度有變化，bug可能就是因為她
sort()
reverse()2.非變異方法(不會修改原始數組而是返回一個新數組)，如concat()、filter()，使用時直接用新數組替換舊數組，如上面的合併數組例子。
註意：
//以下操作均無法觸發視圖更新
this.arr[index] = val;
this.arr.length = 2;
Vue屬性綁定指令 -- v-bind
可簡寫為 ：
普通屬性:頁面可解析為id=“4”
"""
<p v-bind:id="2*2">{{msg}}</p>
"""
class屬性綁定
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.red {
background: red;
}
.big {
font-size: 4em;
}
</style>
<body>
<div id="app">
<p class='red'>這是一個p段落標簽...</p>
<!--綁定red屬性 -->
<p v-bind:class='redColor'>這是一個p段落標簽...</p>
<!-- 當點擊時，屬性值切換 -->
<p @click="flag=!flag" :class='{red:flag}'>這是一個p段落標簽...</p>
<!-- 綁定big和red屬性 -->
<p class='big' :class="{'red':true}">這是一個p標簽..</p>
<!-- 以數組形式綁定big和red屬性 -->
<p :class="['big','red']">這是一個p標簽..</p>
<!-- 綁定big,判斷flag的值是否為true，為true時綁定red屬性 -->
<p :class="['big',(flag?'red':'')]">這是一個p標簽..</p>
<!-- 綁定big,判斷flag的值是否為true，為true時綁定red屬性 -->
<p class='big' :class='flag?"red":""'>這是一個p標簽..</p>
<!-- 行內樣式綁定 -->
<p :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥教程</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
redColor:'red',
flag:true,
activeColor: 'green',
fontSize: 30
}
})
</script>
</body>
</html>
"""
Vue事件綁定
1.原生事件和組件事件的綁定
原生事件的綁定是通過addEventLister綁定給真實的元素的;組件事件綁定是通過vue自定義的$on實現的。如果要在組件上使用原生事件，需要加.native修飾符，這樣就相當於在父組件中把子組件當做普通html標簽，然後加上原生事件。
2.\(on和\)emit的實現
\(on、\)emit是基於訂閱觀察者模式的，維護一個事件中心，on的時候將事件按名稱存在事件中心裡，稱之為訂閱者，然後emit將對應的事件進行發佈，去執行事件中心裡的對應的監聽器
(1)vue先創建一個構造器，維護一個事件中心events
"""
function EventEmiter(){
this.events = {}
}
"""
(2)$on
"""
EventEmiter.prototype.on = function(event,cb){
if(this.events[event]){
this.events[event].push(cb)
}else{
this.events[event] = [cb]
}
}
"""
(3)$emit
"""
EventEmiter.prototype.emit = function(event){
let args = Array.from(arguments).slice(1)
let cbs = this.events[event]
if(cbs){
cbs.forEach(cb=>{
cb.apply(this,args)
})
}
}
"""
Vue點擊click事件解析
vue算是前端技術比較火的一門技術了，所以在日常開發當中掌握它還是比較重要的，廢話不多說，先上代碼：
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="./vue.js"></script>-->
<script src="2.5.20-vue.js"></script>
</head>
<body>
<div id="app">
"""
//@click點擊事件getMethod和getMethod()帶不帶小括弧其實沒多大的區別，vue在底層會把傳過去的函數統一解析成為方法，帶小括弧說明有相應的實參傳入方法體裡面;
"""
<!--<p @click="getMethod">aaaa</p>-->
<!--<p @click="getMethodFun">aaaa</p>-->
<p @click="getMethod()">aaaa</p>
<p @click="getMethodFun()">bbbb</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {
message: 'father',
show: true
};
},
methods: {
getMethod () { //點擊事件的時候去尋找相應的方法，在底層做轉換直接寫方法名，大括弧裡面寫相應的業務邏輯
console.log('11');
},
//也可以採用匿名函數的寫法定義方法名，然後進行調用這種方法也是可以的，只不過getMethod ()的寫法更加簡潔，但是在實際開發當中這個可是不支持的例如 aaFunc (){} //直接這樣寫是會報錯的，一定要註意;
getMethodFun: function () {
console.log('22')
}
},
});
</script>
</html>
"""
今天就分享到這裡啦，有時間會續更哦，感謝支持！
