vue基本操作[上] 续更----让世界感知你的存在
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>
"""
今天就分享到这里啦，有时间会续更哦，感谢支持！
vue基本操作[上] 续更----让世界感知你的存在的更多相关文章
- 阿里云MVP：开发者的超能力，用技术创造更好世界
阿里云MVP:开发者的超能力,用技术创造更好世界 2019年3月,第8期阿里云MVP(最有价值专家)完成终审,截至目前,全球已有27个国家和地区.近500位云计算专家和优秀开发者成为阿里云MVP.阿里 ...
- 如何在小型pcb的移动设备上获得更好的无线性能
如何在小型pcb的移动设备上获得更好的无线性能 How to get better wireless performance for mobile devices with small PCBs 小型 ...
- vue 快速入门 系列 —— vue loader 上
其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...
- 关于vue+axios上传文件的踩坑分析
上传文件是每个前端开发者都会遇到的问题,在之前实习期做了一个上传文件的功能,当时没有彻底搞明白问题所在,现在重新复盘下. 1.使用formData来上传文件,没有使用axios上传文件,之前在学校有做 ...
- springboot整合vue实现上传下载文件
https://blog.csdn.net/yhhyhhyhhyhh/article/details/89888953 文章目录 springboot整合vue实现上传下载文件 1上传下载文件api文 ...
- vue组件上动态添加和删除属性
1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...
- vue 项目上传到码云，push时error: failed to push some refs to 'https://gitee.com/mawenrou/vue_ht.git'
vue 项目上传到码云,push时error: failed to push some refs to 'https://gitee.com/mawenrou/vue_ht.git' 因为之前已经创建 ...
- 【Vue中的坑】Vue打包上传线上报Uncaught SyntaxError: Unexpected token <
今天在vue打包上传线上后,报一下错误,一下就懵了,这可咋整啊,一如既往的想都没想就开始复制错误,上网开搜 Uncaught SyntaxError: Unexpected token < Un ...
- AntDesign VUE：上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制（Promise、Boolean）
文件大小限制 - Promise checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size ...
- AntDesign VUE：上传组件自定义限制的两种方式（Boolean、Promise）
AntD上传组件 AntDesign VUE文档 第一种方式 beforeUpload(file) { let isLt = true if (filesSize) { isLt = file.siz ...
随机推荐
- Mac M1（arm 系列芯片）如何安装 Chromium | Puppeteer
最近写个脚本用到 puppeteer,然后安装 Chromium 出现一点问题,这里记录一下解决方案. Puppeteer 自动安装失败 在 Puppeteer 安装时会自动安装 Chromium,然 ...
- 再解 [NOI2017] 整数
提供一个来自 CF 大佬 adament 的有趣思路. 首先我们知道的是一个只增加的 \(b\) 进制整数计数器,如果 \(b\) 是常数那么复杂度是均摊 \(O(1)\) 的.证明只需要考虑将 \( ...
- Codeforces Round #844 (Div. 1 + Div. 2, based on VK Cup 2022 - Elimination Round) 小记
在机房其它人都有许多的橙名小号后我终于大号上橙了(果然还是太菜了),写篇博客记录一下. 计数水平太弱,赛场最后 5 分钟乱糊了一个 F 的做法,后来发现其它人做法都短好多. A & B &am ...
- 关于Mybatis
一:Mybatis的优缺点 优点: 1.与JDBC相比,减少了百分之五十的代码量. 2.Mybatis是最简单的持久层框架,简单易学. 3.Mybatis灵活,不会对应用程序和现数据库设计强加任何影响 ...
- 2023-03-24：音视频mp3和h264混合（muxer）编码为mp4，用go语言编写。
2023-03-24:音视频mp3和h264混合(muxer)编码为mp4,用go语言编写. 答案2023-03-24: 这是一个使用FFmpeg库将MP3和H.264混合编码为MP4的Go语言程序. ...
- 2022-12-14：给定一个正数n, 表示从0位置到n-1位置每个位置放着1件衣服 从0位置到n-1位置不仅有衣服，每个位置还摆着1个机器人 给定两个长度为n的数组，powers和rates pow
2022-12-14:给定一个正数n, 表示从0位置到n-1位置每个位置放着1件衣服 从0位置到n-1位置不仅有衣服,每个位置还摆着1个机器人 给定两个长度为n的数组,powers和rates pow ...
- 2021-01-21：java中，HashMap的读流程是什么？
福哥答案2020-01-21: jdk1.7读流程:1.key是否为空值null,如果为空,直接遍历table[0]链表,寻找key==null键.调用的是getForNullKey()方法.如下:1 ...
- 2022-04-26：给定四个整数 sx , sy ，tx 和 ty，如果通过一系列的转换可以从起点 (sx, sy) 到达终点 (tx, ty)，则返回 true，否则返回 false。 从点 (x
2022-04-26:给定四个整数 sx , sy ,tx 和 ty,如果通过一系列的转换可以从起点 (sx, sy) 到达终点 (tx, ty),则返回 true,否则返回 false. 从点 (x ...
- 2022-04-24：位集 Bitset 是一种能以紧凑形式存储位的数据结构。 请你实现 Bitset 类。 Bitset(int size) 用 size 个位初始化 Bitset ，所有位都是 0
2022-04-24:位集 Bitset 是一种能以紧凑形式存储位的数据结构. 请你实现 Bitset 类. Bitset(int size) 用 size 个位初始化 Bitset ,所有位都是 0 ...
- windows-重启打印服务
@echo off color a net stop spooler net start spooler ping -n 4 localhost >nul