jQuery 完全是用来驱动Dom,点击对应的数据去动态加载,绑定未来元素有可能没有
|
vue完全的为视图层去服务,会将视图完全分离开来:关心的是Model 和 View
|
vue是MVVM模式
M(模型):当前视图中可用的数据
V(视图):渲染的UI 即HTML
VM(视图模型):
后端模型:m-v-c-v-m
mvvm省略了加工和处理模型的步骤
MVC模式:
Model(模型):
View(视图):
Controller(控制器):处理和加工Model
|
MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点
1. 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。 2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。 3. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码。 4. 可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。 折叠 |
不同的是采用ViewModel来完成数据与视图的双向绑定,通过自动化的方式承担大部分数据工作,来解决由于界面复杂化和快速迭代带来的问题。它的技术模型如下图所示 |
1、引用
<script type="text/javascript" src="lib/vue/dist/vue.js"></script>
2、创建一个VUE应用
window.onload=function(){ new Vue({ el:'#my',//2.0不允许挂载到html body元素上 data:{ msg:'Hello World', name:'sonia', age:22, flag:false, arr:['a','b','c','d'], obj:{id:1,name:'aa'}, obj1:[{id:1,name:'aa'},{id:2,name:'bb'},{id:3,name:'cc'}] }, methods:{ } }) } |
---|
表达式:
{{}}用来输出数据,直接在页面进行渲染
<div id="my"> {{msg}},{{arr}},{{obj1}} </div> |
指令:扩展了HTML标签
v-开头自定义的一些标签属性(数据同步操作)
|
<!--双向数据绑定--> <input type="text" v-model="msg">{{msg}}
v-model主要运用于表单,主要用来实现渲染层重构 相当于表单的value,数据模型
|
v-for//用于对数组和对象进行循环遍历
|
<!--数组 arr--> <ul> <li v-for="item in arr">{{item}}</li> </ul> <!--数组 arr--> <ul> <li v-for="(v,i) in arr">{{v}}===={{i}}</li><!--v代表value i是索引--> </ul> <!--对象 obj--> <ul> <li v-for="(v,k) in obj">{{v}}===={{k}}</li><!--v代表键 k是值--> </ul> <!--数组对象 obj1--> <ul> <li v-for="(v,i) in obj1">{{v.name}}={{v.id}}===={{i}}</li><!--v代表value i是索引--> </ul> |
v-on//是一个事件函数,事件执行
简写v-on:click @click
|
<button v-on:click="action()"></button> |
methods:{ action:function(){ this.msg="click"; }, action2:function(){ this.age=20; }, action3:function(){ this.age=22; }, } |
v-show/v-if用来显示和隐藏,if用来判断
<button v-on:mouseover="action2" v-on:mouseout="action3">mouse</button> <button v-on:dblclick="action2">dblcl</button> {{age}} <button @click="action">按钮</button> <button v-show="flag">show</button> <p v-if="age > 21">{{age}}</p> <p v-else>{{name}}</p> |
表单的输入绑定
|
|||
<style> .aa{ color: #1cb841; font-size:20px; } .bb{ background-color: red; } .cc{ font-size: 30px; } .dd{ background-color: blue; } </style> <div id="my"> <img v-bind:src="url" title="百度LOGO"/> <img :src="url" :title="url"/> <!--引用单个--> <div :class="aa"> aa </div> <!--引用多个--> <div :class="[aa,bb]"> aabb </div> <!--json方式--> <div :class="{cc:flag,dd:flag}"> json </div> <!--style font-size=fontSize 去掉横杠变成驼峰命名法--> <div :style="{color:'#000',fontSize:'40px',borderBottom:'1px solid red'}"> style </div> <!--style 引用单个--> <div :style="ff"> style </div> <!--style 引用多个--> <div :style="[ff,gg]"> class </div> <!--三目运算style--> <div :style="flag ? gg : ff"> flag1 </div> <!--三目运算class--> <div :class="flag ? 'aa' : 'bb'"> flag </div> </div> |
扫描二维码关注公众号,回复:
1587468 查看本文章