1.在vue中发送ajax请求
之前，在学习流行框架之前，我们都是通过jQuery.ajax方法进行ajax请求的
能不能在vue中使用jQuery来发送ajax请求？？
能用，但是不推荐用，因为如果只是要使用ajax功能，便将jQuery引入项目，会增加网站的资源体积
利用vue-resource发送请求
1. 当在页面中引入了vue-resource插件之后，vue对象中多出来一个属性$http, 这个属性就是插件提供的发送ajax请求的工具
2. 发送一个get请求
1
this.$http
2
.get("./data1.html")
3
.then(function(response){
4
//这是成功的回调
5
console.log(response.data);
6
},function(){
7
console.log("出现问题了！");
8
//这是失败的回调
9
})
3. 发送一个post请求
1
this.$http
2
.post("/api/xxx", {name: "zs", age: 18}, {
3
//直接发送json格式的参数给后台，后台拿不到
4
//所以我们需要将数据转换成 表单格式的数据(x-www-form-urlencoded)
5
//也就是设置项中需要设置一个 emulateJSON:true
6
emulateJson: true, headers: {
7
appKey: ""
8
}
9
})
10
.then(function () {
11
12
}, function () {
13
14
})
15
1
this.$http.jsonp(url + "?key=value", {params: {key: value}, jsonp: "cb", jsonpCallback: "success"})
2
.then(function(){
3
},
4
function(){
5
})
6
//callback=_jsonp123719837sf
7
//cb=
8
//http://api.xxx.com/login?callback=_jsonp123719837sf
9
//http://api.xxx.com/login?callback=success
10
//http://api.xxx.com/login?cb=_jsonp123719837sf
11
//http://api.xxx.com/login?cb=success
2. api接口服务器的配置与启动过程
api接口服务器
api接口
项目的api接口，其实就是用Node + Express + mysql书写的一个后台程序。
api接口的本地数据库配置
1. 需要一个MySQL服务器
1.1 使用wamp或者phpstudy软件提供的集成的mysql（推荐）
1.2 自己安装一个mysql服务器
2. 需要一个数据库管理工具
安装 NaviCat
3. 在数据库管理工具Navicat中创建新的数据库连接
1. 在navicat左边栏中右键点击鼠标
2. 选择新建连接--->MySQL
3. 在新建连接的窗口中，输入自定义的连接名称（名字随便起）
4. 输入主机名或者ip地址 输入自己的ip地址 127.0.0.1 或者 localhost
5. 端口默认3306不需要修改
6. 用户名 root 也不用修改
7. 密码按照自己设置的数据库密码来使用 默认情况下 WAMP和PHPStudy 数据库密码都是空
8. 点击确定按钮，创建连接！
4. 连接到数据库服务器
双击刚才创建好的数据库连接，连接到数据库服务器
5. 在当前已经连接的数据库服务器中，创建一个新的数据库
1. 右键单击数据库连接名称
2. 选择新建数据库
3. 在新建数据库的窗口中，输入数据库名称 dtcmsdb4
4. 字符集 选择 utf-8
5. 排序规则可以默认为空 点击确定按钮
6. 导入dtcmsdb4.sql文件中的数据
1. 双击创建好的dtcmsdb4的数据库名称，连接到数据库
2. 右键单击dtcmsdb4的数据库名称
3. 选择运行sql文件
4. 在新打开的窗口中指定要运行的文件为 dtcmsdb4.sql
5. 点击开始按钮，就可以将dtcmsdb4.sql 中的数据导入到数据库中了
第6步（导入sql文件）不能成功的原因：
1. Unknow Engine InnoDB
解决方案： 打开dtcmsdb4.sql文件, 删除掉所有的 ENGINE=InnoDB
2. invalid default value for update_time
解决方案： 打开dtcmsdb4.sql文件， 将所有的‘0000-00-00 00:00:00‘替换成 CURRENT_TIMESTAMP
启动nodejs写的后台的程序
1. 进入vuecms3_nodejsapi文件夹
2. 在该文件夹下执行 npm install
3. 进入该文件夹下的src文件夹
4. 执行 node app.js
3.自定义指令
v- 前缀在注册自定义指令的时候‘指令名称‘不需要
但是在使用的时候，需要加上 v-指令名称
自定义指令的语法：
1.全局自定义指令
1
Vue.directive("指令名称", {
2
bind(){
3
//当指令第一次被绑定到元素上的时候，会执行
4
},
5
inserted(){
6
//被绑定元素插入父节点时调用
7
},
8
update(){
9
// 所在组件的 VNode 更新时调用
10
},
11
componentUpdated(){
12
//所在组件的 VNode 及其孩子的 VNode 全部更新时调用
13
},
14
unbind(){
15
//只调用一次，指令与元素解绑时调用。
16
}
17
})
自定义指令的简写形式：
如果不关注其他的钩子函数，值关 注bind以及update两个钩子函数的执行
我们在创建自定义指令的时候，只需要如下语法进行书写即可
<wiz_code_mirror>
1
Vue.directive("指令名称", function(){
2
//这个函数，就是bind钩子和update钩子都会调用的函数
3
})
例子:
1
Vue.directive("focus", {
2
inserted(el, binding){
3
//形参，el 指的就是当前指令在使用时绑定的元素对象
4
//形参 binding 指的就是和当前指令相关的一些信息：
5
//比如:
6
//name: 当前指令的名称
7
//value: 当前指令在使用的时候，为指令赋值的表达式的值
8
//expression: 当前指令在使用的时候，为指令赋值的表达式
9
//arg: 当前指令在使用的时候使用:传递的参数
10
//modifiers: 当前指令在使用的时候， 使用使用.传进来的修饰符
11
12
//oldValue: 这个东西只会在update以及componentUpdated钩子中有值
13
//这个指的就是更新之前的值，所以只有更新操作才会有
14
// console.log(el);
15
el.focus();
16
console.log(binding);
17
}
18
})
练习
1
<div id="app">
2
<!-- 指令传递的表达式，会被当做js代码来处理 -->
3
<!-- 如果直接写一个red，那么vue会去数据模型中，找red对应的数据将其值获取出来进行使用 -->
4
5
<!-- 如果写的是‘red‘ 这个就会被当做js中的字符串常量来进行处理 -->
6
<!-- <input type="text" v-color="‘red‘"> -->
7
<!-- <input type="text" v-color="{color: ‘red‘, fontSize: ‘10px‘}"> -->
8
<input type="text" v-color:green.dog.cat>
9
10
11
<!-- 指令名称:参数.修饰符 = 表达式 -->
12
</div>
13
<script src="./node_modules/vue/dist/vue.js"></script>
14
<script>
15
Vue.directive("color", {
16
inserted(el, binding){
17
// el.style.color = binding.value;
18
//binding.value是对这个赋值给指令的表达式进行解析后的结果
19
// console.log(binding.value);
20
//binding.expression是对这个赋值给指令的表达式不解析原样输出
21
// console.log(binding.expression);
22
23
//arg 就是获取:后面的内容
24
// console.log(binding.arg)
25
26
//modifiers 获取到的是一个对象，对象中有以修饰符作为名称属性，属性的值是布尔值，如果用到了这个修饰符，那么修饰符的属性对应的值就是true
27
// console.log(binding.modifiers);
28
}
29
})
30
31
var vm = new Vue({
32
el: "#app",
33
data: {
34
35
}
36
})
自定义指令钩子函数的执行顺序
1.bind
2.inserted
3.update
4.componentUpdated
5.unbind
2.局部自定义指令
全局注册的自定义指令和过滤器在所有的当前页面中的vue实例中都可以使用
但是如果在vue实例中有自己局部注册的自定义指令，那么在当前vue实例中就不会再去使用全局注册的内容了
1
directives: {
2
‘border‘: {
3
inserted(el, binding) {
4
// el.style.borderWidth = binding.value;
5
el.style.color = "red";
6
}
7
}
8
}
4.注册组件
//如果组件是要用手动挂载的方式显示在页面上去的，那么就不需要进行注册
//也就是不需要进行 Vue.component()
//如果组件是通过标签名的方式显示在页面上去的，那么就需要注册
//调用 Vue.component("组件名", {}) 之后，才能使用
1. 第一种组件注册的方式：
//Vue.component("组件名（就是最终使用的时候标签名）", 组件的设置)
1
Vue.component("headeer", {
2
template: "#tpl",
3
data(){
4
return {
5
name: "曾学炉"
6
}
7
}
8
})
9
10
var header = Vue.component("headeer");
11
// new header().$mount("#zujian")
2. 第二种：
//通过Vue.extend方法可以创建出来一个组件的构造器
//创建出来的构造器，既可以用来做组件注册
// Vue.component("headeer", header)
//还可以进行组件的手动挂载
//进行组件挂载的时候，需要先手动的创建出来一个组件的实例
//调用实例的$mount方法，进行挂载
通过标签名来使用组件的时候，这个标签名必须存在于一个vue实例的管理范围内
自己定义标签，手动将组件挂载在指定的标签上，这个时候就不需要有vue实例的存在了 -->
<div id="test"></div>
<div id="test1"></div>
1
<div id="app">
2
<headeer></headeer>
3
4
</div>
5
6
<div id="zujian"></div>
7
8
<script type="text/template" id="tpl">
9
<div>
10
<h1>这是伟大的HEADER</h1>
11
<ul class="nav">
12
<li><a href="">首页</a></li>
13
<li><a href="">资讯</a></li>
14
<li><a href="">新闻</a></li>
15
<li><a href="">论坛</a></li>
16
<li><a href="">商城</a></li>
17
<li><a href="">其他</a></li>
18
</ul>
19
<input type="text" v-model="name">
20
</div>
21
</script>
22
<script src="./node_modules/vue/dist/vue.js"></script>
23
<script>
24
25
//1. 第一种组件注册的方式：
26
//Vue.component("组件名（就是最终使用的时候标签名）", 组件的设置)
27
28
Vue.component("headeer", {
29
template: "#tpl",
30
data(){
31
return {
32
name: "曾学炉"
33
}
34
}
35
})
36
37
var header = Vue.component("headeer");
38
// new header().$mount("#zujian")
39
40
//2. 第二种：
41
//通过Vue.extend方法可以创建出来一个组件的构造器
42
43
//创建出来的构造器，既可以用来做组件注册
44
// Vue.component("headeer", header)
45
46
//还可以进行组件的手动挂载
47
//进行组件挂载的时候，需要先手动的创建出来一个组件的实例
48
//调用实例的$mount方法，进行挂在
49
50
// new header().$mount("#zujian");
51
// var header = Vue.extend({
52
// template: "#tpl",
53
// data(){
54
// return {
55
// name: "曾学炉"
56
// }
57
// }
58
// })
59
// new header().$mount("#zujian");
60
61
// Vue.component("headeer", header)
62
63
// var vm = new Vue({
64
// el: "#app",
65
// data: {
66
// }
67
// })
68
69
70
// var obj = {
71
// car(){
72
// return {
73
// brand: "布加迪",
74
// price: 20000000
75
// }
76
// },
77
// createNewInstance(name){
78
// return {
79
// name,
80
// car: this.car()
81
// }
82
// }
83
// }
84
85
86
// var p = obj.createNewInstance("易俊雄");
87
// var p1 = obj.createNewInstance("曾学炉");
88
89
90
// console.log(p.car.brand);
91
92
// p1.car.brand = "奥拓";
93
// p1.car.price = 10000;
94
95
// console.log(p1.car.brand);
96
97
</script>
1
<div id="app">
2
<!-- 通过标签名来使用组件的时候，这个标签名必须存在于一个vue实例的管理范围内 -->
3
<test></test>
4
<test1></test1>
5
6
<!-- 自己定义标签，手动将组件挂载在指定的标签上，这个时候就不需要有vue实例的存在了 -->
7
<div id="test"></div>
8
<div id="test1"></div>
9
</div>
10
<script src="./node_modules/vue/dist/vue.js"></script>
11
<script>
12
//1. 直接注册（常用）
13
Vue.component("test", {
14
template: "<h1>这是直接注册的组件</h1>"
15
})
16
17
//通过直接注册的方式创建出来的组件，需要通过component获取才可以获取到构造器
18
var test = Vue.component("test");
19
//可以通过 创建一个 组件实例， 调用实例的$mount方法 将其挂载
20
new test().$mount("#test");
21
22
23
//2. 先创建构造器后注册
24
var test1 = Vue.extend({
25
template: "<h1>这是创建构造器方式创造的组件</h1>"
26
})
27
28
new test1().$mount("#test1");
29
30
// Vue.component("test1", test1);
31
32
// var vm = new Vue({
33
// el: "#app"
34
// })
5.ref属性访问
ref vue1.0中 v-ref v-el 这两个指令在 vue2.0中统一用ref代替了
ref指令可以用来将当前 组件，或者，元素加到父级vue对象中的$refs属性中！
1. 如果ref指令是在组件中使用的，那么 最终加到$refs中的就是这个组件对象！
获取到组件对象后，就可以使用组件中的任意内容，比如数据，比如方法
2. 如果ref指令是在普通的dom元素中使用的，那么最终加到$refs中的就是这个元素dom对象
获取到dom元素之后，可以进行任何的dom操作！
1
<div id="app">
2
<!-- 在使用组件的时候，标签内加上一个ref属性，就会将当前组件的实例对象，以ref属性的值，作为键，添加到当前组件所在的父级的vue对象中的$refs属性中 -->
3
<test ref="yjx"></test>
4
<test ref="zxl"></test>
5
<button @click="alertName">显示组件中的name属性</button>
6
</div>
7
<script src="./node_modules/vue/dist/vue.js"></script>
8
<script>
9
var test = Vue.extend({
10
template: "<h1>{{name}}</h1>",
11
data(){
12
return {
13
name: "易俊雄"
14
}
15
}
16
})
17
18
Vue.component("test", test);
19
20
var vm = new Vue({
21
el: "#app",
22
methods: {
23
alertName(){
24
console.log(this.$refs);
25
26
// $refs 属性中存放了所有通过ref指定了键的 子组件对象
27
// this.$refs.yjx.name = "曾学炉"
28
}
29
}
30
})
31
32
</script>