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 ...
随机推荐
- SSM获取前台参数的方式
1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交.若"Content-Type"="application/ ...
- setState总结
react中的setState特点: 是异步操作函数: 组件在还没有渲染之前, this.setState 还没有被调用: 批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setSt ...
- Apache 配置外网站点
基于域名,一般是对外网站 www.etiantian.org/var/www/html/www blog.etiantian.org /var/www/html/blog bbs.tiantian.o ...
- Centos安装 Apache2.4提示 APR not found的解决办法
在安装apache2.2.22版本的时候没有任何问题,可直接使用命令编译安装. 但是,在apache 2.4.12版本,./configure 进行配置时, 提示 configure: error: ...
- MFC学习笔记3---使对话框风格与系统统一
有一件郁闷了我很久的事情,在VS中编辑对话框或者点击预览时都是以Win7风格体现的按钮及对话框: 点击上图测试对话框: 然而生成的应用程序却是这样的: 这样人很不爽啊,按钮风格回到了N年前的版本,复古 ...
- 一、.net Core bundleconfig.json
一.bundleconfig.json [ { "outputFileName": "wwwroot/css/site.min.css", "inpu ...
- The Battle of Chibi（数据结构优化dp，树状数组）
The Battle of Chibi Cao Cao made up a big army and was going to invade the whole South China. Yu Zho ...
- vim 修改复制过来的代码缩进
命令模式下 :1,9< //1至9行回退一个tab :1,9> //1至9行缩进一个tab 让不可打印字符心事出来::set list
- 高并发-原子性-AtomicInteger
线程不安全: //请求总次数private static int totalCount = 10000;//最大并发数private static int totalCurrency = 100;// ...
- java Character类源码分析
一.使用 构建Character对象: public class CharTest { public static void main(String[] args) { Character c1 = ...