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、引用 2、创建一个VUE应用   window.οnlοad=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:{ } }) }
表达式：{{}}用来输出数据，直接在页面进行渲染 {{msg}},{{arr}},{{obj1}}

指令：扩展了HTML标签 v-开头自定义的一些标签属性(数据同步操作)

{{msg}} v-model主要运用于表单，主要用来实现渲染层重构 相当于表单的value,数据模型

v-for//用于对数组和对象进行循环遍历

{{item}} {{v}}===={{i}} {{v}}===={{k}} {{v.name}}={{v.id}}===={{i}}

v-on//是一个事件函数，事件执行 简写v-on:click @click

methods:{ action:function(){ this.msg="click"; }, action2:function(){ this.age=20; }, action3:function(){ this.age=22; }, }

v-show/v-if用来显示和隐藏，if用来判断

mouse dblcl {{age}} 按钮 show {{age}} {{name}}

表单的输入绑定

{{flag}} 唱歌 跳舞 打游戏 {{flagN}} 男 女 {{flagM}} {{item.key}} {{selected1}   aa aabb json style style class flag1 flag