Vue官方文档学习
一、vue介绍
声明式渲染， 可以通过简单的模板语法来声明式地将数据渲染
-
第一个vue应用：
Title {{ message }} -
第二个应用：除了文本插值，我们还可以像这样来绑定元素 attribute：
Title 鼠标悬停几秒钟查看此处动态绑定的提示信息！效果如下：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DJyU1kSp-1616393400550)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20210322103556455.png)]](http://img.e-com-net.com/image/info8/c48ea39a707f449aafa8fe9dcc8dca23.png)
条件与循环， 控制切换一个元素
-
第三个vue应用：
Title 现在你看到我了
效果如下：
-
第四个vue应用：使用v-for:
Title - {{ todo.text }}
效果如下：
在控制台里，输入
app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
处理用户输入
5.第五个vue应用：
Title
{{ message }}
效果如下：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-27MMqrjE-1616393400557)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20210322111131192.png)]](http://img.e-com-net.com/image/info8/dde61cf834ca429bac71cf57d895cfc8.png)
6.第六个应用：
Title
{{ message }}
效果如下：
组件化构建应用： 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例
-
第七个vue实例：
Title 效果如下：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7bKqePL5-1616393400559)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20210322114502542.png)]](http://img.e-com-net.com/image/info8/47d19c247aa04a2cad4187ca19bba55a.png)
二、Vue实例
- 创建第一个Vue实例， 在文档中经常会使用
vm(ViewModel 的缩写) 这个变量名表示 Vue 实例。
一、实例声明周期钩子
-
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模 板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如create钩子可以采用在第一个实例被创建之后执行代码：，，生命周期钩子的
this上下文指向调用它的 Vue 实例。Title 控制台输出效果如下：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xCx4MOa4-1616393400560)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20210322115917227.png)]](http://img.e-com-net.com/image/info8/76febd03a3364608908451c30ba1bf27.png)
二、模板语法
三、列表渲染，使用v-for把一个数组对应为一组元素
- 可以用
v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。
Title
-
{{ item.message }}
-
{{ parentMessage }} - {{ index }} - {{ item.message }}
效果如下：
2、在v-for里面使用对象， 你也可以用
v-for来遍历一个对象的 property。
Title
-
{{ value }}
效果如图：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3dkmXGQy-1616393400561)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20210322140302596.png)]](http://img.e-com-net.com/image/info8/8c799941de1e4c26a96d0e4c6168994e.png)
也可以使用提供的第二个的参数为property名字（也就是键名），如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<ul id="v-for-object" class="demo">
<li v-for="(value, name) in object">
{{name}} : {{ value }}
li>
ul>
body>
<script>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
script>
html>
效果如下：
四、事件处理：
- 监听事件： 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="example-1">
<button v-on:click="counter += 1">Add 1button>
<p>The button above has been clicked {{ counter }} times.p>
div>
body>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
script>
html>
效果如下：
2.事件处理方法： 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="example-2">
<button v-on:click="greet">Greetbutton>
div>
body>
<script>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
script>
html>
3、内联处理器中的方法： 除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="example-3">
<button v-on:click="say('hi')">Say hibutton>
<button v-on:click="say('what')">Say whatbutton>
div>
body>
<script>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
script>
html>
效果如下：
4、事件修饰符： Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
<a v-on:click.stop="doThis">a>
<form v-on:submit.prevent="onSubmit">form>
<a v-on:click.stop.prevent="doThat">a>
<form v-on:submit.prevent>form>
<div v-on:click.capture="doThis">...div>
<div v-on:click.self="doThat">...div>
三、组件基础
1、基础示例, 我们先定义一个Vue组件实例
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.button>'
})
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
<div id="components-demo">
<button-counter>button-counter>
div>
new Vue({ el: '#components-demo' })
完整代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="components-demo">
<button-counter>button-counter>
div>
body>
<script>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: ''
})
new Vue({ el: '#components-demo' })
script>
html>
效果如下：
2、组件的复用， 在上面实例中在添加几个就可以使用组件复用啦，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
<div id="components-demo">
<button-counter>button-counter>
<button-counter>button-counter>
<button-counter>button-counter>
div>
完整代码如如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="components-demo">
<button-counter>button-counter>
<button-counter>button-counter>
<button-counter>button-counter>
div>
body>
<script>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: ''
})
new Vue({ el: '#components-demo' })
script>
html>
效果如下：
2、组件的组织
3、通过Prop向子组件传递数据
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}h3>'
})
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来：
<blog-post title="My journey with Vue">blog-post>
<blog-post title="Blogging with Vue">blog-post>
<blog-post title="Why Vue is so fun">blog-post>
完整代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="components-demo">
<blog-post title="My journey with Vue">blog-post>
<blog-post title="Blogging with Vue">blog-post>
<blog-post title="Why Vue is so fun">blog-post>
div>
body>
<script>
// 定义一个名为 button-post 的组件
Vue.component('blog-post', {
props: ['title'],
template: '{{ title }}
'
})
new Vue({ el: '#components-demo' })
script>
html>
效果如下图：
然而在一个典型的应用中，你可能在 data 里有一个博文的数组：
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
并想要为每篇博文渲染一个组件：
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
>blog-post>
完整代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="components-demo">
<blog-post title="My journey with Vue">blog-post>
<blog-post title="Blogging with Vue">blog-post>
<blog-post title="Why Vue is so fun">blog-post>
div>
body>
<script>
// 定义一个名为 button-post 的组件
Vue.component('blog-post', {
props: ['title'],
template: '{{ title }}
'
})
new Vue({ el: '#components-demo' })
script>
html>
效果如下：
4、监听子组件事件
四、组件注册
1、组件名， 在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了。
Vue.component('my-component-name', { /* ... */ })
该组件名就是 Vue.component 的第一个参数。
2、全局注册：， 到目前为止，我们只用过 Vue.component 来创建组件：
Vue.component('my-component-name', {
// ... 选项 ...
})
这些组件都是全局注册的。 也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
<div id="app">
<component-a>component-a>
<component-b>component-b>
<component-c>component-c>
div>
注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}
3、在模块系统中局部注册：， 例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
4、基础组件的自动化全局注册
import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}
五、Prop
1、Prop： prop的作用是父组件向子组件单向传递数据，这个过程是单向的。传递的属性可以是静态的，可以是动态的，可以是数字，可以是字符串，可以是数组，还可以是对象，甚至可以在传递数据的时候写一个校验函数进行校验。
类型 ： props: [‘title’, ‘likes’, ‘isPublished’, ‘commentIds’, ‘author’]
可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型：
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
2、传递静态或动态Prop
子组件：
<template>
<div>
<h1>{{ msg }}h1>
div>
template>
<script>
export default {
props: ["msg"]
}
script>
父组件：
<template>
<div id="app">
<HelloWorld msg="hello"/>
div>
template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
}
};
script>
好了，这样就完成了一个最简单的使用prop接收父元素的值
3、传动态字符串
子组件：
<template>
<div>
<h1>{{ msg }}h1>
div>
template>
<script>
export default {
props: ["msg"]
}
script>
父组件：
<template>
<div id="app">
<HelloWorld :msg="hello"/>
div>
template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {
hello: "hello world"
}
}
};
script>
4、传动态数组
子组件：
<template>
<div>
<ul>
<li v-for="item in msg" :key="item">
{{ item }}
li>
ul>
div>
template>
<script>
export default {
props: ["msg"]
}
script>
父组件：
<template>
<div id="app">
<HelloWorld :msg="hello"/>
div>
template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {
hello: ["aa", "bb", "cc"]
}
}
};
script>
5、传动态对象
子组件：
<template>
<div>
<h1>{{ msg.id }}h1>
<h2>{{ msg.name }}h2>
div>
template>
<script>
export default {
props: ["msg"]
}
script>
父组件：
<template>
<div id="app">
<HelloWorld :msg="hello"/>
div>
template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {
hello: {
id: 1,
name: "hello dj"
}
}
}
};
script>