vue基本操作[1] 续更----让世界感知你的存在

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组件代码：
"""

"""

---

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”
"""

{{msg}}

"""

---

class属性绑定
"""

这是一个p段落标签...

这是一个p段落标签...

<p @click="flag=!flag" :class='{red:flag}'>这是一个p段落标签...

这是一个p标签..

这是一个p标签..

这是一个p标签..

这是一个p标签..

菜鸟教程

"""

---

---

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算是前端技术比较火的一门技术了，所以在日常开发当中掌握它还是比较重要的，废话不多说，先上代码：
"""

"""
//@click点击事件getMethod和getMethod()带不带小括号其实没多大的区别，vue在底层会把传过去的函数统一解析成为方法，带小括号说明有相应的实参传入方法体里面;

"""

<p @click="getMethod()">aaaa

<p @click="getMethodFun()">bbbb

"""

---

---

今天就分享到这里啦，有时间会续更哦，感谢支持！