一、走起Vue2.0
一、下载Vue2.0的两个版本：
官方网站：http://vuejs.org/
· 开发版本：包含完整的警告和调试模式
· 生产版本：删除了警告，进行了压缩
二、编写第一个HelloWorld代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
lang="en"> charset="UTF-8">
Hello World {{message}}
|
二、v-if v-else v-show 指令
一、v-if:
v-if:是vue 的一个内部指令，指令用在html中。
v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。
关键代码
1 |
|
完整html代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
lang="en"> charset="UTF-8">
v-if 判断是否加载
|
这里在vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好：合东，如果为false时，就显示请登录后操作。
2、v-show ：
调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
1 |
<div v-show="isLogin">你好：合东div> |
3、v-if 和v-show的区别：
· v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
· v-show：调整css dispaly属性，可以使客户端操作更加流畅。
三、v-for指令 ：解决模板循环问题
一、基本用法：
模板写法
1 2 3 |
v-for="item in items"> {{item}} |
js写法
1 2 3 4 5 6 |
var app=new Vue({ el:'#app', data:{ items:[20,23,18,65,32,19,54,56,41] } }) |
完整代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
lang="en"> charset="UTF-8">
v-for指令用法 v-for="item in items"> {{item}}
|
这是一个最基础的循环，先在js里定义了items数组，然后在模板中用v-for循环出来，需要注意的是，需要那个html标签循环，v-for就写在那个上边。
二、排序
三、已经顺利的输出了定义的数组，但是需要在输出之前给数组排个序，那就用到了Vue的computed:属性。
1 2 3 4 5 |
computed:{ sortItems:function(){ return this.items.sort(); } } |
在computed里新声明了一个对象sortItems，如果不重新声明会污染原来的数据源，这是Vue不允许的，所以要重新声明一个对象。
如果不重新声明报错：
如果一切顺利的话，已经看到了结果，但是这个小程序还是有个小Bug的，现在把数组修改成这样。
1 |
items:[20,23,18,65,32,19,5,56,41] |
把其中的54修改成了5，我们再看一下结果，发现排序结果并不是想要的
可以自己编写一个方法sortNumber，然后传给的sort函数解决这个Bug。
1 2 3 |
function sortNumber(a,b){ return a-b } |
用法
1 2 3 4 5 |
computed:{ sortItems:function(){ return this.items.sort(sortNumber); } } |
经过一番折腾终于实现了真正的数字排序。
三、对象循环输出
上边循环的都是数组，那来看一个对象类型的循环是如何输出的。
先定义个数组，数组里边是对象数据
1 2 3 4 5 6 |
students:[ {name:'合东',age:32}, {name:'Panda',age:30}, {name:'PanPaN',age:21}, {name:'King',age:45} ] |
在模板中输出
1 2 3 4 5 |
v-for="student in students"> {{student.name}} - {{student.age}}
|
加入索引序号：
1 2 3 4 5 |
<ul> <li v-for="(student,index) in students"> {{index}}：{{student.name}} - {{student.age}} li> ul> |
排序，先加一个原生的对象形式的数组排序方法：
1 2 3 4 5 6 7 8 |
//数组对象方法排序: function sortByKey(array,key){ return array.sort(function(a,b){ var x=a[key]; var y=b[key]; return ((x<y)?-1:((x>y)?1:0)); }); } |
有了数组的排序方法，在computed中进行调用排序
1 2 3 |
sortStudent:function(){ return sortByKey(this.students,'age'); } |
注意：vue低版本中 data里面的items和computed里面可以一样，但是高版本，是不允许相同名称。
四、v-text & v-html
已经会在html中输出data中的值了，已经用的是{{xxx}},这种情况是有弊端的，就是当网速很慢或者javascript出错时，会暴露的{{xxx}}。Vue提供的v-text,就是解决这个问题的。代码：
1 |
{{ message }}=v-text="message"> |
如果在javascript中写有html标签，用v-text是输出不出来的，这时候就需要用v-html标签了。
1 |
v-html="msgHtml"> |
双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，需要使用v-html 指令。
需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS***。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
完整代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
lang="en"> charset="UTF-8">
v-text & v-html 案例 {{ message }}=v-text="message"> v-html="msgHtml">
|
五、v-on：绑定事件监听器
v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。
一、使用绑定事件监听器，编写一个加分减分的程序。
效果如图
程序代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
lang="en"> charset="UTF-8">
v-on 事件监听器 本场比赛得分： {{count}} v-on:click="jiafen">加分 v-on:click="jianfen">减分
|
v-on 还有一种简单的写法，就是用@代替。
1 |
@click="jianfen">减分 |
除了绑定click之外，还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到count上。
绑定事件写法：
1 |
type="text" v-on:keyup.enter="onEnter" v-model="secondCount"> |
javascript代码：
1 2 3 |
onEnter:function(){ this.count=this.count+parseInt(this.secondCount); } |
因为文本框的数字会默认转变成字符串，所以需要用parseInt()函数进行整数转换。也可以根据键值表来定义键盘事件：
六、v-model指令
v-model指令，理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
一、看一个最简单的双向数据绑定代码：
html文件：
1 2 3 4 5 |
原始文本信息：{{message}} 文本框 v-model:type="text" v-model="message"> |
javascript代码：
1 2 3 4 5 6 |
var app=new Vue({ el:'#app', data:{ message:'hello Vue!' } }) |
二、修饰符
· .lazy：取代 imput 监听 change 事件。
· .number：输入字符串转为数字。
· .trim：输入去掉首尾空格。
三、文本区域加入数据绑定
1 |
四、多选按钮绑定一个值
1 2 3 |
多选按钮绑定一个值 type="checkbox" id="isTrue" v-model="isTrue"> for='isTrue'>{{isTrue}} |
五、多选绑定一个数组
1 2 3 4 5 6 7 8 9 10 |
<h3>多选绑定一个数组h3> <p> <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names"> <label for="JSP">JSPanglabel><br/> <input type="checkbox" id="Panda" value="Panda" v-model="web_Names"> <label for="JSP">Pandalabel><br/> <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names"> <label for="JSP">PanPanlabel> <p>{{web_Names}}p> p> |
六、单选按钮绑定数据
1 2 3 4 5 6 |
<h3>单选按钮绑定h3> <input type="radio" id="one" value="男" v-model="sex"> <label for="one">男label> <input type="radio" id="two" value="女" v-model="sex"> <label for="one">女label> <p>{{sex}}p> |
七：、v-bind 指令
v-bind是处理HTML中的标签属性的，例如就是一个标签，也是一个标签，绑定
上的src进行动态赋值。
html文件：
1 2 3 |
|
在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。
js文件：
1 2 3 4 5 6 |
var app=new Vue({ el:'#app', data:{ imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg' } }) |
在data对象在中增加了imgSrc属性来供html调用。
v-bind 缩写
1 2 3 4 |
绑定CSS样式
在工作中我们经常使用v-bind来绑定css样式：
在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式
1 |
|
2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
1 |
|
3、绑定class中的数组
1 |
<div :class="[classA,classB]">3、绑定class中的数组div> |
4、绑定class中使用三元表达式判断
1 |
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断div> |
5、绑定style
1 |
<div :style="{color:red,fontSize:font}">5、绑定stylediv> |
6、用对象绑定style样式
1 |
<div :style="styleObject">6、用对象绑定style样式div> |
1 2 3 4 5 6 7 8 9 |
var app=new Vue({ el:'#app', data:{ styleObject:{ fontSize:'24px', color:'green' } } }) |
八、其他内部指令(v-pre & v-cloak & v-once)
v-pre指令
在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
1 |
|
这时并不会输出message值，而是直接在网页中显示{{message}}
v-cloak指令
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
1 2 3 |
[v-cloak] { display: none; } |
1 2 3 |
{{ message }} |
v-once指令
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
1 2 |
|