Vue.js入门与核心概念-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41630351/article/details/103749490

Vue基础-day01

课程介绍

NodeJS&npm（了解）
ES6重要语法（掌握）
Vue介绍（了解）
Vue安装（掌握）
MVVM架构详解（了解）
Vue入门（掌握）
Vue表达式（掌握）
Vue指令(掌握)

前端技术准备
1. 前端技术发展历史
  1. 静态页面

1990 html

1. 1. 操作dom

1995 javascprint

1. 1. 动态网站

Asp/jsp,php等，后台臃肿

1. 1. Ajax成为主流
  2. Html5

春天了来了

1. 1. NodeJs爆发

Node.js 的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码，其异步编程风格也深受开发人员的喜爱。Node.js 的伟大不仅在于拓展了 JavaScript 在服务器端的无限可能，更重要的是它构建了一个庞大的生态系统。

2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。相当于后台中maven

随后，在node的基础上，涌现出了一大批的前端框架：

vue->elementui(饿了么)

1. 1. 前端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上.

1. 主流前端框架

前端框架三巨头：

Vue.js:vue.js以轻量易用著称

React.js:vue.js和React.js发展速度最快，集web前端与app于一身技术

AngularJS: AngularJS还是曾今老大。用户比较比多

1. 相关技术

前面说过，NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。

1. 1. NodeJS&npm
    1. 安装

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具.

NodeJs下载：https://nodejs.org/en/download/

安装完成Node应该自带了NPM了，在控制台输入npm -v查看：

升级：npm install npm@latest -g

1. 1. 1. 入门
在idea支持nodejs

需要安装插件

Npm常用命令

创建前端项目

①初始化：npm init -y(跳过) -----相当于建了一个maven工程

②安装模块：

全局安装(所有项目都能用)

npm install -g vue

npm -g root 查看安装的全局路径

局部安装(当前项目使用)

npm install/i vue

③查看模块：

查看某个模块：npm list vue

列表模块：npm ls

④卸载模块：npm uninstall vue

⑤更新模块：npm update vue

⑥运行工程：npm run dev/test/online --后面配置脚手架使用

⑦编译工程：npm run build

1. 1. ECMAScript6重要语法
    1. 什么是ECMAScript

web1.0时代：

最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。

web2.0时代：

- 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。

表单验证

- 1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。

- 1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript标准规范。JavaScript和JScript都是ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准。

所以，ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范。

1. 1. 1. ECMAScript历史

97年而后，ECMAScript就进入了快速发展期。

- 1998年6月，ECMAScript 2.0 发布。

- 1999年12月，ECMAScript 3.0 发布。这时，ECMAScript 规范本身也相对比较完善和稳定了，但是接下来的事情，就比较悲剧了。

- 2007年10月，ECMAScript 4.0 草案发布。这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作的。

一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。

一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。

ECMAScript 4 的很多主张比较激进，改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的ECMAScript5和6版本中

- 2009年12月，ECMAScript 5 发布。

- 2011年6月，ECMAScript 5.1 发布。

- 2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是ECMAScript6。

ES6就是javascript用的最多语言规范.被各个浏览器实现了.

1. 1. 1. ES5或ES6常用的一些新特性

1）let&const

let相较于var，他是块级的。

const声明常量不能修改

2）解构表达式

数组解构：

对象解构：

3）箭头函数

格式

var 函数名 = (参数列表) => {函数内容}等价于一下代码

var 函数名 = function(参数列表){

函数内容

}

如果参数只有一个可以省略(),函数内容只有一句代码可以省略{}

注意1：对象配合箭头

