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的生命周期函数
|
||||
|
||||
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Vue 2.0的生命周期函数
|
||||
|
||||
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
|
||||
|
||||
|
||||
## 组件的定义和注册
|
||||
|
||||
组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
|
||||
|
||||
|
||||
### 写法一
|
||||
|
||||
写法一：使用Vue.extend方法定义组件，使用 Vue.component方法注册组件。
|
||||
@ -36,7 +37,7 @@
|
||||
template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>' // template 是 Vue 中的关键字，不能改。
|
||||
});
|
||||
//第二步：注册组件
|
||||
Vue.component('account', myAccount);
|
||||
Vue.component('account', myAccount); //第一个参数是标签名，第二个参数是组件的定义
|
||||
|
||||
new Vue({
|
||||
el: '#app'
|
||||
@ -51,17 +52,17 @@
|
||||
|
||||
运行结果如下：
|
||||
|
||||
20180422_2230.png
|
||||
|
||||
|
||||
代码截图如下：
|
||||
|
||||
20180422_2223.png
|
||||
|
||||
|
||||
上图中，注意两点：
|
||||
|
||||
1、红框部分，要保证二者的名字是一致的。
|
||||
|
||||
2、绿框部分，一定要用一个大的 div 包裹起来。如果我写成下面这样，就没有预期的效果：
|
||||
2、绿框部分，一定要用一个大的根元素（例如`<div>`）包裹起来。如果我写成下面这样，就没有预期的效果：
|
||||
|
||||
```
|
||||
template: '<h2>登录页面</h2> <h3>注册页面</h3>'
|
||||
@ -69,8 +70,7 @@
|
||||
|
||||
结果如下：（并非预期的效果）
|
||||
|
||||
20180422_2232.png
|
||||
|
||||
|
||||
|
||||
### 写法二
|
||||
|
||||
@ -98,9 +98,9 @@
|
||||
|
||||
<script>
|
||||
|
||||
//定义、注册组件
|
||||
//定义、注册组件（第一个参数是标签名，第二个参数是组件的定义）
|
||||
Vue.component('account', {
|
||||
template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>'
|
||||
template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>' // template 是 Vue 中的关键字，不能改。
|
||||
});
|
||||
|
||||
new Vue({
|
||||
@ -114,14 +114,14 @@
|
||||
|
||||
代码截图如下：
|
||||
|
||||
20180422_2251.png
|
||||
|
||||
|
||||
|
||||
上图中，同样注意两点：
|
||||
|
||||
1、红框部分，要保证二者的名字是一致的。
|
||||
|
||||
2、绿框部分，一定要用一个大的 div 包裹起来。如果我写成下面这样，就没有预期的效果：
|
||||
2、绿框部分，一定要用一个大的根元素（例如`<div>`）包裹起来。如果我写成下面这样，就没有预期的效果：
|
||||
|
||||
```
|
||||
template: '<h2>登录页面</h2> <h3>注册页面</h3>'
|
||||
@ -129,7 +129,7 @@
|
||||
|
||||
结果如下：（并非预期的效果）
|
||||
|
||||
20180422_2232.png
|
||||
|
||||
|
||||
|
||||
|
||||
@ -168,7 +168,7 @@
|
||||
|
||||
//定义、注册组件
|
||||
Vue.component('account', {
|
||||
template: '#myAccount'
|
||||
template: '#myAccount' // template 是 Vue 中的关键字，不能改。
|
||||
});
|
||||
|
||||
new Vue({
|
||||
@ -181,12 +181,147 @@
|
||||
```
|
||||
|
||||
|
||||
|
||||
代码截图如下：
|
||||
|
||||
20180422_2256.png
|
||||
|
||||
|
||||
写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了`<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