前言
本系列博客是博主在学习vue时的一些见解，关于vue的学习资源网上可谓乱花渐欲迷人眼，这里我推荐一下B站尚硅谷张天禹老师还有菜鸟教程上的资源。如果你的基础较好还可以直接看官方文档。在学习vue前一定要有html、css、javascript基础，否则的话学起来会很吃力。
一、vue简介
Vue是一个目前非常流行的前端框架，可以使用该框架轻松地搭建起来一个稳定美观的web网站 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
1.Vue特性
- 易学易用
基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。 - 性能出色
经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化 - 灵活多变
丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。
2.为什么选择vue?
- jQuery是最早的js框架，优点是简化DOM操作，缺点是DOM操作太频繁，影响前端性能。
- Anguler是Google收购的前端框架，其特点就是将后台的MVC模式搬到前台并增加了模块化开发的理念；缺点是版本迭代不合理。
- React是Facebook出品，其特点是提出了虚拟DOM的概念用于减少真实DOM的操作，在内存中模拟DOM操作，有效的提升了前端渲染的效率；缺点是使用繁杂，需要额外学习一门 JSX 语言。
- vue是一个中国人开发的（尤雨溪），其特点是综合了 Anguler（模块化）和 React（虚拟DOM）的优点，是一款渐进式js框架（就是逐步实现新特性）；由于vue不具备通信能力，所以要额外使用一个通信框架与服务器交互（官方推荐axios）。
3.Vue工作的大致流程
- 1.想让vue进行工作就必须创建一个vue实例,且要传入一个配置对象
- 2.root容器中的代码依旧符合html代码的规范，只不过混入了一些特殊的vue语法
- 3.root容器内的代码被称为vue模板
- 4.vue实例与容器是一一对应的（存在绑定关系，会同步更新）
- 5.真实的开发中只有一个vue实例，并且会配合组件一起使用
- 6.{{xxx}}双括号内部要写js表达式，并且xxx可以自动的获取到Vue实例对象内的data中的属性
注意区分：js表达式 和 js代码(语句) 1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方： (1). a (2). a+b (3). demo(1) (4). x === y ? 'a' : 'b' 2.js代码(语句) (1). if(){} (2). for(){}
- 7.一旦data中的数据发生改变，那么在容器内将会有所体现，随之会展现在页面上
二、简单的应用一下Vue
1.引入Vue
在使用vue之前，需要下载这两个js文件之一，这两个文件的话在官网有详细介绍，引入的方式也有许多种，大家可以根据自己的选择进行使用，两者唯一的区别就是两者一个是生产版本一个是开发版本。
可以这么认为：
生产版本是压缩后的版本，是程序开发完毕需要线上部署的版本。
开发版本适用于程序员的日常开发，生产版本使用与线上部署。
2.解读一个简单的例子
运行效果：
前置知识点：
在使用Vue技术进行网页设计时，首先要引入Vue对象，然后定义Vue对象，并将Vue对象与dom元素进行绑定（绑定过的元素可以直接使用Vue中的属性，不过需要遵循一定的语法），使用属性的语法有两种一种是插值语法，一种是指令语法，这两种语法统称为模板语法，针对一些特殊的属性标签还可以使用数据绑定，实现元素内的值与Vue中的属性值同步。今天这个小案例将会带大家了解一下以下几个知识点：Vue对象绑定dom元素的两种方法、使用Vue中的模板语法、Vue中的数据绑定。
Vue对象绑定dom元素的两种方法
常规使用方法：new Vue之后直接配置el属性 例如： let vm=new Vue({ el:"#demo", data:{ name:"Tom" } }) 灵活使用方法：先创建Vue实例，随后使用vm.$mount('#root')指定el的值。 例如： let vm =new Vue({ data(){ return { name:"张三" } } } ) vm.$mount("#demo") 直接写el与data已经够简洁了，为什么还要学习其他的写法？ 第一种语法直接将el属性与容器标签进行绑定有一种感觉就是我们平时经常提到的硬编码问题，不利于代码模板化与后期的维护 拓展灵活使用基本语法： data: 常规写法：对象式 灵活使用方法：函数式 关于data目前可以灵活选用，到后期使用组件的时候必须使用函数式，否则会报错 注意： 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了,而是windows实例
使用Vue中的模板语法
模板语法有两种一种是插值语法一种是指令语法 插值语法：用于解析标签体的内容 {{xxx}} 括号内写的应该是js表达式 指令语法：用于解析标签（包括属性、标签体内容、绑定事件等） 语法特征：v-xxx:sss 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式， 且可以直接读取到data中的所有属性。 备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。 指令语法中不可以在使用{{}}类似的语法。
Vue中的数据绑定
数据的绑定分为两种： 单项绑定（v-bind） 只能从vue对象属性的改变影响DOM元素的改变，DOM中的元素改变影响不到vue中属性的值 双向绑定（v-model） 双向绑定之后会触发连锁机制，vue对象内部属性改变随之DOM元素进行改变，Dom元素改变随之vue属性改变 以及单项绑定的元素改变。 注意： 双向绑定一般都应用在表单类元素上（input、select等） 单项与双向绑定都有简写方式，单项绑定可以用:替代。双向绑定可以直接用v-model=xxx
代码解析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初识Vue</title> <!-- 这是我的vue.js存放的方式，使用之前必须要先引入 --> <script type="text/javascript"src="../js/vue.js"></script> </head> <body> <!-- 使用Vue之前需要将Vue对象与一个dom元素进行绑定，而绑定时需要这个dom元素的id --> <div id="demo1"> <!-- 数据绑定常规写法 --> <h1>单项数据绑定</h1> <!-- 将Vue中的属性hello与输入框中的属性进行绑定，由于是单项绑定，所以输入框内输入的值并不会影响Vue中的值 而Vue中的值进行改变时会影响输入框中的值 --> <input v-bind:value="hello"> <hr> <!-- 双向数据绑定，一个值变另一个值直接同步改变dom元素与vue中的属性互相影响 --> <h1>双向数据绑定</h1> <input v-model:value="hello"> <!-- 数据绑定简洁写法 --> <h1>单项数据绑定</h1> <input :value="hello"> <hr> <h1>双向数据绑定</h1> <input v-model="hello"> <!-- 给Tom打招呼 --> <h2>大家好我叫{{hello}}</h2> </div> </body> <script> //vue的全局配置，不在控制台打印多余的提示 Vue.config.productionTip = false; //创建vue对象，并进行绑定 let vm=new Vue({ //绑定的标签名 el:"#demo1", //vue中的属性集合（键的名称不可以随意起） data:{ //vue对象中的一个属性（键:值） hello:"Hello Tom！" } }) </script> </html>