let person = {

// 以前：

eat: function (food) {

console.log(this.name + "在吃" + food);

// 箭头函数版：

eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this

// 简写版：

eat3(food){

console.log(this.name + "在吃" + food);

}

注意2：解构表达式+箭头表达式

4）Promise对象

Promise是异步编程的一种解决方案，比传统的解决方案ajax（回调函数+事件）更加合理和强大。 $.get(url,data,function(data){

})

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。

语法：

等待执行成功：

异常处理：

案例： --了解(axios --解决异步方案) jquery去封装ajax

const p = new Promise((resolve, reject) =>{

// 这里我们用定时任务模拟异步

setTimeout(() => {

const num = Math.random();

// 随机返回成功或失败

if (num < 0.5) {

resolve("成功！num:" + num)

} else {

reject("出错了！num:" + num)

}

}, 300)

})

// 调用promise

p.then(function (msg) {

console.log(msg);

}).catch(function (msg) {

console.log(msg);

})

模块化

模块化是一种思想,这种思想在前端有多种规范常见的规范有commonJs(nodeJS),cmd/amd(可以在浏览器中使用),es6(可以在浏览器中使用).

模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块。es6模块()功能主要由两个命令构成：export和import。

- export命令用于规定模块的对外接口，

- import命令用于导入其他模块提供的功能。

A：导出

简写如下：

注意1：可以导出任何东西

注意2：可以省略名字

B：导入

但是上面的代码暂时无法测试，因为浏览器目前不能直接解析运行ES6 的导入和导出功能。除非借助于工具，把ES6 的语法进行编译降级到ES5，比如Babel-cli工具

我们暂时不做测试，大家了解即可。

Vue介绍
1. Vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html

Vue只关注视图层。

Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。

Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue学习起来非常简单。

官网：https://cn.vuejs.org/

1. Vue特性
轻量

Vue.js库的体积非常小的，并且不依赖其他基础库。

数据绑定

对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

指令

内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

插件化

Vue.js核心不包含Router(路由)、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

组件化 --component (重复利用)

组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

1. Vue的历史

Vue是比较新的技术，版本 1.0 是在 2014 年发布的, Vue作者是前Google 的员工尤雨溪, 在2016年9月宣布以技术顾问的身份加盟阿里巴巴。

Vue对比其他框架:https://cn.vuejs.org/v2/guide/comparison.html#ad

Vue入门
1. Vue资源安装
  1. 以本地js文件或cdn直接引入到页面中

Vue是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

Vue是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

下载Vue文件到本地，官方提供两个版本：

https://cn.vuejs.org/v2/guide/installation.html

1. 1. 在npm方式引入vue

npm install vue

浏览器访问http://localhost:8080/views/vue入门.html

1. Hello应用体验

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="node_modules/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        {{msg}}

    </div>

    <script>

        var app = new Vue({

            el:"#app",

            data:{

                msg:'xxxx'

            }

        })

    </script>

</body>

</html>

Vue实例对象详情
1. Vue实例挂载(el)的标签

每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。实例上的属性和方法只能够在当前实例挂载的标签中使用。

<h1>{{message}}</h1>

</div>

<h1>{{message}}</h1>

</div>

使用构造函数创建一个vue对象：

这个对象作用与哪一个html标签，是通过el属性来挂载的，常用的有id和class挂载方式：

id挂载:el:"#id"

class挂载：el:".class"

//id挂载方式：

var app = new Vue({

el : "#app",

data : {

message : "我是id挂载方式"

}

});

//class挂载方式：

var app2 = new Vue({

el : ".vueClz",

data : {

message : "我是class挂载方式"

}

});

1. Vue中的数据(data)详解
Vue实例的数据保存在配置属性data中, data自身也是一个对象.
通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上

<h1>{{message}}</h1>

<h1>

{{user.name}},今年才:{{user.age}}岁.{{user.color}}<font color="pink">是一个很美丽的颜色</font></br>

</h1>

</div>s

//vue的数据绑定在data属性上，data本身也是一个对象

var app = new Vue({

el : "#app",

data : {

message : "我是一个很单纯的p",

user : {

name : "隔壁老王",

age : 17,

color : "pink"

}

});

//Vue实例的数据保存在配置属性data中, data自身也是一个对象.

// 通过Vue实例直接访问data对象中的数据,及时同步的页面上

alert(app.message);

// // 通过Vue实例直接修改data对象中的数据,及时同步的页面上

app.message="p被修改了--》pp";

app.user.name="老刘";

1. Vue中的方法(methods)详解

Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体

方法都是被Vue对象调用,所以方法中的this代表Vue对象

1. 1. 使用方式
    1. 直接在html模板标签中调用

1. 1. 1. 通过Vue对象实例调用方法

vue对象.方法名字();

方法的调用②直接在html模板标签中调用：

</div>

//vue的数据绑定在data属性上，data本身也是一个对象

//方法的定义在：methods属性上，通过json格式来表示

var app = new Vue({

el : "#app",

data : {

message : "我是一个很单纯的p",

user : {

name : "隔壁老文",

age : 17,

color : "pink"

}

methods:{

say:function(){

//this指向当前对象，当前app对象

return "hello:"+this.user.name+"!";

swim:function(){

console.debug("小狗的游泳姿势，还不错。。。");

}

});

//方法调用①：通过Vue对象实例调用方法

app.swim();

1. 生命周期钩子
  1. 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期：

1. 1. 钩子函数

例如：created代表在vue实例创建后；

我们可以在Vue中定义一个created函数，代表这个时期的构造函数：

html:

  <div id="app">

      {{hello}}

  </div>

js:

  var vm = new Vue({

      el:"#app",

      data:{

          hello: '' // hello初始化为空

      },

      created(){

          this.hello = "hello, world！ 我出生了！";

      }

  })

1. vue数据双向绑定体验

!--页面模型-->

</div>

//创建vue是需要给他传递一个对象

new Vue({

el:"#myApp", //id在hmtl模板中要对应

data:{ //数据模型

msg:"zs"

methods:{//方法

changeVal(){

alert(this.msg);

}

})

</script>

显示效果:

Vue架构认识

Vue是一款开源的JavaScript MV*（MVVM、MVC）框架。

Vue 引入了MVVM (Model-View-ViewModel)模式，他不同于MVC架构.

1. MVC模式：
Model：数据模型，一些JavaScript 对象，比如 {name : "小小强",age : 16};
View: 视图，网页中的内容，一般由HTML模板生成。
Controller : 控制器（路由），视图和模型之间的胶水。

1. MV VM模式：
Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。

ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；

1. 小结

View不能直接与Model交互，而是通过Vue实例这个ViewModel来实现与Model的交互。对于界面表单的交互，通过v-model指令来实现View和ViewModel的同步。对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦发生变化，Model中的数据也会发生改变；

对于Model而言，当我们添加或修改Model中的数据时，ViewModel中的Data Bindings工具会帮助我们更改View中的DOM元素。从而实现View和Model的分离，达到对前端逻辑MVVM的分层架构。

VueJS表达式

表达式是Vue中视图模板的一种语法结构. 将数据绑定(输出)到HTML中

1. 表达式语法
VueJS表达式写在双大括号内：{{ expression }}。
VueJS表达式把数据绑定到 HTML。
VueJS将在表达式书写的位置"输出"数据。
VueJS表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

1. 简单表达式

在{{ }}中可以进行简单的运算.

</div>

var app = new Vue({

//挂载到id=app元素上

el:"#app"

});

1. 三目操作符
在{{}}中的表达式可以使用data中数据
在{{}}中的表达式可以使用三元运算符,但是不能够使用其他语句

</div>

var app = new Vue({

el : "#app",

data : {

show1 : true

}

});

1. 字符串操作
直接使用字符串字面值作为字符串对象
使用data中的字符串对象

{{"这是字面值"}}<br/>

{{"这是字面值".length}}<br/>

{{message.length}}<br/>

{{message.substring(1,5)}}<br/>

{{message.substring(2,6).toUpperCase()}}<br/>

</div>

var app = new Vue({

el: "#app",

data: {

message: "这是data中的数据"

}

});

1. 对象操作

在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样

{{user}}<br/>

{{JSON.stringify(user)}}<br/>

{{user.toString()}}<br/>

{{user.name}}<br/>

{{user.age}}<br/>

{{user.getAge()}}<br/>

</div>

var user = {

age: 29,

getAge: function () {

return this.age

toString:function(){

return "姓名:"+this.name+",年龄:"+this.age;

}

};

var app = new Vue({

el: "#app",

data: {

user: user

}

});

1. 数组操作

在表达式中可以使用JavaScript数组中的任何语法来操作数组.

{{hobbys}}<br/>

{{hobbys[0]}}<br/>

{{hobbys.length}}<br/>

{{hobbys.toString()}}<br/>

{{hobbys.join("------")}}<br/>

</div>

var app = new Vue({

el: "#app",

data: {

hobbys:["打游戏","踢足球",'泡MM',"泡GG"]

}

});

Vue指令
1. 什么是指令

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

1. 常见的指令
v-model=“表达式” 数据双向绑定
v-text=“表达式” 设置标签中的文本
v-html=“表达式” 设置标签中的html
v-if(else else if)=“表达式” 判断条件
v-for=“表达式” 循环
v-on=“表达式” 注册事件

1. 指令作用
作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
一个标签元素上可以出现多个指令属性
指令只能够出现在Vue对象所挂载的标签范围内的标签中
1. v-text指令

语法:
<标签名 v-text="表达式"></标签名>

作用:
通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)

注意事项:

如果值是html的值,会作为普通的文本使用。

标签中的属性值必须是data中的一个属性.

</div>

var app = new Vue({

el: "#app",

data: {

message: "<h1>这是一个Span!</h1>",

user: {

username: "lw"

}

});

1. v-html指令(重点)

语法:
<标签名 v-html="表达式"></标签名>

作用:

通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)

注意事项:

如果值是html的值,不会作为普通的文本使用,要识别html标签。

{{表达式}} 可以插入的标签的内容中

v-text和v-html更改标签中的所有内容

</div>

var app = new Vue({

el: "#app",

data: {

message: "<h1>这是HTMl代码</h1>"

}

});

1. v-for指令(重点)

语法:
<标签 v-for="元素 in 数据源"></标签>

数据源:   数组,
    元素:   数组中的一个元素,

数据源:   对象
    元素:   对象中的一个属性名

<标签 v-for="(元素,索引|键) in 数据源"></标签>
    当数据源是数组时, ()的第二个参数值索引
    当数据源是对象时, ()的第二个参数值键

<标签 v-for="(元素,键,索引) in 对象"></标签>

作用:
基于数据源多次循环达到多次渲染当前元素.

<ul>

<li v-for="hobby in hobbys">{{hobby}}</li>

</ul>

<ul>

<li v-for="value in student">{{value}}</li>

</ul>

<h1>带索引循环数组</h1>

<ul>

<li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li>

</ul>

<h1>带键遍历对象</h1>

<ul>

<li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li>

</ul>

</div>

var app = new Vue({

el: "#app",

data: {

hobbys : ["爬山","游泳","打豆豆","睡觉"],

student : {

age: 29,

sex: "男",

num : 10,

str : "itsource",

}

});

1. v-for的案例-学生列表(重点)

<tr>

</tr>

<td>{{student.id}}</td>

<td>{{student.name}}</td>

<td>{{student.age}}</td>

<td>{{student.sex}}</td>

</tr>

</table>

</div>

var app = new Vue({

el: "#app",

data: {

students: [

{id:1,name: "刘备", age: 29, sex: "男"},

{id:2,name: "貂蝉", age: 30, sex: "女"},

{id:3,name: "吕布", age: 31, sex: "男"}

]

}

});

1. v-bind指令(重点)

将data中的数据绑定到标签上,作为标签的属性.

语法:

为一个标签属性绑定一个值

<标签 v-bind:标签属性名字="表达式"></标签>

简写形式:

<标签 :标签属性名字="表达式"></标签>

为一个标签绑定一个对象作为该标签的多个属性

<标签 v-bind="对象"></标签>

注意事项

将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字

</div>

var app = new Vue({

el: "#app",

data: {

imgsrc: "./img/1.jpg",

title: "二哈!",

props :{

type: "text",

}

});

1. v-model 指令(重点)

语法:

<标签 v-model="表达式"></标签>

在表单控件上创建双向绑定

表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,

当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定

注意事项:

如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
v-model只作用于以下表单:
input select textarea

<h1>绑定到type=text的input表单元素</h1>

姓名:<input type="text" v-model="inputValue"><br/>

data中的值:{{inputValue}}

<h1>绑定到type=checkbox的input表单元素</h1>

打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>

踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>

data中的值:{{checkboxValue}}

<h1>绑定到type=radio的input表单元素</h1>

打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>

踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>

data中的值:{{radioValue}}

<h1>绑定到textarea的元素</h1>

个人简介:<textarea v-model="textareaValue"></textarea><br/>

data中的值:{{textareaValue}}

<h1>绑定到单选的select的元素</h1>

技能:<select v-model="skills">

</select><br/>

data中的值:{{skills}}

</div>

var app = new Vue({

el: "#app",

data: {

inputValue: "初始化的值",

checkboxValue: ["踢足球"],

radioValue: "打篮球",

textareaValue: "你是一个优秀的软件工程师!",

skills: "java",

}

});

1. v-show指令

语法:
<标签名 v-show="表达式"></标签名>

作用:
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
当v-show的值为假时, 会在标签的css中添加 display: none :

注意事项:

当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
标签的值会自动转换为boolean类型的值

<div v-show="show">你看到我了!</div>

<div v-show="hidden">你看不到我了!</div>

</div>

var app = new Vue({

el: "#app",

data: {

"show":true,

"hidden":true,

"score":90,

}

});

1. v-if指令

语法:
   <标签名 v-if="表达式"></标签名>

作用:
   根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

注意事项:
   当表达式中的值是false时, 是从页面上删除.
   标签的值会自动转换为boolean类型的值

<div v-if="show">你看到我了!</div>

<div v-if="hidden">你看不到我了!</div>

</div>

var app = new Vue({

el: "#app",

data: {

"show":true,

"hidden":true,

"score":90,

}

});

1. v-else指令

语法:
   <标签名 v-if="表达式"></标签名>
   <标签名 v-else></标签名>

作用:
   当v-if表达式不成立时, v-else执行.

注意事项:
   该指令必须也v-if搭配起来使用.
   v-else是一个单独的属性, 该属性是不要赋值的.

</div>

var app = new Vue({

el: "#app",

data: {

isVip: true

}

});

1. v-else-if指令

语法:

<标签名 v-if="表达式"></标签名>

<标签名 v-else-if="表达式"></标签名>

<标签名 v-else-if="表达式"></标签名>

<标签名 v-else></标签名>

</div>

var app = new Vue({

el: "#app",

data: {

score: 80

}

});

课程总结
1. 重点
2. 难点
3. 如何掌握？

勤加练习...

学会看说明手册

课后练习
面试题

node+vue文档