diff --git a/19-面试题积累/02-HTML和CSS相关.md b/19-面试题积累/02-HTML和CSS相关.md index 2d19088..bc8a54e 100644 --- a/19-面试题积累/02-HTML和CSS相关.md +++ b/19-面试题积累/02-HTML和CSS相关.md @@ -100,7 +100,7 @@ 2、**块级元素:**(让标准流中的盒子水平居中) -给父亲设置: +给元素设置:(让当前元素在父亲里剧中) ``` //方式一 diff --git a/21-Vue基础/02-Vue中的Ajax请求.md b/21-Vue基础/02-Vue中的Ajax请求.md index 9929c88..590502e 100644 --- a/21-Vue基础/02-Vue中的Ajax请求.md +++ b/21-Vue基础/02-Vue中的Ajax请求.md @@ -10,6 +10,8 @@ ### get 请求 +**格式**: + ```javascript this.$http.get(url) .then(function (response) { @@ -20,9 +22,404 @@ }); ``` - 获取到的`response.body`就是要获取的数据,但直接打印出来是 object,所以要记得转成string。 +**举例**:获取数据 + +现规定,获取品牌数据的 api 接口说明如下: + +20180422_2140.png + + + +```html + + + + + + Document + + + + + + +
+ + + + + + + + + + + + + + + + + +
编号名称创建时间操作
{{item.id}}{{item.name}}{{item.ctime}} + 删除 +
+
+ + + + + +``` + +上方代码中,我们用到了生命周期函数`created`,意思是:程序一加载,就马上在`created`这个函数里执行`getlist()`方法。 + + +运行的结果如下: + +20180422_2152.png + +如果我直接在浏览器中输入请求的url,获取的json数据如下:(这种方式获取的是相同的数据) + +20180422_2150.png + + +### post请求 + +**格式**: + +```javascript + // 调用 $http.post(url, 传给服务器的请求体中的数据, {emulateJSON:true}) + this.$http.post(url, { name: '奔驰' }, { emulateJSON: true }) + .then(function (response) { + alert(response.body.message); + }, + function (error) { + + }); +``` + +上方代码中,post()方法中有三个参数,其中第三个参数是固定值,照着写就可以了。 + + +**代码举例**:(添加数据) + +现规定,添加品牌数据的 api 接口说明如下: + +20180422_1720.png + + +代码如下:(在上一段代码的基础之上,添加代码) + +```html + + + + + + Document + + + + + + +
+ + + + + + + + + + + + + + + + +
编号名称创建时间操作
{{item.id}}{{item.name}}{{item.ctime}} + 删除 +
+
+ + + + +``` + + +**代码举例**:(删除数据) + +```html + + + + + + Document + + + + + + +
+ + + + + + + + + + + + + + + + +
编号名称创建时间操作
{{item.id}}{{item.name}}{{item.ctime}} + + 删除 +
+
+ + + + + +``` ### jsonp @@ -45,3 +442,5 @@ 20180420_2256.png + + diff --git a/21-Vue基础/03-Vue的生命周期函数.md b/21-Vue基础/03-Vue的生命周期函数.md index 13ba70c..8b2404e 100644 --- a/21-Vue基础/03-Vue的生命周期函数.md +++ b/21-Vue基础/03-Vue的生命周期函数.md @@ -3,9 +3,7 @@ ## Vue 2.0的生命周期函数 -20180420_2305.png - - +![](http://img.smyhvae.com/20180422_1650.png) ```html @@ -51,10 +49,8 @@ ``` - 打印结果: -20180420_2302.png - +![](http://img.smyhvae.com/20180420_2302.png) diff --git a/21-Vue基础/04-Vue组件.md b/21-Vue基础/04-Vue组件.md index c1fb39e..2d31bde 100644 --- a/21-Vue基础/04-Vue组件.md +++ b/21-Vue基础/04-Vue组件.md @@ -1,7 +1,192 @@ -## 组件 +## 前言 组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。 +## 组件的定义和注册 + +### 写法一 + +写法一:使用Vue.extend方法定义组件,使用 Vue.component方法注册组件。 + +代码举例: + +```html + + + + + + + + Document + + + + +
+ +
+ + + + + +``` + +上方代码中,绿框部分的内容,就是我想定义的整个组件。 + +运行结果如下: + +20180422_2230.png + +代码截图如下: + +20180422_2223.png + +上图中,注意两点: + +1、红框部分,要保证二者的名字是一致的。 + +2、绿框部分,一定要用一个大的 div 包裹起来。如果我写成下面这样,就没有预期的效果: + +``` + template: '

登录页面

注册页面

' +``` + +结果如下:(并非预期的效果) + +20180422_2232.png + + +### 写法二 + + +写法二:Vue.component方法定义、注册组件(一步到位)。 + +代码如下: + +```html + + + + + + + + Document + + + + +
+ +
+ + + + + +``` + +代码截图如下: + +20180422_2251.png + + +上图中,同样注意两点: + +1、红框部分,要保证二者的名字是一致的。 + +2、绿框部分,一定要用一个大的 div 包裹起来。如果我写成下面这样,就没有预期的效果: + +``` + template: '

登录页面

注册页面

' +``` + +结果如下:(并非预期的效果) + +20180422_2232.png + + + +### 写法三【荐】 + +写法三:将组件内容定义到template标签中去。 + +代码如下: + +```html + + + + + + + + Document + + + + + + + +
+ +
+ + + + + +``` + + + +代码截图如下: + +20180422_2256.png + +写法三其实和方法二差不多,无非是把绿框部分的内容,单独放在了`