Vue学习笔记
文章目录
- Node.js
- Vue简介
-
- Node和NPM
- 下载Node.js
- NPM
- demo
-
- 双向绑定 v-model:数据模型
- 事件处理 v-on:事件名=js表达式
- 生命周期函数
- 指令
-
- 插值表达式
-
- 花括号
- 插值闪烁
- v-text和v-html
- v-model
- v-on
-
- 基本用法
- 事件修饰符
- 按键修饰符
- 组合按钮
- v-for
-
- 遍历数组
- 数组角标
- 遍历对象
- key
- v-if和v-show
-
- 基本使用
- 与v-for结合
- v-else
- v-show
- v-bind（渲染属性）
-
- 绑定class样式
- 绑定style样式
- 简写
- 计算属性
- watch
- 组件化
-
- 全局组件
- 组件的复用
- 局部组件
- 组件通信
-
- props（父向子传递）
- props验证
- 动态静态传递
- 子向父的通信：$emit
- 路由vue-router
-
- 场景模拟
-
- 编写父组件
- 编写登录及注册组件
- 在父组件中引用
- 问题
- vue-router简介和安装
- 快速入门
- NPM安装依赖
- Vue项目结构
-
- 主要的配置文件
-
- package.json
Node.js
2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.js
Node.js：基于 Chrome V8 引擎的 JavaScript 运行环境，类比java中jvm
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
- 基于事件循环的异步IO
- 单线程运行，避免多线程的变量同步问题
- JS可以编写后台代码，前后台统一编程语言
node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。
2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。
随后，在node的基础上，涌现出了一大批的前端框架：
MVVM模式
- M：即Model，模型，包括数据和一些基本操作
- V：即View，视图，页面渲染结果
- VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）
在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：
- 只要我们Model发生了改变，View上自然就会表现出来。
- 当用户修改了View，Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。
Vue简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称，vue.js和React.js发展速度最快，AngularJS还是老大。
Node和NPM
NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。安装node及NPM工具。
下载Node.js
下载地址：https://nodejs.org/en/
完成以后，在控制台输入：
node -v
看到版本信息：
NPM
node.js的包管理系统
Node自带了NPM了，在控制台输入npm -v查看：
npm默认的仓库地址是在国外网站，速度较慢，建议设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm
我们首先安装nrm，这里-g代表全局安装。可能需要一点儿时间
npm install nrm -g
然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库
通过nrm use taobao来指定要使用的镜像源
然后通过nrm test npm来测试速度
demo
创建静态工程
在idea的左下角，有个Terminal按钮，点击打开控制台：
进入工程目录，先输入：npm init -y 进行初始化
安装Vue，输入命令：npm install vue --save
然后就会在工程目录发现一个node_modules目录，并且在下面有一个vue目录。
node_modules是通过npm安装的所有模块的默认位置。
双向绑定 v-model:数据模型
新建html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--vue对象的html模板-->
<body>
<div id="test">
<input type="text" v-model="num">
<h1>this is {
{
name}},number is {
{
num}}</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<!--初始化一个vue实例-->
<script>
const app = new Vue({
el:"#test",
data: {
name: "dustdawn",
num: 20
}
})
</script>
</body>
</html>
- 首先通过 new Vue()来创建Vue实例
- 然后构造函数接收一个对象，对象中有一些属性：
- el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
- name：这里我们指定了一个name属性
- 页面中的
h1元素中，我们通过{ {name}}的方式，来渲染刚刚定义的name属性。 - 在页面中有一个
input元素，通过v-model与num进行绑定。 - 同时通过
{ {num}}在页面输出 - 输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。
- input与num绑定，input的value值变化，影响到了data中的num值
- 页面{ {num}}与数据num绑定，因此num值变化，引起了页面效果变化。
没有任何dom操作，这就是双向绑定。
事件处理 v-on:事件名=js表达式
我们在页面添加一个按钮：
<input type="button" value="加一" v-on:click="num++">
- 这里用
v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num - 普通click是无法直接操作num的。
效果：
<input type="button" value="减一" v-on:click="fun">
<script>
const app = new Vue({
el:"#test",
data: {
name: "dustdawn",
num: 20
},
methods: {
fun(){
this.num--;
}
}
})
</script>
生命周期函数
-
beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。
-
created：在创建实例之后进行调用。
-
beforeMount：页面加载完成，没有渲染。如：此时页面还是{ {name}}
-
mounted：我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。
-
beforeDestroy：该函数将在销毁实例前进行调用 。
-
destroyed：改函数将在销毁实例时进行调用。
-
beforeUpdate：组件更新之前。
-
updated：组件更新之后。
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
例如前面的v-on，代表绑定事件。
插值表达式
花括号
格式：
{
{
表达式}}
插值闪烁
使用{ {}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{ {}}，加载完毕后才显示正确数据，我们称为插值闪烁。
v-text和v-html
使用v-text和v-html指令来替代{ {}}解决插值闪烁
说明：
- v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
- v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
并且不会出现插值闪烁，当没有数据时，会显示空白。
v-model
刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。而v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：
- input
- select
- textarea
- checkbox
- radio
- components（Vue中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。
<div id="app">
<input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="Swift" />Swift<br/>
<h1>
你选择了：{
{
language.join(',')}}
</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
language: []
}
})
</script>
- 多个
CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型 - radio对应的值是input的value值
text和textarea默认对应的model是字符串select单选对应字符串，多选对应也是数组
v-on
基本用法
v-on指令用于给页面元素绑定事件。
语法：
v-on:事件名="js片段或函数名"
事件绑定可以简写，例如v-on:click='add’可以简写为@click=‘add’
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
.stop：阻止事件冒泡到父元素.prevent：阻止默认事件发生*.capture：使用事件捕获模式.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）.once：只执行一次
阻止默认事件
<div id="app">
<button v-on:contextmenu.prevent="num++">增加一个button>
<br/>
<button v-on:contextmenu="decrement($event)">减少一个button>
<br/>
<h1>number is {
{num}}h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
num: 100
},
methods: {
decrement(ev) {
// ev.preventDefault();
this.num--;
}
}
})
script>
按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<input v-on:keyup.13="submit">
字母数字对应相应ascii码
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">
全部的按键别名：
.enter*.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
组合按钮
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl.alt.shift
例如：
<input @keyup.alt.67="clear">
<div @click.ctrl="doSomething">Do somethingdiv>
v-for
遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
遍历数组
语法：
v-for="item in items"
- items：要遍历的数组，需要在vue的data中定义好。
- item：迭代得到的数组元素的别名
示例
<div id="app">
<ul>
<li v-for="user in users">
{
{user.name}} - {
{user.gender}} - {
{user.age}}
li>
ul>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
users:[
{
name:'李华', gender:'女', age: 21},
{
name:'马克', gender:'男', age: 18},
{
name:'露西', gender:'女', age: 24},
{
name:'赵云', gender:'男', age: 18},
{
name:'孙河', gender:'男', age: 25}
]
},
})
script>
效果
数组角标
在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
语法
v-for="(item,index) in items"
- items：要迭代的数组
- item：迭代得到的数组元素别名
- index：迭代到的当前元素索引，从0开始。
示例
<ul>
<li v-for="(user, index) in users">
{
{index + 1}}. {
{user.name}} - {
{user.gender}} - {
{user.age}}
li>
ul>
效果：
遍历对象
v-for除了可以迭代数组，也可以迭代对象。语法基本类似
语法：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
- 1个参数时，得到的是对象的属性值
- 2个参数时，第一个是属性值，第二个是属性名
- 3个参数时，第三个是索引，从0开始
示例：
<div id="app">
<ul>
<li v-for="(value, key, index) in user">
{
{index + 1}}. {
{key}} - {
{value}}
li>
ul>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
user:{
name:'李华', gender:'男', age: 18}
}
})
script>
效果
key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
这个功能可以有效的提高渲染的效率。
但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。
示例：
<ul>
<li v-for="(item,index) in items" :key=index>li>
ul>
- 这里使用了一个特殊语法：
:key=""我们后面会讲到，它可以让你读取vue中的属性，并赋值给key属性 - 这里我们绑定的key是数组的索引，应该是唯一的
v-if和v-show
基本使用
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
语法：
v-if="布尔表达式"
示例：
<div id="app">
<button v-on:click="show = !show">点我呀button>
<br>
<h1 v-if="show">
看到我啦？！
h1>
<h1 v-show="show">
看到我啦？！show
h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
show: true
}
})
script>
效果：
与v-for结合
当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。
修改v-for中的案例，添加v-if：
<ul>
<li v-for="(user, index) in users" v-if="user.gender == '女'">
{
{index + 1}}. {
{user.name}} - {
{user.gender}} - {
{user.age}}
li>
ul>
v-else
你可以使用 v-else 指令来表示 v-if 的“else 块”：
<div id="app">
<h1 v-if="Math.random() > 0.5">
看到我啦？！if
h1>
<h1 v-else>
看到我啦？！else
h1>
div>
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
<div id="app">
<button v-on:click="random=Math.random()">点我呀button><span>{
{random}}span>
<h1 v-if="random >= 0.75">
看到我啦？！if
h1>
<h1 v-else-if="random > 0.5">
看到我啦？！if 0.5
h1>
<h1 v-else-if="random > 0.25">
看到我啦？！if 0.25
h1>
<h1 v-else>
看到我啦？！else
h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
random: 1
}
})
script>
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
Hello!
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-bind（渲染属性）
html属性不能使用双大括号形式绑定，只能使用v-bind指令。
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
<div id="app">
<div v-bind:title="title" style="border: 1px solid red; width: 50px; height: 50px;">div>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
title: "title",
}
})
script>
效果：
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
绑定class样式
数组语法
我们可以借助于v-bind指令来实现：
HTML：
<div id="app">
<div v-bind:class="activeClass">div>
<div v-bind:class="errorClass">div>
<div v-bind:class="[activeClass, errorClass]">div>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
activeClass: 'active',
errorClass: ['text-danger', 'text-error']
}
})
script>
对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }">div>
上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness（所有的值都是真实的，除了false,0,“”,null,undefined和NaN）。
你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。如下模板:
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
div>
和如下 data：
data: {
isActive: true,
hasError: false
}
结果渲染为：
<div class="static active">div>
active样式和text-danger样式的存在与否，取决于isActive和hasError的值。本例中isActive为true，hasError为false，所以active样式存在，text-danger不存在。
绑定style样式
数组语法
数组语法可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]">div>
数据：
data: {
baseStyles: {
'background-color': 'red'},
overridingStyles: {
border: '1px solid black'}
}
渲染后的结果：
<div style="background-color: red; border: 1px solid black;">div>
对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
<div v-bind:style="{
color: activeColor, fontSize: fontSize + 'px' }">div>
数据：
data: {
activeColor: 'red',
fontSize: 30
}
效果：
<div style="color: red; font-size: 30px;">div>
简写
v-bind:class可以简写为:class
计算属性
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：
data:{
birthday:1529032123201 // 毫秒值
}
我们在页面渲染，希望得到yyyy-MM-dd的样式：
<h1>您的生日是：{
{
new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
}}
h1>
虽然能得到结果，但是非常麻烦。
Vue中提供了计算属性，来替代复杂的表达式：
var vm = new Vue({
el:"#app",
data:{
birthday:1429032123201 // 毫秒值
},
computed:{
birth(){
// 计算属性本质是一个方法，但是必须返回结果
const d = new Date(this.birthday);
return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
}
}
})
- 计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。
页面使用：
<div id="app">
<h1>您的生日是：{
{birth}} h1>
div>
效果：
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要birthday还没有发生改变，多次访问 birthday 计算属性会立即返回之前的计算结果，而不必再次执行函数。
watch
watch可以让我们监控一个值的变化。从而做出相应的反应。
示例：
<div id="app">
<input type="text" v-model="message">
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:""
},
watch:{
message(newVal, oldVal){
console.log(newVal, oldVal);
}
}
})
script>
组件化
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
在vue里，所有的vue实例都是组件
全局组件
我们通过Vue的component方法来定义一个全局组件。
<div id="app">
<counter>counter>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
// 定义全局组件，两个参数：1，组件名称。2，组件参数
Vue.component("counter",{
template:'',
data(){
return {
count:0
}
}
})
var app = new Vue({
el:"#app"
})
script>
- 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
- 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
- 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
- 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
- data必须是一个函数，不再是一个对象。
组件的复用
定义好的组件，可以任意复用多次：
<div id="app">
<counter>counter>
<counter>counter>
<counter>counter>
div>
效果：
你会发现每个组件互不干扰，都有自己的count值。怎么实现的？
组件的data属性必须是函数！
当我们定义这个
data: {
count: 0
}
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () {
return {
count: 0
}
}
如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！
局部组件
一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。
因此，对于一些并不频繁使用的组件，我们会采用局部注册。
我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：
const counter = {
template:'',
data(){
return {
count:0
}
}
};
然后在Vue中使用它：
var app = new Vue({
el:"#app",
components:{
counter:counter // 将定义的对象注册为组件
}
})
- components就是当前vue对象子组件集合。
- 其key就是子组件名称
- 其值就是组件对象名
- 效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用
组件通信
通常一个单页应用会以一棵嵌套的组件树的形式来组织：
- 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
- 左侧内容区又分为上下两个组件
- 右侧边栏中又包含了3个子组件
各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。
props（父向子传递）
- 父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
- 子组件通过props接收父组件数据，通过自定义属性的属性名
父组件使用子组件，并自定义了title属性：
<div id="app">
<h1>打个招呼：h1>
<introduce title="I'm dustdawn"/>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
Vue.component("introduce",{
// 直接使用props接收到的属性来渲染页面
template:'{
{title}}
',
props:['title'] // 通过props来接收一个父组件传递的属性
})
var app = new Vue({
el:"#app"
})
script>
效果：
props验证
我们定义一个子组件，并接收复杂数据：
const myList = {
template: '\
\
- {
{item.id}} : {
{item.name}}
\
\
',
props: {
items: {
type: Array,
default: [],
required: true
}
}
};
- 这个子组件可以对 items 进行迭代，并输出到页面。
- props：定义需要从父组件中接收的属性
- items：是要接收的属性名称
- type：限定父组件传递来的必须是数组
- default：默认值
- required：是否必须
- items：是要接收的属性名称
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
我们在父组件中使用它：
<div id="app">
<h2>课程：h2>
<counter :items="lessons"/>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
const counter = {
template: '\
\
- {
{item.id}} : {
{item.name}}
\
\
',
props: {
items: {
type: Array,
default: [],
required: true
}
}
};
var app = new Vue({
el:"#app",
components:{
counter // 当key和value一样时，可以只写一个
},
data:{
lessons:[
{
id:1, name: 'java'},
{
id:2, name: 'php'},
{
id:3, name: 'ios'},
]
}
})
script>
效果：
type类型，可以有：
注意：子组件模板有且只有一个根标签
动态静态传递
给 prop 传入一个静态的值：
<introduce title="I'm dustdawn"/>
给 prop 传入一个动态的值： （通过v-bind从数据模型中，获取title的值）
<introduce :title="title"/>
静态传递时，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 props。
<blog-post v-bind:likes="42">blog-post>
<blog-post v-bind:likes="post.likes">blog-post>
子向父的通信：$emit
<div id="app">
<h2>num: {
{num}}h2>
<counter :num="num">counter>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
Vue.component("counter", {
// 子组件，定义了两个按钮，点击数字num会加或减
template:'\
\
\
\
',
props:['num']// count是从父组件获取的。
})
var app = new Vue({
el:"#app",
data:{
num:0
}
})
script>
- 子组件接收父组件的num属性
- 子组件定义点击按钮，点击后对num进行加或减操作
子组件接收到父组件属性后，默认是不允许修改的。怎么办？
既然只有父组件能修改，那么加和减的操作一定是放在父组件：
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{
// 父组件中定义操作num的方法
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
})
但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？
我们可以通过v-on指令将父组件的函数绑定到子组件上：
<div id="app">
<h2>num: {
{num}}h2>
<counter :count="num" @inc="increment" @dec="decrement">counter>
div>
在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。当子组件中按钮被点击时，调用绑定的函数：
Vue.component("counter", {
template:'\
\
\
\
',
props:['count'],
methods:{
plus(){
this.$emit("inc");
},
reduce(){
this.$emit("dec");
}
}
})
- vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数
路由vue-router
场景模拟
一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：
编写父组件
<div id="app">
<span>登录span>
<span>注册span>
<hr/>
<div>
登录页/注册页
div>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el:"#app"
})
script>
编写登录及注册组件
接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们新建一个user目录以及login.js及register.js：
编写组件，这里我们只写模板，不写功能。
login.js内容如下：
const loginForm = {
template:'\
\
登录页
\
用户名：
\
密码：
\
\
'
}
register.js内容：
const registerForm = {
template:'\
\
注册页
\
用 户 名：
\
密 码：
\
确认密码：
\
\
'
}
在父组件中引用
<div id="app">
<span>登录span>
<span>注册span>
<hr/>
<div>
<login-form>login-form>
<register-form>register-form>
div>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script src="user/login.js">script>
<script src="user/register.js">script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
components: {
loginForm,
registerForm
}
})
script>
效果：
问题
我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。
但是，如何才能动态加载组件，实现组件切换呢？
虽然使用原生的Html5和JS也能实现，但是官方推荐我们使用vue-router模块。
vue-router简介和安装
使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。
官网：https://router.vuejs.org/zh-cn/
使用npm安装：npm install vue-router --save
在index.html中引入依赖：
<script src="../node_modules/vue-router/dist/vue-router.js">script>
快速入门
新建vue-router对象，并且指定路由规则：
// 创建VueRouter对象
const router = new VueRouter({
routes:[ // 编写路由规则
{
path:"/login", // 请求路径，以“/”开头
component:loginForm // 组件名称
},
{
path:"/register",
component:registerForm
}
]
})
- 创建VueRouter对象，并指定路由参数
- routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
- path：路由的路径
- component：组件名称
在父组件中引入router对象：
var vm = new Vue({
el:"#app",
components:{
// 引用登录和注册组件
loginForm,
registerForm
},
router // 引用上面定义的router对象
})
页面跳转控制：
<div id="app">
<span><router-link to="/login">登录router-link>span>
<span><router-link to="/register">注册router-link>span>
<hr/>
<div>
<router-view>router-view>
div>
div>
- 通过
- 通过
效果：
注意：单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。
事实上，我们总共就一个HTML：index.html
NPM安装依赖
npm install
npm install 默认会安装 dependencies 字段和 devDependencies 字段中的所有模块。 如果软件包具有 package-lock 或 shrinkwrap 文件，则依赖项的安装将由此驱动，如果两个文件都存在，则 npm-shrinkwrap.json 优先。
–production 参数，可以只安装 dependencies 字段的模块。
- 运行
npm run dev或npm start(热部署) - 编译
npm build
Vue项目结构
.vue文件作用：将HTML模板与JS代码分离
< template>< /template>
< script>< /script>
< style scoped>< /style>
- index.html：html模板文件。定义了空的
div，其id为app。 - main.js：实例化vue对象，并且通过id选择器绑定到index.html的div中，因此main.js的内容都将在index.html的div中显示。main.js中导入并使用了App组件，即App.vue，也就是说index.html中最终展现的是App.vue中的内容。index.html引用它之后，就拥有了vue的内容（包括组件、样式等），所以，main.js也是webpack打包的入口。
- index.js：定义请求路径和组件的映射关系。相当于之前的
- App.vue中也没有内容，而是定义了vue-router的锚点：
- 最终结论：一切路由后的内容都将通过App.vue在index.html中显示。
- 访问流程：用户在浏览器输入路径，例如：http://localhost:9001/#/item/brand --> index.js(/item/brand路径对应pages/item/Brand.vue组件) --> 该组件显示在App.vue的锚点位置 --> main.js使用了App.vue组件，并把该组件渲染在index.html文件中（id为“app”的div中）
/*
├── build --------------------------------- webpack相关配置文件
│ ├── build.js --------------------------webpack打包配置文件
│ ├── check-versions.js ------------------------------ 检查npm,nodejs版本
│ ├── dev-client.js ---------------------------------- 设置环境
│ ├── dev-server.js ---------------------------------- 创建express服务器，配置中间件，启动可热重载的服务器，用于开发项目
│ ├── utils.js --------------------------------------- 配置资源路径，配置css加载器
│ ├── vue-loader.conf.js ----------------------------- 配置css加载器等
│ ├── webpack.base.conf.js --------------------------- webpack基本配置
│ ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置
│ ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置
├── config ---------------------------------- 配置文件
├── node_modules ---------------------------- 存放依赖的目录
├── src ------------------------------------- 源码
│ ├── assets ------------------------------ 静态文件
│ ├── components -------------------------- 组件
│ ├── main.js ----------------------------- 主js
│ ├── App.vue ----------------------------- 项目入口组件
│ ├── router ------------------------------ 路由
├── package.json ---------------------------- node配置文件
├── .babelrc--------------------------------- babel配置文件
├── .editorconfig---------------------------- 编辑器配置
├── .gitignore------------------------------- 配置git可忽略的文件
*/
主要的配置文件
package.json
/*
首选来看一下package.json里面scripts字段，看一下在执行npm run dev 和
npm run build时做了什么
*/
"name": "wheelsfactory",
"version": "1.0.0",
"description": "this is a demo",
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
}
/*
当我们执行npm run dev时，首选执行的是dev-server.js
当我们执行npm run build时，首选执行的是build.js
*/
参考网址