JAVA教程系列：vue快速入门

　　一、什么是 Vue

　　Vue 是一个用于构建用户界面的渐进式的js框架，Vue 的核心是MVVM双向数据绑定模式及组件化开发，它使得开发前端不仅易于上手，还便于与Vue的优良生态或既有项目整合。

　　二、快速开始

　　1.在页面引入vue的js文件即可。

　　注意：cdn是一种加速策略，能够快速的提供js文件

　　2.在页面中绑定vue元素

　　创建一个div，id是app<div id="app"></div>

　　3.创建vue对象，设计对象的内容

　　其中该vue对象，绑定了页面中id是app的那个div

　　<script>new Vue({el:"#app",data:{title:"hello vue!", args1:"hi!", age:18, flag:true}});</script>

　　4.在页面的元素中使用插值表达式来使用vue对象中的内容

　　<div id="app">{{ title }}</div>

　　三、插值表达式

　　插值表达式的作用是在View中获得Model中的内容

　　1.插值表达式

　　<div id="app">{{title}}{{[1,2,3,4][2]}}{{ {"name":"xiaoyu","age":20}.age }}{{ sayHello()}}

　　new Vue({el:"#app",data:{title:"hello world!"},methods:{sayHello:function(){return "hello vue";}}});

　　2.MVVM双向数据绑定：v-model

　　<div id="app">{{title}}{{[1,2,3,4][2]}}{{ {"name":"xiaoyu","age":20}.age }}{{ sayHello()}}<input type="text" v-model="title" /></div>

　　3.事件绑定: v-on

　　v-on叫绑定事件，事件是input，响应行为是changeTitle。也就是说，当input元素发生输入事件时，就会调用vue里定义的changeTitle方法

