Vue简述

什么是Vue？

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

渐进式: 自底向上增量开发的设计 。
视图组件：带有html结构，样式以及功能的特定模块。
视图：由多个组件构成的大的区间模块。
数据绑定：后台数据更新，前台页面随之变化。

**

MVVM

**：
MVC（单向循环模式）：
Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。
　　通常模型对象负责在数据库中存取数据。
View（视图）是应用程序中处理数据显示的部分。
　　通常视图是依据模型数据创建的。
Controller（控制器）是应用程序中处理用户交互的部分。
　　通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
　　
MVVM是Model-View-ViewModel的简写。
Vue.js借鉴了Angular以及React的一些核心思想，综合各自的长处进行了操作以及性能等方面的优化，进而打造出一款性能更优，学习更容易的MVVM框架。

Vue全家桶：vue vuex vue-router axios

vue对比angular
1、vue在设计之初参考了很多angularjs的思想
2、vue相对比与angular比较简单
3、 vue相对比与angular比较小巧，运行速度快
4、 vue与angular数据绑定都可以用｛｛｝｝
5、vue指令用v－xxx angularjs用ng－xxx
6、vue数据放在data对象里面，angular数据绑定到$scope对象上

vue对比react
1、vue与react都使用 virtual DOM（虚拟Dom：由js动态生成dom元素）
2、vue与react都提供了组件化的视图组件（angularjs没有组件）
3、vue与react将注意力集中保持在核心库，有丰富的插件库
4、react使用jsx（js里面插入xml标签的语法）渲染页面，vue使用更简单的模版（template里写入html标签语法）
5、vue比react运行速度更快（有争议。因为react是首先推出虚拟dom用法的，测试vue比它快不了多少，不过都比angularjs快）

vue基础语法

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的
Var vm=new Vue({})
基础属性：
el:获取执行vue的dom元素－初始化范围
data ：存储数据
methods ：执行的方法

1)绑定数据有三种方式：
1.{{}} 在双括号里加入变量
2.利用指令 v-text=”” (只能绑定纯文本)
3.利用指令 v-html=”” 可以绑定html结构或纯文本 （对比： angular中 ng-bind-html ， vue中 是 v-html ）
注意：在{{}}中，可进行业务逻辑运算。比如 +-*/ 和 三目运算（？ ：）

2）事件绑定两种方式：
1.v-on:click=“”
2. @click＝“”
注意：事件中有event对象时，需要传一个实参为 $event。 eg：<button @click = "test($event )”> 然后在methods里定义test函数就好了。
操作数据 通过this操作。注意，在实例化对象内部，this始终指向该实例化对象，如果进行了改变this指向的操作，记得保存this指向，避免其变化。

3）其他指令
v-for=“item in list” 循环 item循环到的数组值
（注意：在angularjs中，ng-repeat ( bug: 不能遍历含有重复数据的数组) 加上 track by $index == v-for 意思就是vue中的v-for是可以遍历含有重复数据的数组的）
v-for=“(item,key) in list” key循环到的下标index

v-model=“”对应表单元素value，不可直接使用{{}}获取，需在vue初始化一下
使用之前先初始化ipt：v-model=“ipt” （初始化ipt，要在data中设置） data：{ ipt：‘’}
（在angularjs中的ng-model中是不需要初始化变量的）

注意：v-model绑定的永远是value值
v-if 布尔值 为false 时代表节点消失
V-if 与 v-else-if v-else 可以构成判断
( 中间不能穿插任何DOM) 下面是错误写法：

V-show 布尔值 为false时代表节点设置了display:none属性
无v-hide (不要任意猜测)
V-once 一次渲染，即使后面有更改视图的操作也不会动态渲染

绑定属性：

1)行间样式设置

v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
//v-bind 是属性绑定

data: {
            activeColor: 'red',
            fontSize: 30
 }

v-bind:style的对象语法十分直观——看着非常像 CSS，其实它是一个JavaScript对象

2)数组样式形式设置

v-bind:style=“[styleObjectA, styleObjectB]”
data: {
                styleObjectA: {
                    color: 'red'
                },
                styleObjectB: {
                    fontSize: '30px'
                }
            }

类名设置

1) v-bind:class=“{‘class-a’:isa,‘class-b’:isb}”
Isa isb 值为true 添加相应类名
为false 不添加类名
对象形式设置

<div :class="classobj"></div>


classobj:{
active:true,
'class-a':true,
'class-b':true
}