webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add：Vue相关。

Browse Source
This commit is contained in:
qianguyihao 2018-04-20 23:44:34 +08:00
parent 181e970997
commit d73acce6df
9 changed files with 135 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
19-面试题积累/01-我的面试经历 by smyhvae.md
View File

@ -74,7 +74,7 @@
- vue的双向绑定怎么实现的？我是说怎么实现？ - vue的双向绑定怎么实现的？我是说怎么实现？
我当时是回答MVVM模式。其实还需要答出Object.defineProperty( )的细节。 我当时是回答MVVM模式。其实还需要答出Object.defineProperty( )的细节，以及虚拟DOM。
- Vue里还有什么呢？ - Vue里还有什么呢？

7
21-Vue基础/00-Vue的介绍和vue-cli.md
View File

@ -1,9 +1,10 @@
- [Get全栈技能点 Vue2.0/Node.js/MongoDB 打造商城系统](https://coding.imooc.com/class/chapter/113.html)
## MVVM模式 ## MVVM模式
20180420_2150.png
- Model：负责数据存储 - Model：负责数据存储
- View：负责页面展示 - View：负责页面展示
@ -381,6 +382,10 @@ cnpm run dev
本文参考链接：
- [Get全栈技能点 Vue2.0/Node.js/MongoDB 打造商城系统](https://coding.imooc.com/class/chapter/113.html)

2
21-Vue基础/01-01.Vue基础语法：系统指令.md
View File

@ -40,7 +40,7 @@
![](http://img.smyhvae.com/20180313_0955.png) ![](http://img.smyhvae.com/20180313_0955.png)
如果我们在控制台输入`myVue.data+='123'`，页面会**自动更新**name的值。 如果我们在控制台输入`myVue.$data.name = 'haha'`，页面会**自动更新**name的值。意思是，当我们直接修改data数据，页面会自动更新，而不用去操作DOM。
下面来讲一下Vue的各种系统指令。 下面来讲一下Vue的各种系统指令。

2
21-Vue基础/01-02.Vue的举例：列表功能.md
View File

@ -103,7 +103,7 @@
具体实现步骤如下： 具体实现步骤如下：
（1）用户填写的数据单独存放在data属性里，并采用`v-module`进行双向绑定。 （1）用户填写的数据单独存放在data属性里，并采用`v-model`进行双向绑定。
（2）用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内容）。 （2）用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内容）。

35
21-Vue基础/02-过滤器.md → 21-Vue基础/01-03.过滤器.md
View File

@ -1,11 +1,13 @@
Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器，Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。
## 系统过滤器 ## 系统过滤器
Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器，Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。
系统过滤器的使用，可以参考参考文档：<http://v1-cn.vuejs.org/api/#过滤器> 系统过滤器的使用，可以参考参考文档：<http://v1-cn.vuejs.org/api/#过滤器>
注意：系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。 注意：系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。
@ -79,7 +81,7 @@ Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些
20180405_2038.png 20180405_2038.png
第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date，说明过滤器还是起到了作用的。 第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date，说明过滤器是起到了作用的。
@ -169,35 +171,6 @@ Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些
###1.2 可以自定义按键别名
```
在Vue2.0 中默认的按键修饰符是存储在 Vue.config.keyCodes中
// 例如在Vue2.0版本中扩展一个f1的按键修饰符写法：
Vue.config.keyCodes.f1 = 112
在1.0.17+ 中默认的按键修饰符是存储在Vue.directive('on').keyCodes中
// 例如在Vue1.0中扩展一个f1的按键修饰符写法：
Vue.directive('on').keyCodes.f1 = 112
```
### 1.3 利用v-on的.enter按键修饰符实现品牌管理的新增按钮功能
- 效果图
![d2-1.png](imgs/d2-1.png "")
- 实现代码
![d2-2.png](imgs/d2-2.png "")
![d2-3.png](imgs/d2-3.png "")

47
21-Vue基础/02-Vue中的Ajax请求.md Normal file
View File

@ -0,0 +1,47 @@
## vue-resource
官网链接：
- http相关：<https://github.com/pagekit/vue-resource/blob/master/docs/http.md>
按照先后顺序，导入vue.js和vue-resource.js文件。
### get 请求
```javascript
this.$http.get(url)
.then(function (response) {
var data = response.body; //response.body是要获取的数据
},
function (err) {
//err是异常数据
});
```
获取到的`response.body`就是要获取的数据，但直接打印出来是 object，所以要记得转成string。
### jsonp
20180420_2250.png
```javascript
// 利用vue-resource中的jsonp方法实现跨域请求数据，这里要注意的是：
// url后面不需要跟callback=fn这个参数了，jsonp方法会自动加上
this.$http.jsonp('http://vuecms.ittun.com/api/getlunbo?id=1')
.then(function (response) {
console.log(JSON.stringify(response.body));
}, function (err) {
//err是异常数据
});
```
请求结果：
20180420_2256.png

60
21-Vue基础/03-Vue的生命周期函数.md Normal file
View File

@ -0,0 +1,60 @@
## Vue 2.0的生命周期函数
20180420_2305.png
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="app">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vuejs'
},
beforeCreate: function () {
console.log('1.0 beforeCreate', this.msg);
}
,
created: function () {
console.log('2.0 created', this.msg);
}
,
beforeMount: function () {
console.log('3.0 beforeMount', this.msg);
}
,
mounted: function () {
console.log('4.0 mounted', this.msg);
}
});
</script>
</html>
```
打印结果：
20180420_2302.png

7
21-Vue基础/04-Vue组件.md Normal file
View File

@ -0,0 +1,7 @@
## 组件
组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

8
21-Vue基础/其他.md Normal file
View File

@ -0,0 +1,8 @@
##
Vue.component：
帮助我们创建全局组件。