第一章 Vue.js 概要介绍

1.1 Vue.js 介绍

Vue 是什么

主流的渐进式JavaScript 框架。

什么是渐近式

可以和传统的网站开发架构融合在一起，例如可以简单的把它当作一个类似JQuery 库来使用。也可以使用Vue全家桶框架来开发大型的单页面应用程序。

使用它的原因

vue.js 体积小，编码简洁优雅，运行效率高，用户体验好。
无Dom操作，它能提高网站应用程序的开发效率。

什么场景下使用它

一般是需要开发单页面应用程序（Single Page Application, 简称:SPA）的时候去用
单页面应用程序，如：网易云音乐 https://music.163.com/
因为 Vue 是渐进式的，Vue 其实可以融入到不同的项目中，即插即用

读书笔记

1.2 学习资源

英文官网：https://vuejs.org//

中文官网（中文文档很友好）：https://cn.vuejs.org//

官方教程：https://cn.vuejs.org/v2/guide//

GitHub：https://github.com/yyx990803

API文档：https://cn.vuejs.org/v2/api//

不建议买书，官方文档很详细，多查官方文档，因为很多书基本上都是直接抄官方文档的

1.3 发展历史

作者：尤雨溪（微博：尤小右），一位华裔前Google 工程师，江苏无锡人。个人博客：http://www.evanyou.me//

新浪微博：http://weibo.com/arttechdesign

知乎：https://www.zhihu.com/people/evanyou/activities2013年12月8号在 GitHub 上发布了0.6 版

2015年10月份正式发布了 1.0 版本，开始真正的火起来

2016年10月份正式发布了 2.0 版

2019.4.8号发布了 Vue 2.5.10 版本https://github.com/vuejs/vue/releases1.x 版本老项目可能还在用，新项目绝对都是选择2.x

1.4 对比其他前端JS 框架

Angular

2009 年诞生的，起源于个人开发，后来被 Google 收购了。

核心技术：模板和数据绑定技术，体验越来越差，走下坡路了。

React

2013年5月开源的，起源于 Facebook 的内部项目，对市场上所有 JS 框架都不满意，于是自已写了一套。

核心技术：组件化和虚拟DOM 技术。

Vue.js

吸收了上面两个框架的技术优点。

使用情况：

BAT 级别的企业：React 最多> Angular > Vue.js 中小型公司：Vue.js 更多一些，有中文文档学习成本低。

Vue 不支持IE8 及以下版本，因为Vue 使用了IE8 无法模拟ECMAScript 5 特性。推荐使用最新谷歌浏览器。

第二章Vue 核心技术

2.1 Vue 入门开发

2.1.1 创建工程

2.4 模板数据绑定渲染

可生成动态的HTML页面，页面中使用嵌入 Vue.js 语法可动态生成

{{xxxx}} 双大括号文本绑定
v-xxxx 以 v- 开头用于标签属性绑定，称为指令

在 vue-01-core 目录下新建一个页面： 02-模板数据绑定渲染.html

2.4.1 双大括号语法 {{}}

格式： {{表达式}}

作用：

使用在标签体中
用于获取数据可以使用 JavaScript 表达式.

案例源码：

<body>
    <div id="app">
        <h3>1、双大括号输出文本内容</h3>
        <!--文本内容-->
        <p>普通文本：{{ message }}</p>
        <!--使用JS表达式-->
        <p>JS表达式：{{ number + 1 }}</p>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'haha',
                number: 1
            }
        })
    </script>
</body>

2.4.2 一次性插值 v-once

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

一次性插值 v-once

这个将不会改变: {{ message }} ## 2.4.3 输出HTML指令 v-html 格式： v-html='xxxx' 作用： + 如果是HTML格式数据，双大括号会将数据解释为普通文本，为了输出真正的 HTML，你需要使用 v-html 指令。 + Vue 为了防止 XSS 攻击，在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染。 XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息），读取到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。 XSS 攻击还可以在你进入到支付时，跳转到钓鱼网站。案例源码： ```html