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动态绑定数据: