vue

                             Vue

Vue是什么？

是构建用户的渐进式框架

Vue的特点？

1简洁：页面由HTML模板+Json数据+Vue实例组成

2数据驱动：自动计算属性和追踪依赖的模板表达式

3组件化：用可复用、解耦的组件来构造页面

4轻量：代码量小，不依赖其他库

5快速：精确有效批量DOM更新

Vue的核心点？

1：响应的数据绑定（数据与模板的双向绑定）

2：组合的试图组件（相似于element中的模板）

虚拟dom之前的页面如果改动一小部分，还是要重新渲染页面（杀鸡用牛刀），而vue提供了一种虚拟dom的方法，用于当改动小部分时，只是重新渲染那一小部分，大大的减少了浏览器的压力，并使不会资源浪费。

虚拟dom过程：

模板----->渲染函数------->render函数的方法-------->组成虚拟dom树--------->添到dom中

 

Mvvm模式

Mvvm分成三部分：

 M：model数据类型

 V: view视图模板

Vm: view-model视图模型

其中数据类型与视图模板是没有任何关系的，通过视图模型的方法而进行组合在一起

声明式渲染：改变数据使结构发生改变，不需要考虑是怎样的过程，

命令式渲染：原生，对过程要一步步的推理

Vue实例：

//模板

<input type=”text” v-model=”measge” >//如果想让input也能使用这个数据可以用v-model

<div id=”mobo” v-on:click=”fn”>//当点击时调用fn函数

{{ measge}}

</div>

<script>

//数据

Var data={

measge:”nihao”,

}

//声明式渲染

Var n=new vue({

el:”#mobo”,

Data:data,//也可以直接写数据对象（如data：{measge：”nihao”}）

//methods是一些方法

Methods:{

Fn(){Alert(1);},

}

})

</script>

模板的分类：

Html模板：基于dom的模板都是可以解析的html

大括号中写的是文本，不会解析html元素

使用v-bind绑定

可以写一些简单的表达式，如三目，不能写语句

字符串模板：

方法1：使用template字符串

Template的权重比较高会将原el中的挂载属性替换掉，字符串模板在第一级 根部，元素不能有多个

    使用方法：

Var 一个变量保存字符串(解决了html模板中不能解析元素的问题)如：

Var ABC=”<div><span><span></div>”；

Template是vue对象中的属性，所以可以直接添加如：

Template：ABC，

方法2：使用script标签将html结构放在里面

<script type=”x-template” id=”box”>

<div> {{abc}}<div>其中的abc是数据

</script>

通过script的id传入

Template:#box,

指令？

含义：行间中特殊的自定义属性

作用：在表达式改变的同时相应的将某些行为应用到都没中

内置的指令：

 

V-bind动态绑定数据：