Vue的开发
一丶下载
# 中文下载地址: https://cn.vuejs.org/
# 使用方式:
# 1. 单独使用 vue.min.js。文件
# 2. 结合node.js使用集成工具二丶vue的基本使用
基本案例
Document
{{ message }}
总结
1. vue的使用要从创建Vue对象开始
var vm = new Vue();
2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
var vm = new Vue({
el:"#app",
data: {
数据变量:"变量值",
数据变量:"变量值",
数据变量:"变量值",
},
});
el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
data: 保存vue.js中要显示到html页面的数据。
3. vue.js要控制器的内容外围，必须先通过id来设置。
{{message}}
{{message}}
三丶vue.js的M-V-VM思想
# MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。 # 1.`Model`: 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
# 2.`View` : 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。
# 3.`ViewModel ` 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。基本案例
Title
{{name}}
{{age}}
vm对象可以直接访问el和data属性
# 可以访问data里面的数据
console.log(vm.$el) # #box vm对象可以控制的范围
console.log(vm.$data); # vm对象要显示到页面中的数据
console.log(vm.$data.message); # 访问data里面的数据
console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.{{}} 和 v-model
##
1. 在双标签中显示数据要通过{{ }}来完成数据显示
2. 在表单输入框中显示数据要使用v-model来完成数据显示1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{ }}
用法：
vue对象的data属性：
data:{
name:"小明",
}
标签元素：
{{ name }}
2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model
用法：
vue对象的data属性：
data:{
name:"小明",
}
表单元素：
使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。
四丶vue常用指令
操作属性
# 语法: <标签名 :标签属性="data属性">
# 案例:
{{ str1 }}
淘宝
百度
事件绑定
# 语法:
# 1.@事件名
# 2.v-on:事件名
# 案例:
# 1. 使用@事件名来进行事件的绑定
语法：
{{num}}
# 2. 绑定的事件的事件名，全部都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
完成商城购物车中的商品增加减少数量
### 1. 给vue对象添加操作数据的方法
### 2. 在标签中使用指令调用操作数据的方法
Title
控制标签class类名
# 格式：
元素
值可以是字符串、对象、对象名、数组
# 案例一: 添加class类名，值是一个对象
一个段落
一个段落
# 案例 二
第二个段落
# 案例三: 批量给元素增加多个class样式类
第三个段落
控制标签style样式
格式1：值是json对象，对象写在元素的:style属性中
标签元素：
data数据如下：
data: {
activeColor: 'red',
fontSize: 30
}
格式2：值是对象变量名，对象在data中进行声明
标签元素：
data数据如下：
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
格式3：值是数组
标签元素：
data数据如下：
data: {
style1:{
color:"red"
},
style2:{
background:"yellow",
fontSize: "21px"
}
}
条件渲染指令
# v-if 指令
标签元素：
Yes
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
# v-if v-else-if v-else 指令
num的值为1
num的值为2
num的值是{{num}}
# v-show 指令
用法和v-if大致一样，区别在于2点：
1. v-show后面不能v-else或者v-else-if
2. v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]
标签元素：
Hello!
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
列表渲染指令
# 在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。
数据是数组：
- {{book.title}}
- 第{{ index+1}}本图书：{{book.title}}
数据是对象：
- {{value}}
- {{attr}}:{{value}}
五丶Vue对象提供的属性功能
过滤器Vue.filter()进行全局定义
Vue.filter("RMB1", function(v){
//就是来格式化(处理)v这个数据的
if(v==0){
return v;
}
return v+"元";
})
在vue对象中通过filters属性来定义
var vm = new Vue({
el:"#app",
data:{},
filters:{
RMB2:function(value){
if(value==''){
return;
}else{
return '¥ '+value;
}
}
}
});
计算和侦听属性 computed:{}
vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中
Title
{{ str1 }}
{{ strRevs }}
监听属性
# 侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。
# 侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。
Title
{{ num }}
六丶vue对象的生命周期
vue的声明周期
Title
{{num}}
总结
# 在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
# mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。
# 另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created
阻止事件冒泡和刷新页面
# .stop和.prevent
Title
七丶通过axios实现数据请求
vue.js默认没有提供ajax功能的。
所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。
注意，axios本质上就是javascript的ajax封装，所以会被**同源策略**限制。
插件： http://www.axios-js.com/
# 下载地址：
https://unpkg.com/[email protected]/dist/axios.js
https://unpkg.com/[email protected]/dist/axios.min.js
```
axios提供发送请求的常用方法有两个：axios.get() 和 axios.post() 。
增 post
删 delete
改 put/patch
查 get
```vue
// 发送get请求
// 参数1: 必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
// 参数2：可选，json对象，要提供给数据接口的参数
// 参数3：可选，json对象，请求头信息
axios.get('服务器的资源地址',{ // http://www.baidu.com
params:{
参数名:'参数值', // id: 200,
}
}).then(function (response) { // 请求成功以后的回调函数
console.log("请求成功");
console.log(response.data); // 获取服务端提供的数据
}).catch(function (error) { // 请求失败以后的回调函数
console.log("请求失败");
console.log(error.response); // 获取错误信息
});
// 发送post请求，参数和使用和axios.get()一样。
// 参数1: 必填，字符串，请求的数据接口的url地址
// 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
// 参数3：可选，json对象，请求头信息
axios.post('服务器的资源地址',{
username: 'xiaoming',
password: '123456'
},{
responseData:"json",
})
.then(function (response) { // 请求成功以后的回调函数
console.log(response);
})
.catch(function (error) { // 请求失败以后的回调函数
console.log(error);
});
// b'firstName=Fred&lastName=Flintstone'
json
# json 是一个数据格式.
# json数据对象类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持undefined，值还可以是数组或者json对象。
// json数据的对象格式,json数据格式,是没有方法的,只有属性：
{
"name":"tom",
"age":18
}
// json数据的数组格式：
["tom",18,"programmer"]
// 复杂的json格式数据可以包含对象和数组的写法。
{
"name":"小明",
"age":200,
"is_delete": false,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100,
"lve":["code","eat"]
}
}
// 数组结构也可以作为json传输数据。
## 总结:
1. json文件的后缀是.json
2. json文件一般保存一个单一的json数据
3. json数据的属性不能是方法或者undefined，属性值只能：数值[整数,小数,布尔值]、字符串、json和数组
4. json数据只使用双引号、每一个属性成员之间使用逗号隔开，并且最后一个成员没有逗号。
{
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100
}
}
ajax
# ajax，一般中文称之为："阿贾克斯"，是英文 “Async Javascript And Xml”的简写，译作：异步js和xml数据传输数据。
# ajax的作用： ajax可以让js代替浏览器向后端程序发送http请求，与后端通信，在用户不知道的情况下操作数据和信息，从而实现页面局部刷新数据/无刷新更新数据。
# 所以开发中ajax是很常用的技术，主要用于操作后端提供的`数据接口`，从而实现网站的`前后端分离`。
# ajax技术的原理是实例化js的XMLHttpRequest对象，使用此对象提供的内置方法就可以与后端进行数据通信。
Title
同源策略***
# 同源策略，是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通信的两个地址（例如服务端接口地址与浏览器客户端页面地址）之间比较，是否协议、域名(IP)和端口相同。不同源的客户端脚本[javascript]在没有明确授权的情况下，没有权限读写对方信息。
# ajax本质上还是javascript，是运行在浏览器中的脚本语言，所以会被受到浏览器的同源策略所限制。
#总结:
协议 ip 端口 都要一致才不会存在同源策略安全.
ajax跨域(跨源)方案之CORS
ajax跨域(跨源)方案：后端授权[CORS]，jsonp，服务端代理
CORS是一个W3C标准，全称是"跨域资源共享"，它允许浏览器向跨源的后端服务器发出ajax请求，从而克服了AJAX只能同源使用的限制。
实现CORS主要依靠后端服务器中响应数据中设置响应头信息Access-Control-Allow-Origin返回的。
// 在响应行信息里面设置以下内容：
Access-Control-Allow-Origin: ajax所在的域名地址
Access-Control-Allow-Origin: www.oldboy.cn # 表示只允许www.oldboy.cn域名的客户端的ajax跨域访问
// * 表示任意源，表示允许任意源下的客户端的ajax都可以访问当前服务端信息
Access-Control-Allow-Origin: *
### 解决ajax只能同源访问数据接口的方式：
1. CORS，跨域资源共享，在服务端的响应行中设置：
Access-Control-Allow-Origin: 允许访问的域名地址
2. jsonp
3. 是否服务端代理
思路：通过python来请求对应的服务器接口，获取到数据以后，
axios解决跨域
# setting配置文件 更改host请求数据域名