这是我参与「第四届青训营」笔记创作活动的第6天

我们团队所使用的是基于Vue2开发的，我也是在这个过程中在学习Vue，现在下面我将介绍一下我对于Vue的学习一些个人看法以及学习笔记。

我觉得学习Vue对于前端的知识的要求比较扎实，如JavaScript、ES6、Webpack等基础知识，我的基础不是太好在这个过程中感到了一些吃力，对于Vue中的一些语法比较陌生，在查询过后发现是其他技术上的知识。Vue的学习需要多多练习。

下面是我学习Vue的笔记

Vue的历史

2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed。
2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。
2014.01.24，Vue 正式对外发布，版本号是 0.8.0。
2014.02.25，0.9.0 发布，有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。
2015.06.13，0.12.0，代号Dragon Ball，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue 在 JS 社区也打响了知名度。
2015.10.26，1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。
2016.10.01，2.0.0 是第二个重要的里程碑，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。自从Vue 2.0 发布之后，Vue 就成了前端领域的热门话题。
2019.02.05，Vue 发布了 2.6.0 ，这是一个承前启后的版本，在它之后，将推出 3.0.0。
2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。

认识Vue

Vue是一个渐进式框架

渐进式意味着你可以将Vue作为你应用的一部分嵌套其中
Vue的核心库以及其生态系统
Core + Vue-router + Vuex

Vue特点和Web开发常见高级功能

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

特点

采用组件化模式，提高代码复用率，且让代码更好的维护

声明式编码，让编码人员无需直接操作DOM，提高开发效率

使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<!--准备的容器，id选择器-->
<div id="root">
    <h1>hello,{{name}}</h1>
    <h2>{{name}}</h2>
    <h3>{{name}}</h3>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false;//组织Vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root', //el用于指定Vue实例为哪个容器服务，值通常为CSS的选择器
        data: { //data中用于存储数据，数据el所指定的容器去使用，值暂时先写成一个对象
            name: 'world'
        }
    });

</script>
</body>
</html>

1、想让Vue工作，就必须先创建一个Vue实例，且要传入一个配置对象；

2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3、root容器里的代码被称为Vue模板

4、容器和Vue实例一一对应

注意区分：JS表达式和JS代码

真实开发中只有一个Vue实例，并且配合着组件使用{{xxx}}中的XXX要写Js表达式，且xxx可以自动读取到data的所有属性一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

指令语句

<a v-bink:href="url">超链接</a>
<script type="text/javascript">
new Vue({
    el:'root',
    data：{
    url:'http://www.baidu.com'
	}
})
</script>

v-bink绑定

2大类

1、插值语法：

功能：用于解析标签体内容

写法：{{XXX}}，xxx是JS的表达式，七日可以直接读取到data中的的所有属性

2、指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。。）

举例：b-bind：href=“xxx”或是简写为 :href=“xxx”，xxx同样要写JS表达式

且可以直接读取到data中的所有属性

备注：Vue中有很多的指令，且形式都是v-???，此处我们只是拿v-bind举个例子

<script type="text/javascript">
new Vue({
    el:'root',
    data：{
    name:'jack',
    school:{
    name:'world'
}//层级
	}
})
</script>

Vue学习笔记1 ｜ 青训营笔记