forked from theluyuan/Web
add：Vue组件的定义
This commit is contained in:
qianguyihao
parent
e4296c62a3
commit
62cc1f8e97
@ -12,6 +12,11 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 在新的窗口中打开文件
|
||||||
|
|
||||||
|
```json
|
||||||
|
"workbench.editor.enablePreview": false,
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
## 常用插件
|
## 常用插件
|
||||||
@ -105,14 +110,26 @@ Sass 文件格式化。
|
|||||||
|
|
||||||
## 常用快捷键
|
## 常用快捷键
|
||||||
|
|
||||||
|
|
||||||
|
| Win快捷键 |Mac快捷键| 作用 | 备注 |
|
||||||
|
|:-------------|:-------------|:-----|:-----|
|
||||||
|
| Shift + Alt + F |Shift + option + F| 代码格式化 | |
|
||||||
|
| Ctrl + Shift + N | |在当前行上面增加一行并跳至该行 | |
|
||||||
|
| **Ctrl + Shift + D** | |复制当前行到下一行 | |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 代码格式化
|
### 代码格式化
|
||||||
|
|
||||||
Shift + Alt + F
|
|
||||||
|
|
||||||
### 如何同时打开多个窗口
|
### 如何同时打开多个窗口
|
||||||
|
|
||||||
|
|
||||||
Ctrl + Shift + N
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,56 +1,56 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Vue 2.0的生命周期函数
|
## Vue 2.0的生命周期函数
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Title</title>
|
<title>Title</title>
|
||||||
<script src="vue2.5.16.js"></script>
|
<script src="vue2.5.16.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!--这个div区域就是MVVM中的 View-->
|
<!--这个div区域就是MVVM中的 View-->
|
||||||
<div id="app">
|
<div id="app">
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
data: {
|
data: {
|
||||||
msg: 'hello vuejs'
|
msg: 'hello vuejs'
|
||||||
},
|
},
|
||||||
beforeCreate: function () {
|
beforeCreate: function () {
|
||||||
console.log('1.0 beforeCreate', this.msg);
|
console.log('1.0 beforeCreate', this.msg);
|
||||||
}
|
}
|
||||||
,
|
,
|
||||||
created: function () {
|
created: function () {
|
||||||
console.log('2.0 created', this.msg);
|
console.log('2.0 created', this.msg);
|
||||||
}
|
}
|
||||||
,
|
,
|
||||||
beforeMount: function () {
|
beforeMount: function () {
|
||||||
console.log('3.0 beforeMount', this.msg);
|
console.log('3.0 beforeMount', this.msg);
|
||||||
}
|
}
|
||||||
,
|
,
|
||||||
mounted: function () {
|
mounted: function () {
|
||||||
console.log('4.0 mounted', this.msg);
|
console.log('4.0 mounted', this.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
打印结果：
|
打印结果：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,12 +1,13 @@
|
|||||||
|
|
||||||
|
|
||||||
## 前言
|
|
||||||
|
|
||||||
组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
|
|
||||||
|
|
||||||
|
|
||||||
## 组件的定义和注册
|
## 组件的定义和注册
|
||||||
|
|
||||||
|
组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
|
||||||
|
|
||||||
|
|
||||||
### 写法一
|
### 写法一
|
||||||
|
|
||||||
写法一：使用Vue.extend方法定义组件，使用 Vue.component方法注册组件。
|
写法一：使用Vue.extend方法定义组件，使用 Vue.component方法注册组件。
|
||||||
@ -36,7 +37,7 @@
|
|||||||
template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>' // template 是 Vue 中的关键字，不能改。
|
template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>' // template 是 Vue 中的关键字，不能改。
|
||||||
});
|
});
|
||||||
//第二步：注册组件
|
//第二步：注册组件
|
||||||
Vue.component('account', myAccount);
|
Vue.component('account', myAccount); //第一个参数是标签名，第二个参数是组件的定义
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app'
|
el: '#app'
|
||||||
@ -51,17 +52,17 @@
|
|||||||
|
|
||||||
运行结果如下：
|
运行结果如下：
|
||||||
|
|
||||||
20180422_2230.png
|
|
||||||
|
|
||||||
代码截图如下：
|
代码截图如下：
|
||||||
|
|
||||||
20180422_2223.png
|
|
||||||
|
|
||||||
上图中，注意两点：
|
上图中，注意两点：
|
||||||
|
|
||||||
1、红框部分，要保证二者的名字是一致的。
|
1、红框部分，要保证二者的名字是一致的。
|
||||||
|
|
||||||
2、绿框部分，一定要用一个大的 div 包裹起来。如果我写成下面这样，就没有预期的效果：
|
2、绿框部分，一定要用一个大的根元素（例如`<div>`）包裹起来。如果我写成下面这样，就没有预期的效果：
|
||||||
|
|
||||||
```
|
```
|
||||||
template: '<h2>登录页面</h2> <h3>注册页面</h3>'
|
template: '<h2>登录页面</h2> <h3>注册页面</h3>'
|
||||||
@ -69,8 +70,7 @@
|
|||||||
|
|
||||||
结果如下：（并非预期的效果）
|
结果如下：（并非预期的效果）
|
||||||
|
|
||||||
20180422_2232.png
|
|
||||||
|
|
||||||
|
|
||||||
### 写法二
|
### 写法二
|
||||||
|
|
||||||
@ -98,9 +98,9 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
//定义、注册组件
|
//定义、注册组件（第一个参数是标签名，第二个参数是组件的定义）
|
||||||
Vue.component('account', {
|
Vue.component('account', {
|
||||||
template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>'
|
template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>' // template 是 Vue 中的关键字，不能改。
|
||||||
});
|
});
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
@ -114,14 +114,14 @@
|
|||||||
|
|
||||||
代码截图如下：
|
代码截图如下：
|
||||||
|
|
||||||
20180422_2251.png
|
|
||||||
|
|
||||||
|
|
||||||
上图中，同样注意两点：
|
上图中，同样注意两点：
|
||||||
|
|
||||||
1、红框部分，要保证二者的名字是一致的。
|
1、红框部分，要保证二者的名字是一致的。
|
||||||
|
|
||||||
2、绿框部分，一定要用一个大的 div 包裹起来。如果我写成下面这样，就没有预期的效果：
|
2、绿框部分，一定要用一个大的根元素（例如`<div>`）包裹起来。如果我写成下面这样，就没有预期的效果：
|
||||||
|
|
||||||
```
|
```
|
||||||
template: '<h2>登录页面</h2> <h3>注册页面</h3>'
|
template: '<h2>登录页面</h2> <h3>注册页面</h3>'
|
||||||
@ -129,7 +129,7 @@
|
|||||||
|
|
||||||
结果如下：（并非预期的效果）
|
结果如下：（并非预期的效果）
|
||||||
|
|
||||||
20180422_2232.png
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -168,7 +168,7 @@
|
|||||||
|
|
||||||
//定义、注册组件
|
//定义、注册组件
|
||||||
Vue.component('account', {
|
Vue.component('account', {
|
||||||
template: '#myAccount'
|
template: '#myAccount' // template 是 Vue 中的关键字，不能改。
|
||||||
});
|
});
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
@ -181,12 +181,147 @@
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
代码截图如下：
|
代码截图如下：
|
||||||
|
|
||||||
20180422_2256.png
|
|
||||||
|
|
||||||
写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了`<template>`标签中而已，这样有利于 html 标签的书写。
|
写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了`<template>`标签中而已，这样有利于 html 标签的书写。
|
||||||
|
|
||||||
|
## 为组件添加 data 和 method
|
||||||
|
|
||||||
|
既然组件是一个页面，那么，页面中可能会有一些功能要**动态展示**。因此，我们有必要为组件添加 data 和 method。
|
||||||
|
|
||||||
|
代码举例如下：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Document</title>
|
||||||
|
<script src="vue2.5.16.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- 定义模板 -->
|
||||||
|
<template id="myAccount">
|
||||||
|
<div>
|
||||||
|
{{myData}}
|
||||||
|
<a href="#" v-on:click="login">登录1</a>
|
||||||
|
<h2>登录页面</h2>
|
||||||
|
<h3>注册页面</h3>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div id="app">
|
||||||
|
<account> </account>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
//定义、注册组件
|
||||||
|
Vue.component('account', {
|
||||||
|
template: '#myAccount',
|
||||||
|
//组件中的 data
|
||||||
|
//注意，组件中的data，是一个方法，而不是对象，否则无效果
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
myData: 'smyhvae'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//组件中的 method
|
||||||
|
methods: {
|
||||||
|
login: function () {
|
||||||
|
alert('login操作');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#app'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
上方代码所示，我们在`account`组件中添加的data 和 method，其**作用域**只限于`account`组件里，保证独立性。
|
||||||
|
|
||||||
|
注意，在为组件添加数据时，data不再是对象了，而是方法，而且要通过 return的形式进行返回；否则，页面上是无法看到效果的。
|
||||||
|
|
||||||
|
|
||||||
|
## 子组件的定义和注册
|
||||||
|
|
||||||
|
|
||||||
|
我们在本文的第一段中，通过`Vue.component`形式定义的是**全局组件**。这一段中，我们来讲一下**子组件**。
|
||||||
|
|
||||||
|
比如说，一个`账号`模块是父组件，里面分为`登陆`模块和`注册`模块，这两个模块可以定义为子组件。
|
||||||
|
|
||||||
|
|
||||||
|
需要注意的是，我们在父组件中定义的子组件，只能在当前父组件中使用；在其他的组件，甚至根组件中，都无法使用。
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Document</title>
|
||||||
|
<script src="vue2.5.16.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="app">
|
||||||
|
<account>
|
||||||
|
|
||||||
|
</account>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
//定义、注册组件
|
||||||
|
Vue.component('account', {
|
||||||
|
template: '<div><h2>账号模块</h2> <login></login></div>',
|
||||||
|
components: {
|
||||||
|
'login': {
|
||||||
|
template: '<h3>登录模块</h3>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#app'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
显示效果：
|
||||||
|
|
||||||
|
20180423_1029.png
|
||||||
|
|
||||||
|
## 组件之间的动态切换
|
||||||
|
|
||||||
|
我们可以利用`<component> `标签的`:is`参数来进行组件之间的切换。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
5
21-Vue基础/20180423.md
Normal file
5
21-Vue基础/20180423.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
|
||||||
|
|
||||||
|
自定义组件中，第一个参数是标签名，第二个参数是组件的定义。
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user