Vue基础知识简介

 

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>