　　new Vue({el:"#app",data:{title:"hello world!"},methods:{sayHello:function(){return "hello vue";},changeTitle:function(){console.log("ct");//往日志里写}}});

　　event.target.value==当前事件的对象（input元素）的value值注意：此时的this指的是当前vue对象。

　　所以：如果在method里要想使用当前vue对象中的data里的内容，必须加上this.

　　changeTitle:function(event){this.title=event.target.value;}

　　4.事件绑定简化版：使用@替换v-on:

　　5.属性绑定： v-bind

　　html里的所有属性，都不能使用插值表达式

　　<a href="{{link}}">baidu</a>new Vue({el:"#app",data:{title:"hello world!",link:"" }, ...

　　上面的这种做法是错误的，可以使用绑定属性绑定来解决：

　　要想在html的元素中的属性使用vue对象中的内容，那么得用v-bind进行属性绑定

　　<a v-bind:href="link">baidu</a>可以缩写成冒号<a :href="link">baidu</a>

　　6.v-once指令

　　指明此元素的数据只出现一次，数据内容的修改不影响此元素

　　<p v-once>{{titile}}</p>

　　7.v-html

　　就好比是innerHTML

　　new Vue({el:"#app",data:{title:"hello world!", link:"",finishedlink:"<a href=''>百度</a>"}, ...

　　8.v-text

　　纯文本输出内容

　　四、事件

　　1.事件绑定范例

　　范例一：

　　<div id="app"><button type="button" v-on:click="increase">click</button><p>{{counter}}</p>

　　new Vue({el:"#app",data:{counter:0 },methods:{increase:function(){this.counter++;},...

　　范例二：

　　<p v-on:mousemove="mo">mooooooo</p>

　　mo:function(event){console.log(event);}

　　范例三：

　　new Vue({el:"#app",data:{counter:0,x:0,y:0,},methods:{increase:function(){this.counter++;},mo:function(event){this.x=event.clientX,this.y=event.clientY}} });

　　2.参数传递

　　<button type="button" v-on:click="increase(2)">click</button>

　　... methods:{increase:function(step){this.counter+=step;},...

　　传多个参数：

　　<button type="button" v-on:click="increase(2,event)">click</button>

　　...methods:{increase:function(step,event){this.counter+=step;},...

　　3.停止鼠标事件

　　<p v-on:mousemove="mo">mx:{{x}}my:{{y}}---<span v-on:mousemove="dummy">停止鼠标事件</span></p>

　　dummy:function(event){event.stopPropagation();}

　　另一种方式：

　　<span v-on:mousemove.stop>停止鼠标事件</span>

　　4.事件修饰符

　　输入回车键时提示

　　输入空格时提示

　　五、vue改变内容虚拟dom和diff算法

　　1.插值表达式的方式

　　范例一：

　　范例二：

　　<p>{{result}}</p>

　　new Vue({el:"#app",data:{counter:0,result:""},methods:{increase:function(step){this.counter+=step;this.result=this.counter>10?"大于10":"小于10"},}});

　　2.computed的用法

　　<div id="app"><button type="button" v-on:click="increase(2)">click</button><p>{{counter}}{{counter>10?"大于10":"小于10"}}</p><p>result:{{result}}</p><p>getResult:{{ getResult() }}</p><p>getResultComputed:{{ getResultComputed}}</p></div>

　　<script>new Vue({el:"#app",data:{counter:0,result:""},methods:{increase:function(step){this.counter+=step;this.result=this.counter>10?"大于10":"小于10"},getResult:function(){return this.counter>10?"大于10":"小于10"}},computed:{getResultComputed:function(){return this.counter>10?"大于10":"小于10"}}});</script>

　　computed的函数第一次调用后会被加入到内存中。

　　computed内的函数使用时不用带小括号

　　computed的函数指的是被动调用，method是主动去触发他里面的函数，computed指的是你去使用这个函数

　　computed是一个属性计算函数，比如用来计算div的宽度和高度，div的宽度和高度一直在变，但computed中的该函数本身没有变，所以可以把函数写在computed中。

　　3.watch的用法：监控

　　watch用于监控参数的变化，并调用函数，newVal是能获得参数新的值，oldVal是参数老的值。

　　new Vue({el:"#app",data:{counter:0,result:""},methods:{increase:function(step){this.counter+=step;//this.result=this.counter>10?"大于10":"小于10"},getResult:function(){return this.counter>10?"大于10":"小于10"}},computed:{getResultComputed:function(){return this.counter>10?"大于10":"小于10"}},watch:{counter:function(newVal,oldVal){this.result=newVal>10?"大于10":"小于10"}}});

　　watch的高端用法：一秒后让count归为0，体现了vue的双向绑定

　　watch:{

　　counter:function(newVal,oldVal){

　　this.result=newVal>10?"大于10":"小于10";

　　var vm=this;//当前data

　　setTimeout(function(){

　　vm.counter=0;

　　},1000);

　　}

　　六、vue改变样式

　　1.class的动态绑定

　　v-bind:class="{red:attachRed}"

　　键名是类名，键值是布尔，如果是true，则将指定的类名绑定在元素上，如果是false，则不绑定。

　　<head><meta charset="UTF-8"><title>下午</title><style>.demo{width:100px;height:100px;background-color:gray;display:inline-block;margin:10px;}.red{background-color: red;}.green{background-color: green;}.blue{background-color: blue;}</style></head><body><div id="app">{{attachRed}}<div class="demo" @click="attachRed=!attachRed" v-bind:class="{red:attachRed}"> </div><div class="demo"></div><div class="demo"></div></div><script src=""></script><script>new Vue({el:"#app",data:{attachRed:false}});</script></body>

　　2.加入computed

　　new Vue({el:"#app",data:{attachRed:false},computed:{divClasses:function(){return {//返回一个json对象red:this.attachRed,blue:!this.attachRed}}}});

　　3.双向绑定的体现

　　在input中输入颜色，就可以设置div的class

　　<div id="app"><input type="text" v-model="color"/>{{attachRed}}<div class="demo" @click="attachRed=!attachRed" v-bind:class="{red:attachRed}"></div><div class="demo"></div><div class="demo" :class="divClasses"></div><div class="demo" :class="color"></div></div><script>new Vue({el:"#app",data:{attachRed:false,color:"green"}, ...

　　4.多个样式的操作

　　.red{background-color: red;color: white;}<div class="demo" :class="[color,{red:attachRed}]">hahaha</div>

　　5.通过style设置样式

　　设置div的style属性的值，style里放json对象，键是驼峰式写法，值是变量color

　　6.使用computed设置样式

　　<div class="demo" :style="myStyle"></div><input type="text" v-model="width"/>new Vue({el:"#app",data:{attachRed:false,color:"green",width:100},computed:{divClasses:function(){return {//返回一个json对象red:this.attachRed,blue:!this.attachRed}},myStyle:function(){return {backgroundColor:this.color,width:this.width+"px"}}}});</script>

　　7.设置style属性的多个样式

　　七、vue中的语句

　　1.分支语句

　　v-if

　　v-else-if

　　v-else

　　v-show: 实际上是让该元素的display属性为none,隐藏的效果。所以性能更好。

　　<div id="app"><p v-if="show">hahah</p><p v-else>hohoho</p><p v-show="show">hehehe</p><input type="button" @click="show=!show" value="dianwo"/></div><script src=""></script><script>new Vue({el:"#app",data:{show:false}});</script>

　　通过模板标签对多个元素进行同一的if和else管理

　　<template v-if="show"><h1>heading</h1><p>inside text</p></template>

　　2.循环语句

　　vue中只有for循环

　　改进版：for语句里，key建议加上，作为标识.i是下标

　　使用templete实现循环

　　循环中操作对象

　　<template v-for="person in persons"><p><span v-for="value in person">{{value}}</span></p><p><span v-for="(v,k,i) in person">{{k}}:{{v}}:{{i}}====</span></p></template><script>new Vue({el:"#app",data:{args:["a","b","c","d"],persons:[{name:"xy",age:20,color:"red"},{name:"yh",age:18,color:"green"}]}});</script>

　　循环的另一种用法：

　　v-for="n in 10" //可以在分页组件中使用

　　八、总结

　　vue是以数据为驱动，渐进式的web框架，MVVM双向绑定，虚拟DOM为核心和diff算法，所谓的虚拟dom和diff算法，是指当页面内容发生变化时，只更新改变的部分，是通过虚拟dom和diff算法实现这样的操作，效率非常高。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60305.shtml