add：Vue相关。
This commit is contained in:
qianguyihao
parent
181e970997
commit
d73acce6df
@ -74,7 +74,7 @@
|
||||
|
||||
- vue的双向绑定怎么实现的？我是说怎么实现？
|
||||
|
||||
我当时是回答MVVM模式。其实还需要答出Object.defineProperty( )的细节。
|
||||
我当时是回答MVVM模式。其实还需要答出Object.defineProperty( )的细节，以及虚拟DOM。
|
||||
|
||||
|
||||
- Vue里还有什么呢？
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
|
||||
|
||||
- [Get全栈技能点 Vue2.0/Node.js/MongoDB 打造商城系统](https://coding.imooc.com/class/chapter/113.html)
|
||||
|
||||
## MVVM模式
|
||||
|
||||
20180420_2150.png
|
||||
|
||||
- Model：负责数据存储
|
||||
|
||||
- View：负责页面展示
|
||||
@ -381,6 +382,10 @@ cnpm run dev
|
||||
|
||||
|
||||
|
||||
本文参考链接：
|
||||
|
||||
- [Get全栈技能点 Vue2.0/Node.js/MongoDB 打造商城系统](https://coding.imooc.com/class/chapter/113.html)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
|
||||
|
||||
如果我们在控制台输入`myVue.data+='123'`，页面会**自动更新**name的值。
|
||||
如果我们在控制台输入`myVue.$data.name = 'haha'`，页面会**自动更新**name的值。意思是，当我们直接修改data数据，页面会自动更新，而不用去操作DOM。
|
||||
|
||||
|
||||
下面来讲一下Vue的各种系统指令。
|
||||
|
||||
@ -103,7 +103,7 @@
|
||||
|
||||
具体实现步骤如下：
|
||||
|
||||
（1）用户填写的数据单独存放在data属性里，并采用`v-module`进行双向绑定。
|
||||
（1）用户填写的数据单独存放在data属性里，并采用`v-model`进行双向绑定。
|
||||
|
||||
（2）用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内容）。
|
||||
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
|
||||
|
||||
|
||||
Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器，Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。
|
||||
|
||||
|
||||
## 系统过滤器
|
||||
|
||||
Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器，Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。
|
||||
|
||||
|
||||
系统过滤器的使用，可以参考参考文档：<http://v1-cn.vuejs.org/api/#过滤器>
|
||||
|
||||
注意：系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。
|
||||
@ -79,7 +81,7 @@ Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些
|
||||
|
||||
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按键修饰符实现品牌管理的新增按钮功能
|
||||
- 效果图
|
||||
|
||||
|
||||
|
||||
|
||||
- 实现代码
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
47
21-Vue基础/02-Vue中的Ajax请求.md
Normal file
47
21-Vue基础/02-Vue中的Ajax请求.md
Normal 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
60
21-Vue基础/03-Vue的生命周期函数.md
Normal 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
7
21-Vue基础/04-Vue组件.md
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
|
||||
## 组件
|
||||
|
||||
组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
|
||||
|
||||
|
||||
8
21-Vue基础/其他.md
Normal file
8
21-Vue基础/其他.md
Normal file
@ -0,0 +1,8 @@
|
||||
|
||||
|
||||
##
|
||||
|
||||
Vue.component：
|
||||
|
||||
|
||||
帮助我们创建全局组件。
|
||||
Loading…
Reference in New Issue
Block a user