【Vue】二
一个第三方js处理类库 BootCDN
Vue过滤器
Date.now() 获取时间戳
Date.now()
1652411231222
计算属性实现
<body>
<div id="root">
<h2>现在是:{{fmtTime}}</h2>
</div>
</body>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data: {
time: 1652411751706
},
computed: {
fmtTime() {
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
}
})
</script>
methods实现
<body>
<div id="root">
<h2>现在是:{{getFmtTime()}}</h2>
</div>
</body>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data: {
time: 1652411751706
},
computed: {
fmtTime() {
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
methods: {
getFmtTime() {
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
}
})
</script>
函数有返回值时，调用的函数值名必须加括号
过滤器实现
<body>
<div id="root">
<h2>现在是:{{time | Timeformat('YYYY-MM-DD') | subStr(4)}}</h2>
</div>
</body>
过滤器使用管道符号将管道前的值作为参数传入管道符后的过滤器函数
filters: {
Timeformat(val, str) {
return dayjs(val).format(str)
},
subStr(val, len) {
return val.slice(0,len)
}
}
过滤器适用于{{}}差值语法、v-bind(:)单向绑定但不适用于model双向绑定
全局过滤器
上面的过滤器全是在Vue实例中配置的，因此是局部过滤器
Vue.filter('Timeformat', function(val, str){
return dayjs(val).format(str)
})
这样所有的VUe实例均可以使用此过滤器
一些Vue内置指令
v-text
作用： 向所在节点中渲染文本内容
与插值语法的区别： v-text会替换节点中的内容，插值语法不会
<div id="root">
<h2 v-text="time">现在是:{{time | Timeformat('YYYY-MM-DD') | subStr(4)}}</h2>
</div>
结果只显示time数据
v-html
作用： 支持结构解析，v-text不能
可能存在安全注入问题：
①在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
如用户输入： <a href="www....com?document.cookie">
②一定要在可信的内容上使用v-html，永远不要用在用户的提交上
解决： 后端使用HTTPOnly，即只有Http传输能读取到这些cookie
v-cloak 防止网速慢导致未经解析的模板加载到页面
如上图，由于js没有加载导致vue也不能加载，页面会显示容器中未曾解析的{{name}}，但是加上v-cloak后，根据css样式会隐藏属性为v-cloak的节点，而v-cloak的特性是vue加载时会自动删掉，因此解析后的模板就会显示了。
v-once
v-once所在节点在初次动态渲染之后，就被视为静态内容了
以后的数据的改变也不会引起v-once所在结构的更新，可以用于优化性能
v-pre
v-pre可以让vue跳过所在节点的编译过程
可以利用它跳过没有使用指令、差值语法的节点，会加快编译
自定义指令
Vue生命周期
浏览器本地存储
localStorage
保存
let person = {
name: 'gravce',
sex: 'male'
}
function SaveData() {
localStorage.setItem('msg', 'hello')
localStorage.setItem('msg1', 123)
localStorage.setItem('person', JSON.stringify(person))
}
数据保存会以字符串形式，对象应该使用json
获取
function GetData() {
document.getElementById('output').value =
localStorage.getItem('person')
}
删除
function DeleteData() {
localStorage.removeItem('person')
}
清空
function ClearData() {
localStorage.clear()
}
SessionStorage
LocalStorage是保存在用户磁盘上的，浏览器关闭会话结束后不会消失，而SessionStorage会
使用浏览器本地存储保存Todolist结果
只需使用一个监视属性即可解决
data() {
return {
todos: JSON.parse(localStorage.getItem('todos')) || []
}
},
watch: {
todos(val) {
localStorage.setItem('todos', JSON.stringify(val))
}
},
注意代码中的"|| []"，这是为了防止localStorage为空时，导致JSON解析为null，进而导致todos拿到的不是空数组而是null进而引起的后续错误
意料之外的bug
上面的代码在刷新页面之后不能显示做没做完，原因是没有开启深度监视
watch: {
todos: {
handler(val) {
localStorage.setItem('todos', JSON.stringify(val))
},
deep: true
}
},
组件自定义事件
绑定事件
<!-- 给组件绑定一个hikaru自定义事件，当Student组件中触发该事件时，demo就会被调用 -->
<Student v-on:hikaru="demo"></Student>
给组件绑定一个hikaru自定义事件，当Student组件中触发该事件时，demo就会被调用
绑定的简写
<Student @hikaru="demo"></Student>
组件事件的触发 $emit
methods: {
getName() {
// 触发Student组件身hikaru事件
this.$emit('hikaru')
}
},
在App.vue中使用mounted、$on 延迟事件的触发
<Student ref="stu"></Student>
mounted() {
setTimeout(()=>{
this.$refs.stu.$on('hikaru', this.demo)
}, 3000)
},
解绑自定义事件 $off
methods: {
getName() {
// 触发Student组件身上的getName事件
this.$emit('hikaru')
},
unbind() {
this.$off('hikaru')
}
},
解绑多个事件：this.$off(['hikaru', 'xxx'])
解绑所有事件：this.$off()
全局事件总线 实现任意组件之间的通信
分析：全局事件总线，实质是创建一个中间组件或者vue实体，所有的其他组件都能在这个中间体上绑定事件并通过触发事件获取数据，因此，此中间体需要满足两个条件：
①所有组件都能看见它
②它可以调用$on、$off、$emit方法
定义方式一：通过VueComponent
1 在main.js安装事件总线
const vc = Vue.extend({})
Vue.prototype.bus = new vc()
2 在事件总线上绑定事件
mounted() {
let items = this.$refs.list.$refs.item
items.forEach(item => {
item.$on('checkTodo', this.checkTodo)
item.$on('deleteOne', this.deleteOne)
});
this.bus.$on('hikaru', this.hikaru)
}
3 其他组件在时间总线上触发事件
<button @click="bus.$emit('hikaru')">hikaru</button>
定义方式一：通过VM
vm本身就可以作为原型对象，不需要在创建vue
在main.js安装事件总线
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
beforeCreate() {
Vue.prototype.bus = this
}
}).$mount('#app')
需要注意总线bus的赋值时机，在vm创建之前的话vm没有生成，而在之后的话vm已经执行完了mounted挂载，因此需要放在beforeCreate钩子中
全局事件总线的使用场景
消息订阅与发布
动画效果
<template>
<div>
<transition appear name="hello">
<div v-show="isShow">
<div class="black"> </div>
<div class="hello">
Hello
</div>
</div>
</transition>
<button @click="isShow = !isShow">click</button>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow: true
}
}
}
</script>
<style scoped>
.black {
background-color: rgb(0, 0, 0);
width: 15px;
height: auto;
float: left;
}
.hello {
background-color: orange;
width: 100px;
float: left;
}
.hello-enter-active{
animation: comeAndgo 1s linear
}
.hello-leave-active{
animation: comeAndgo 1s linear reverse
}
@keyframes comeAndgo {
from {
transform: translateX(-115px);
}
to {
transform: translateX(0px);
}
}
</style>
过渡实现动画效果
/* 进入的起点 */
.hello-enter, .hello-leave-to{
transform: translateX(-100%);
}
/* 进入的重点 */
.hello-enter-to, .hello-leave{
transform: translateX(0);
}
/* 进入离开动画 */
.hello-enter-active, .hello-leave-active {
transition: 1s ;
}
多个元素过渡
<transition-group appear name="hello">
<div v-show="isShow" key="1">
<div class="black"> </div>
<div class="hello">
Hello
</div>
</div>
<div v-show="isShow" key="2">
<div class="black"> </div>
<div class="hello">
Hello
</div>
</div>
</transition-group>
多个元素过渡需要使用transition-group，并且需要在元素上添加key值
集成第三方动画库
<transition-group
appear
name="animate__animated animate__bounce"
enter-active-class="animate__zoomInDown"
leave-active-class="animate__zoomOut"
>
<div v-show="isShow" key="1">
<div class="black"> </div>
<div class="hello">
Hello
</div>
</div>
</transition-group>
(1) 安装并导入
$ npm install animate.css --save
<script>
import 'animate.css'
export default {
name: 'Test',
data() {
return {
isShow: true
}
}
}
</script>
(2) 配置name、进入离开动画
<transition-group
appear
name="animate__animated animate__bounce"
enter-active-class="animate__zoomInDown"
leave-active-class="animate__zoomOut"
>
group必须配置key
配置代理 解决ajax请求跨域问题
几种Ajax
① xhr（原生js实现）
xhr = new XMLHTTPRequest()
xhr.open() 配置请求信息
xhr.send() 发送请求
② JQuery
$.get $.post
③ axios（最常用）
④ fetch
②③都是对xhr进行二次封装，fetch和xhr都是原生的js实现
fetch获取响应需要两层then，且兼容性不好
使用axios获取学生信息
methods: {
getStuInfo() {
axios.get('http://localhost:5000/students').then(
response => {
console.log(response.data)
},
error => {
console.log(error.message)
}
)
}
}
存在的跨域问题
跨域：违背了同源策略，即协议名、主机名、端口号必须一致。
如图所示，浏览器端口号8080与服务器5000不一致导致跨域问题，需要注意的是跨域问题并不是没有发送响应请求，而是在服务器响应给浏览器时，浏览器发现跨域而将数据隐藏了起来
解决跨域的策略
1 cors
大致思路：服务器在响应给浏览器数据时会在响应体中携带一些特殊的响应头，以告知浏览器可以无视跨域问题。
但是在开发中响应头是不能随便修改的，而且这种策略需要完全由后端进行
2 jsonp
大致思路：利用script标签的src属性不受同源跨域问题影响的特性
但是需要前后端同时进行修改，而且只能处理get请求
3 使用代理服务器（常用）
如此一来，8080端口的浏览器端和8080代理服务器通过ajax请求通信就不存在跨域问题，而且同时服务器和代理服务器是通过http通信，更不存在跨域问题
代理服务器的配置 方式一
vue.config.js
module.exports = {
pages: {
index: {
entry: 'src/main.js'
}
},
devServer: {
proxy: 'http://localhost:5000'
}
}
同时修改前端页面的请求端口号为代理服务器的8080
Test2.vue
export default {
name: 'Test2',
methods: {
getStuInfo() {
axios.get('http://localhost:8080/students').then(
response => {
console.log(response.data)
},
error => {
console.log(error.message)
}
)
}
}
}
但是这样存在两个个问题：请求会首先在8080端口号下查找student资源，当发现没有的时候才去向代理服务器发送请求；另一个问题是只能给一台服务器转发请求
代理服务器的配置 方式二
devServer: {
proxy: {
'/hikaru': {
target: "http://localhost:5000",
pathRewrite: {'^/hikaru':''},
ws: true,
changeOrign: true
}
}
}
【Vue】二的更多相关文章
- Vue(二) 计算属性
模板内的表达式常用于简单的运算,当过长或逻辑复杂时,难以维护,计算属性就是解决该问题的 什么是计算属性 表达式如果过长,或逻辑更为复杂,就会变得臃肿甚至难以维护,比如: <div> {{ ...
- vue 二维码长按保存和复制内容
效果图: 二维码用了 qrcode.vue npm install qrcode.vue --save 复制内容用了 vue-clipboard2 npm install vue-clipboard2 ...
- 一步一步学Vue(二)
接上篇,在本篇中,我们将要实现如下,功能,编辑和查询,我们当前的todolist程序,和线上其它的demo程序不同,我们会对其进行增删改查的基本操作,之后进行进一步的完善,按照常规的系统使用经验,一般 ...
- Vue (二) --- Vue对象提供的属性功能
--------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...
- vue二、脚手架搭建
1:安装nodeJs(下载一路回车) https://nodejs.org/zh-cn/ 2:检验nodeJs是否安装成功 (注意nodeJs是否添加到window路径中) 进入cmd -> n ...
- springboot+VUE(二)
入element-ui cnpm install element-ui -S 执行后,会下载element-ui的包到本地,同时会将配置加入到package.json的依赖块中. 通过命令行可以将最新 ...
- Vue(二)基础
01-vue的起步 1.引包 a) 直接下载,并用<script>标签引入 b) CDN方式引入: <script src="https://cdn.bootcss.com ...
- vue二次实战（二）
https://www.cnblogs.com/jellify/p/9522477.html install的弹出框中输入sublimeTmpl,找到sublimeTmpl这个插件后回车 Vue路由 ...
- vue二次实战（一）
创建好项目(npm run dev 运行项目:先不用运行,或先运行再关闭) 先安装axios! npm install axios 然后! npm install --save axios vue-a ...
- vue二次实战
vue爬坑之路 npm uninstall 模块名(删除指定模块) https://www.cnblogs.com/wisewrong/p/6255817.html vue快速入门 https://s ...
随机推荐
- 去除input框相关样式，只显示内容
<input /> css代码: .edit-input{ /* width: 20px; */ height: -webkit-fill-available; background: i ...
- 龙中华著《Spring Boot实战派》读书笔记之基础篇
第四章 Spring Boot 基础 4.1 了解Spring Boot 项目结构 src/main/java //入口类,等 src/main/resources //静态文件和配置文件 src/t ...
- pdb 和 gdb 联调 python + cpython源码
起因: 下面这段奇怪的 python 代码,一个奇怪的 bug,简单来说就是在一个模块内定义了一个 class Test, 然后创建了一个 Test 的对象 ,然后在一个函数内通过 from impo ...
- oracle中的merge into用法解析
一:merge into的形式 MERGE INTO [target-table] A USING [source-table sql] B ON([conditional expression] a ...
- 正向代理和反向代理和spring的动态代理模式有几种?默认是那种?如何切换?
spring的动态代理模式有几种?默认是那种?如何切换? spring的动态的代理模式有两种 JDK动态代理,基于接口(默认代理模式),CGLIB动态代理(若要使用需要进行配置) JDK动态代理是由j ...
- java文本转语音
下载jar包https://github.com/freemansoft/jacob-project/releases 解压,将jacob-1.18-xxx.dll相应放到项目使用的JAVA_HOME ...
- Java学习笔记（二）环境
卸载JDK 1.删除java的安装目录 2.删除JAVA_HOME 3.删除path下关于java的目录 4.java -version 配置环境变量 1.我的电脑-->右键-->属性 ...
- MySQL数据库性能优化的八种方式
1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽 ...
- 转载：Windows Server查看W3SVC IIS服务器中对应的网站日志
W3SVC日志文件夹中序号的含义,格式就是W3SVC+网站ID 如果没有自定义站点的日志路径,日志默认的路径是C:\inetpub\logs\LogFiles\ 基本上每个网站存放日志的文件夹名称都是 ...
- defer语句
1.defer语句 延时机制,在函数中,经常需要创建资源(比如:数据库连接.文件句柄.锁等),为了在函数执行完毕后,及时释放资源,使用defer a. 当执行defer时,暂时不执行,会将defer后 ...