vue：1-1，简介以及基础

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

Vue.js借鉴了Angular以及React的一些核心思想，综合各自的长处进行了操作以及性能等方面的优化，进而打造出一款性能更优，学习更容易的MVVM框架。

它的作者是：尤雨溪

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

2、vue与react都提供了组件化的视图组件

3、 vue与react将注意力集中保持在核心库，有丰富的插件库

4、react使用jsx渲染页面，vue使用更简单的模版

5、vue比react运行速度更快

vue基础语法

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的

Var vm=new Vue({})

基础属性：

el:获取执行vue的dom元素－初始化范围

data ： 存储数据

methods ：执行的方法

1)绑定数据

{{}} 或者  v-text=“”      只能绑定纯文本

绑定html  angular中 ng-bind-html  vue中  v-html

表达式 在{{}}中  +-*/  直接可用  三目运算一样可用 

2）事件绑定

v-on:click=“”      或者    @click＝“”

绑定事件  －－事件中有event对象  函数参数为  $event

操作数据  通过this操作

3)其他指令

v-for=“item in list” 循环  item循环到的数组值

v-for=“(item,key) in list”  key循环到的下标index

v-model=“”  表单元素value    不可直接{{}}获取，需在vue初始化设置一下

------------------------------------------------------------------------------------------------

v-if 布尔值 为true 代表节点消失

V-if 与 v-else-if v-else 可以构成判断

V-show布尔值  为true  代表节点设置了display:none属性

无v-hide (不要任意猜测)

V-once 一次渲染

---------------------------------------------------------------------------------------------------

行间样式设置

v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”

data: {

            activeColor: 'red',

            fontSize: 30

    }

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

数组样式形式设置

v-bind:style=“[styleObjectA, styleObjectB]”

data: {

                styleObjectA: {

                    color: 'red'

                },

                styleObjectB: {

                    fontSize: '30px'

                }

            }

类名设置

v-bind:class=“{‘class-a’:isa,‘class-b’:isb}”

Isa    isb  值为true  添加相应类名

为false  不添加类名

对象形式设置

classobj:{

active:true,

'class-a':true,

'class-b':true

}