VUE（vue对象的简单属性）
一：全局过滤器和局部过滤器
ps：不管是局部过滤器还是全局过滤器，一定都要有renturn 返回
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE的过滤器</title>
<script src="js/vue.js"></script>
</head>
<body> <div id="app">
<span>{{num|f2|}}</span>
<br>
<span>{{text|trans}}</span>
<br>
<span>{{num|f2|f3}}</span> <!-- 调用多个过滤器 -->
<br>
<span>{{text_02|f4 }}</span>
</div> <script>
// 不管是局部过滤器还是全局过滤器，一定都要有renturn 返回
// 01 在全局定义自定义过滤器，这样全局的对象都可以使用
Vue.filter("f2", function (value) { //全局过滤器，/ 在Vue对象调用过滤器时过滤的内容
//过滤器名字 函数（value值），会将对象的值调用到value中，然后进行过滤，再返回给视图
console.log("f2的过滤器。。。。", value);
return value.toFixed(2) // 保留两位小数
}); Vue.filter("f3", function (value) {
console.log("f3的过滤器。。。", value);
return value + "RMB.."
}); Vue.filter("f4", function (value) {
console.log("f4的过滤器。。。", value); //用过滤器进行简单的判断
if (value < 0) { return "数字小于0"
}
else {
return "数字大于0"
} }); let vm = new Vue({
el: "#app",
data: {
num: 10.33333,
text: "hello world",
text_02: 0.2345,
}, methods: {}, // 局部过滤器
filters: { //局部过滤器
trans: function (value) {
return value.toUpperCase(); //小写字母换成大写
}
}
}) </script> </body>
</html>
二：事件冒泡
01：小案例说明
ps：<!-- 在div1块里包含div2，div3里面包含div3，div3包含p标签的时候，我们将鼠标移动到文本上，
会依次弹出div3 div2 div1的弹出框，绑定的事件一次次往外展开，这个就是事件冒泡
-->
<body> <div id="div1" onclic="alert('双击999')" onmouseover="alert('div1')">
<div class="div2" onmouseover="alert('div2')">
<div class="div3" onmouseover="alert('div3')">
<p>点击试一试。</p>
</div>
</div>
</div> </body>
02：小案例：模仿模态对话框 -->@click.stop=""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
<script src="js/vue.js"></script>
<style>
.d1 {
height: 1000px; } .box {
width: 300px;
height: 160px; border: 1px solid black;
margin: auto;
bottom: 0;
right: 0;
left: 0;
top: 0;
position: fixed;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 10px;
padding-top: 10px;
} .contain{
background: rgba(0,0,0,0.7);
width: 100%;
margin: auto;
position: fixed;
top:0;
bottom:0;
left:0;
right:0; } </style>
<!-- 前三个数是rgb颜色，第四个参数是透明度，当将上下左右距离都相同的时候，窗口就会固定在正中间 -->
</head>
<body>
<div id="d1">
<h2 @click="is_show=true">点击</h2>
<div class="contain" v-show="is_show" @click="is_show=false"> <div class="box" @click.stop=""> <!-- 这里 点击的范围是会在box中，其他的地方点击不会发生点击事件，不会衍生到父类中的div中去 -->
<br><br>
用户名：<input type="text"><br><br>
密码：<input type="password"><br><br>
<input type="submit" value="确认">
</div> </div> </div> <script>
let vm=new Vue({
el:"#d1",
data:{
is_show:false,
}
})
</script>
</body>
</html>
03：页面不刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
<script src="js/vue.js"></script> </head>
<body>
<div class="app">
<a href="https://www.baidu.com/">百度啊</a> <br> <!--页面刷新 --> <!-- 超链接\表单中的提交,希望阻止页面刷新,可以使用 @事件.prevent="" -->
<a href="" @click.prevent="">百度不刷新</a> <!-- 怎么跳转到新的页面？？？？-->
</div> <script>
let vm=new Vue({
el:".app",
data:{
links:"https://www.baidu.com/", } }) </script> </body>
</html>
三:VUE的数据侦听属性 watch:{ 要观察的变量名:function(变化后的值，变化前的值){ 可写判断语句 } }
01：VUE对象的侦听属性
侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，
会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE的侦听属性</title>
<script src="js/vue.js"></script>
</head>
<body>
<div class="d1">
<span @click="num--">-</span>
<input type="text" v-model="num">
<span @click="num++">+</span>
</div> <script>
let vm = new Vue({
el: ".d1",
data: {
num: 0,
}, watch: {
/* 要观察的变量名:function(变化后的值，变化前的值){ } */
num: function (v_new, v_old) {
if (v_new < 0) {
this.num = 0
}
}
}
}) </script> </body>
</html>
02：VUE的对象的计算属性
如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)， 可以让我们把调整data数据的代码存在在该属性中
001：字符串反转：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE对象的字符串反转</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{text01}}</span><br><br>
<span>{{f1}}</span>
</div> <script>
let vm=new Vue({
el:"#app",
data:{
text01:"are UU ok ??",
},
computed: { f1: function (value) {
return this.text01.split("").reverse().join("+")
},
}
}); </script> <script>
//浏览器调试端可以看到打印反转后的内容
let str1 = "hello";
let reverse_str = str1.split('').reverse().join("");
console.log(reverse_str);
</script> </body>
</html>
四：vue对象的生命周期（执行过程）
每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，
在对象创建的不同阶段加上我们需要的代码，实现特定的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE对象的字符串反转</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{text01}}</span><br><br>
<span>{{f1}}</span>
</div> <script>
let vm=new Vue({
el:"#app",
data:{
text01:"are UU ok ??",
},
computed: { f1: function (value) {
return this.text01.split("").reverse().join("+")
},
}
}); </script> <script>
//浏览器调试端可以看到打印反转后的内容
let str1 = "hello";
let reverse_str = str1.split('').reverse().join("");
console.log(reverse_str);
</script> </body>
</html>
总结：
在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。
另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created
五：通过axios实现数据请求
数据接口，也叫api接口，表示`后端提供`操作数据/功能的url地址给客户端使用。
客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般：增删查改】
同时在工作中，大部分数据接口都不是手写，而是通过函数库/框架来生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue对象生命周期</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script> <!-- 这个必须要要卸载vue.js插件的后面 -->
<!--
可以先从官网上下载这个axios.js插件
https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js -->
</head>
<body>
<div id="d1">
请输入需要查询的城市<input type="text" v-model="city"><br><br>
<button @click="getWeather">点击查询天气结果</button>
<p>{{ganmao}}</p>
</div> <script>
let vm = new Vue({
el: "#d1",
data: {
city: "深圳", //可写成默认是深圳
ganmao: "",
weather_info: "",
}, methods: {
getWeather: function () {
// 在这里编写ajax
// axios是一个对象
// axios.get(url地址).then(function(){}) 发送get请求获取数据
// axios.post() 发送post请求上传数据
// 进入ajax之前,保存vue对象到一个变量里面,方便在ajax内部使用 this _this = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city)
.then(function (response) {
console.log(response); //从接口获得返回的数据
console.log("ajax内部的匿名函数", this);
_this.ganmao = response.data.data.ganmao
}).catch(function (error) { //捕捉发生的错误，error 里面会包含错误信息
console.log(error) }) } } }) </script> </body>
</html>
六：同源策略
01: 同源策略，是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通信的两个地址（例如服务端接口地址与浏览器客户端页面地址）
之间比较，是否协议、域名(IP)和端口相同。不同源的客户端脚本[javascript]在没有明确授权的情况下，没有权限读写对方信息。
ajax本质上还是javascript，是运行在浏览器中的脚本语言，所以会被受到浏览器的同源策略所限制。
前端地址：`http://www.onetom.cn/index.html` | 是否同源 | 原因 |
| ------------------------------------------- | -------- | ------------------------ |
| `http://www.onetom.cn/user/login.html` | 是 | 协议、域名、端口相同 |
| `http://www.onetom.cn/about.html` | 是 | 协议、域名、端口相同 |
| `https://www.onetom.cn/user/login.html` | 否 | 协议不同 ( https和http ) |
| `http:/www.onetom.cn:5000/user/login.html` | 否 | 端口 不同( 5000和80) |
| `http://bbs.onetom.cn/user/login.html` | 否 | 域名不同 ( bbs和www ) |
同源策略针对ajax的拦截，代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
$("#btn").on("click",function(){
$.ajax({
url: 'http://weatherapi.market.xiaomi.com/wtr-v2/weather',
type: 'get',
dataType: 'json',
data:{
"cityId":101010100
}
})
.done(function(resp) { // 请求成功以后的操作
console.log(resp);
})
.fail(function(error) { // 请求失败以后的操作
console.log(error);
});
});
})
</script>
</head>
<body>
<button id="btn">点击获取数据</button>
</body>
</html>
02:ajax跨域(跨源)方案之CORS
CORS是一个W3C标准，全称是"跨域资源共享"，它允许浏览器向跨源的后端服务器发出ajax请求，从而克服了AJAX只能同源使用的限制。
实现CORS主要依靠后端服务器中响应数据中设置响应头信息返回的。
response = new Response()
response .set_header("") // 在响应行信息里面设置以下内容：
Access-Control-Allow-Origin: ajax所在的域名地址 Access-Control-Allow-Origin: www.oldboy.cn # 表示只允许www.oldboy.cn域名的客户端的ajax跨域访问 // * 表示任意源，表示允许任意源下的客户端的ajax都可以访问当前服务端信息
Access-Control-Allow-Origin: *
03:同源策略的解决方案总结：
0. 同源策略：浏览器的一种保护用户数据的一种安全机制。
浏览器会限制脚本语法不能跨源访问其他源的数据地址。
同源：判断两个通信的地址之间，是否协议，域名[IP]，端口一致。 ajax： http://127.0.0.1/index.html
api数据接口： http://localhost/index
这两个是同源么？不是同源的。
1. ajax默认情况下会受到同源策略的影响，一旦受到影响会报错误如下：
No 'Access-Control-Allow-Origin' header is present on the requested resource 2. 解决ajax只能同源访问数据接口的方式：
3. 在服务端的响应行中设置：
Access-Control-Allow-Origin: 允许访问的域名地址
VUE（vue对象的简单属性）的更多相关文章
- vue给对象新添加属性，一定要使用Vue.set( target, key, value )这个API来添加
this.tagList = [{ id:1, tagName:'90后' }, { id:2, tagName:'土豪' }, { id:3, tagName:'美女' }, { id:4, tag ...
- vue data对象添加新属性触发视图
<template> <div class="wrap open"> <a>{{test01.name}}</a> <a> ...
- vue 数组对象取对象的属性: Cannot read property 'xxxx' of undefined
{{ list[0].name }} list[0]没有定义 能正确打印出想要的结果,但就是报错,外面套个v-for就没错了 很费解 看到文章说是与异步有关,解决办法: <template v- ...
- Vue (二) --- Vue对象提供的属性功能
--------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...
- vue 对象提供的属性功能、通过axio请求数据(2)
1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...
- Vue对象提供的属性功能
一. 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种: 1. 使用Vue.filter()进行全局定义 示例: < ...
- 关于vue给对象新增属性页面不会动态更新
不知道大家有没有遇到过这个问题,当我们给data里边声明或者已经赋值过的对象或者数组,添加新的属性时,如果更新此属性的值是不会动态更新视图的. $set 看以下实例: 我们开始给drug_list追加 ...
- vue 数组中嵌套的对象添加新属性--页面更新
vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735
- vue修改对象的属性值后页面不重新渲染
原文地址:vue修改对象的属性值后页面不重新渲染 最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: [html] view plain copy &l ...
随机推荐
- js中的函数防抖与节流
一.滚动条监听的例子 写一个功能需求-- 监听浏览器滚动事件,返回当前滚条与顶部的距离,代码如下: function showTop () { var scrollTop = document.bod ...
- nologin - 阻止非root用户登录系统
描述 DESCRIPTION 如果存在文件 /etc/nologin, login(1) 将只允许root访问.其它用户的登录会遭到拒绝并且显示该文件中的内容给他们. 文件 FILES /etc/no ...
- ubuntu下docker安装
首先来一个官网安装教程链接:https://docs.docker.com/install/linux/docker-ce/ubuntu/ 目前docker主要有docker-CE 与 docker- ...
- Codeforces Round #430 (Div. 2) - A
题目链接:http://codeforces.com/contest/842/problem/A 题意:给定l,r,x,y,k.问是否存在a (l<=a<=r) 和b (x<=b&l ...
- Beta冲刺-（1/3）
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/ 这个作业要求在哪里 https://edu.cnbl ...
- GUI学习之十三——QPlainTextEdit学习总结
QPlainTextEdit可以说是一个简化版的QTextEdit类控件,和QTextEdit的功能差不多,使用了QTextEdit和QTextDocument作为背后实现的技术支撑. 由于QPlai ...
- JavaScript秒针转换00:00:00代码
var str = realFormatSecond(e.target.currentTime); console.log(e.target.scrollTop); //1255256252 c ...
- python笔记（2）--字符串
一.创建字符串 使用 '' , "" , ''' 和 """ 来创建字符串 var1 = 'hello, world' var2 = "ja ...
- 正确理解MySQL中的where和having的区别
原文:https://blog.csdn.net/yexudengzhidao/article/details/54924471 以前在学校里学习过SQLserver数据库,发现学习的都是皮毛,今天以 ...
- MySQL新增用户及赋予权限
创建用户 USE mysql; #创建用户需要操作 mysql 表 # 语法格式为 [@'host'] host 为 'localhost' 表示本地登录用户,host 为 IP地址或 IP 地址区间 ...