学习前需具备的知识（复习）：

• Web开发基础（尤其是：前后端分离）
  
• Html+CSS
• JavaScript语法基础
• 进阶ES6（加分项）
  

为什么是Vue？

我说一个非技术的理由，因为：vue的官方文档中文支持良好，\(^o^)/~

Vue的创始人就是一个中国人：尤雨溪（野生程序员），当然Vue本身也是国际化的（和易语言不同）

Vue的更新还是非常快的（已有1/2/3三个版本），曾经非常火的一句话：

尤雨溪，快别更新了，老子真学不动了！！！

竞争框架：React / Angular （飞哥个人感觉，这两个框架在国外更流行一些）

引入Vue.js

为了方便和后端的交互，我们使用Visual Studio的ASP.NET WebApi项目。

先准备好一个Index.html页面：

    <h1 id="yz-hello"> <!--注意这个id-->
        <!--h1里面没有内容-->
    </h1>

然后使用一种大家非常熟悉的方式引入Vue.js（对的，vue的本质就是一个js文件而已，^_^），可以使用官网推荐的CDN，或本地.js文件：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了文件大小和加载速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

演示：将CDN上的js内容复制粘贴到本地

Hello，源栈

首先，准备一个id为yz-hello的h1标签：

<h1 id="yz-hello"> <!--注意这个id-->
    {{greet}} 
</h1>

注意标签的文本部分是用两个花括号括起来的greet，这就是vue开始起作用的地方！

然后，我们用JavaScript代码new一个Vue对象实例：

var vm = new Vue({
    el: "#yz-hello",  //#代表id
    data: {
        greet: "Hello, 源栈！"  //确定greet的内容
    }
})

这个实例对象又经常被称之为ViewModel，或者简称为Model。其中：

• el：element的缩写，指定其作用的html元素（Vue中被称之为component）
• data：js数据对象（复习：js对象）
  

演示：改变id/data等后页面呈现效果

理解：

• vm和html标签间的对应关系
• vue.js将{{ greet }}替换成 “Hello 源栈!”，这就被称之为“渲染”（或者：绑定）

注意：整个渲染过程，我们作为开发人员，整个过程没有写一行的JavaScript代码（对比：事件处理函数），于是这种编码方式又被称为声明式渲染。

@想一想@：为什么要这么折腾？直接一个

<h1>Hello, 源栈！</h1>

不香么？

1. Vue实例对象的data通常就不是前端自己生成的，而是来源于后端
   
2. RESTful风格的设计，要求后端向前端传送 纯粹的 数据
3. 最重要的一点：实现 数据 和 呈现 的分离（尽量，理论上……）

Vue.js Pack

为了更快捷的开发（其实就是偷懒），我们可以安装Vue.js获得智能提示和code snippets的支持。

演示：

• 安装Vue.js Pack
  
• 键入vue后双击tab
• 查看其他code snippets
  

顺序

有的同学还记得：JavaScript是解释型语言，所以会按从上往下的顺序执行……

所以会觉得应该是：

1. 先有Vue的对象，给greet赋值嘛
2. 然后才能在html标签中使用greet的值

但其实不然。演示：

[Vue warn]: Cannot find element: #yz-hello因为整个HTML页面其实都是被vue“控制”的，我们看到的内容是：

1. 基于component（模板）
2. 被整个的“渲染”出来的，

不是字符串拼接一样拼接出来的。（后文详述）

所以，正确的顺序是：HTML的component在前，new Vue()在后。

即时变化和v-once

当Vue对象中的数据发生变化，vue.js会将变化立即反应到component中：这被称之为响应式。

控制台演示：更改greet的值

vm.greet = '一起帮'

PS：vm.greet 就是上文传入Vue()的构造函数参数中的data的greet，-_-||（后文详述）

vm._data.greet == vm.greet  //true

但是，有时候我们不希望它这样随时变化，只希望在最初加载时绑定一次，我们就可以在html标签中添加一个v-once的指令（vue中凡是属性名以v-打头的，都是指令）：

<h1 v-once id="yz-hello">

@想一想@：这是怎么实现的呢？一定有一种“监控”！

JavaScript表达式

{{}}中的内容还可以是一行（注意只能是一行）JavaScript表达式，比如：

{{greet + 'O(∩_∩)O哈哈~'}}

把greet当做变量使用一样。

注意这个greet只能是Vue实例对象中声明的变量，不能是外部变量。比如你这样就不行：

//声明在外部
var greet = "Hello, 源栈！";

data中的greet被注释：

data: {
    //greet: "Hello, 源栈！"
}

注意：即使是在{{}}中配合vue data使用的变量都不能是外部声明的。比如：

//声明一个页面全局变量
var sname = '大飞哥';

    //greet是vue data中声明的
    data: {
        greet: "hello, 源栈"
    }

<h1 id="yz-hello">{{greet + sname}}</h1>

@想一想@：为什么？不是说JavaScript有时候作用域链，可以一直往外找么？这时候sname已经是全局变量了呀……

HTML内容

@试一试@：把一个a标签绑定到component中：

data: {
    greet: "<a href='#'>一起帮</a>",
}

处于安全考虑（防XSS攻击），vue默认会将所有的data内容编码后输出。

如果我们确实要屏蔽这一规则，需要使用一种被称之为指令的技术：

<h1 v-html="greet" id="yz-hello"></h1>

注意：使用v-html的时候脑子里面一定要想到“安全/安全/安全！！！”——重要的事说三遍。

作业

1. 新建一个VueHome.html页面，利用vue的声明式渲染，显示出你的入栈口号。
2. 将之前的求助/文章/意见建议单页，用vue声明式渲染的方式重新呈现。
   

源栈学历

在当前系列 Vue.js 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：