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来完成数据与视图的双向绑定,通过自动化的方式承担大部分数据工作,来解决由于界面复杂化和快速迭代带来的问题。它的技术模型如下图所示
|
Vue使用
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> |
表单的输入绑定 |
<!--复选框-->
<input type="checkbox" v-model="flag">{{flag}}
<!--复选框组-->
<input type="checkbox" v-model="flagN" value="0"/>唱歌
<input type="checkbox" v-model="flagN" value="1"/>跳舞
<input type="checkbox" v-model="flagN" value="2"/>打游戏
<span>{{flagN}}</span>
<!--单选框组-->
<input type="radio" v-model="flagM" name="test" value="0"/>男
<input type="radio" v-model="flagM" name="test" value="1"/>女
<span>{{flagM}}</span>
<!--下拉框-->
<div>
<select v-model="selected1">
<option v-for="item in items" :value="item.value">
{{item.key}}
</option>
</select>
<span>{{selected1}</span>
</div>
<input type="text" v-model.trim='msg'/><!--去掉前后空格-->
<input v-model.number='num' type="number"/><!--只能输入数据-->
</div> <script>
window.onload=function(){
new Vue({
el:'#my',//2.0不允许挂载到html body元素上
data:{
msg:'Hello World',
url:"https://www.baidu.com/img/bd_logo1.png",
aa:"aa",
bb:"bb",
flag:true,
ff:{color:'#000',fontSize:'20px',borderBottom:'1px solid red'},
gg:{backgroundColor:'blue'}
},
methods:{
}
})
}
/*$.each(arr,function(index,item){
})*/
</script> |
<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> |