整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在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学习文档思维导图原图的，关注我，私信回复获取：VUE学习文档思维导图
作者：蓝海00
转载链接：https://www.jianshu.com/p/125ce0c89603
目开发中遇到导入表格常见的就是excel和csv 格式，一般情况下我们会前端首先得到这个表格里面的数据，然后再把数据发送给后端，也有的是直接上传文件传给后台后台自己处理，这样就不好控制上传前预览和处理数据，如果不需要预览直接上传的需求，那还是直接上传文件交给后台处理，本文实例是基于vue+elementu-ui 表格去实现。
https://www.papaparse.com/
1.安装
*请认真填写需求信息，我们会在24小时内与您取得联系。
