vue介绍

      vue介绍

1. 前端三大框架：Angular、React、Vue,目前React最火, Vue和Angular不相上下,但发展趋势vue更大, 在大型超大型web应用开发上，看好Angular, 小型应用上，看好vue,个性化需求、中型应用，更倾向react
2. 渐进式框架：vue只提供数据驱动和组件开发等核心功能,可以根据需要去安装第三方库实现丰富的功能,比如Vuex、axios、vue-router

1. Vue.js目前最流行的的一个前端框架，三大主流前端框架[1]之一。
2. AngularJS是Vue早期开发的灵感来源。然而，AngularJS 中存在的许多问题，在 Vue 中已经得到解决。
3. Vue.js是一套构建用户界面的渐进式框架[2]。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用[3]。
4. Vue.js的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
5. Vue.js自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能驱动复杂的单页应用。

库（Library）是一系列预先编写好的代码集合，供开发者在编程中调用，大大减少重复工作量

框架（Framework）是库的一种。很多人会把框架和普通库的区别仅仅理解为规模和复杂度，其实不然。

同时用jQuery和Vue没问题，Vue和React就不行。因为主控制流只有一个。

vue的优缺点

优点：

1. 组件化开发，提升效率，方便复用，便于协同开发
2. 单页面路由
3. 双向数据绑定
4. 易于结合其他的第三方库
5. 丰富的api方法
6. 轻量高效,虚拟DOM
7. MVVM，数据驱动视图
8. 轻量级的框架
9. 渐进式

缺点：

1. 缺少高阶教程和文档
2. 生态环境不如angular和react
3. 社区不大
4. 不支持ES5的浏览器无法使用，如ie8
5. vue的响应系统无法检测属性的添加和删除，以及某些数组的修改
6. 报错不明显，适合单人开发或者中小型项目
7. 不利于SEO优化

1. Vue实例

安装

1. 下载vue.js文件开发版本 (vuejs.org)
2. 使用cdn:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({

  // 选项

})

属性

El    选择实例挂载区域,选择器，

Data   vue中所有的变量都被集中到data中data可以是一个对象，也可以是一个带有return的函数，当然，推荐使用带return的函数，因为函数具有作用域，不会导致多个实例之间污染,data中的数据会被渲染到vue实例上，所以使用需要通过this

Methods  方法函数函数之间，函数调用数据都是需要使用this的，如果函数中有其他的能够更改this的函数（如数据请求），需要声明this

指令:

v-text,v-html 相当于js的innerText,innerHTML 用于输出到页面

v-bind  动态绑定属性,简写是冒号( : )

v-on  绑定事件,简写是@

v-model  

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；

select 字段将 value 作为 prop 并将 change 作为事件。

v-if  v-else-if v-else

v-if:条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy[1] 值的时候被渲染。

v-else、v-else-if:是跟js中的if一样,v-if的else块和else-if块

[1]truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）

v-show

根据条件展示元素, 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

v-for

渲染数组列表, v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名

v-for 还支持一个可选的第二个参数，即当前项的索引。

为了高效的渲染,需要配合key,key的作用

v-pre

原样输出，不解析模板标签{{}}

v-clock

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

当内部加载完,被渲染后,vue会自动删除v-clock

v-once

只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能

<script>

new Vue({

el: '#app',             //挂载点，每个模版只有一个挂载点

    data:                   //数据

    methods:                //方法

    computed:               //计算属性

    watch:                  //侦听器

    components:             //局部组件

}

</script>