标签：https v-on for 事件监听 ++ 效率 属性 处理 att
Vue核心库只关注视图层，它不仅易于上手，还便于与第三方或既有项目整合。
前置知识：
实践体验：
首先引入Vue.js
通过官方网站：http://vuejs.org/下载Vue.js
编写Vue.js的第一个程序：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue"></script> <title>Helloworld</title> </head> <body> <div id="app"> {{message}} </div> <script type="text/javascript"> var app=new Vue({ el:‘ #app‘, //获取作用域id data: { //数据绑定 message:‘hello Vue!‘ } }) </script> </body> </html>
Hello World //页面输出
v-if v-else v-show 指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue"></script> <title>v-if / v-show / v-else</title> </head> <body> <div id="app"> <div v-if="man">你好：这位先生</div> <div v-else>你好：这位女士</div> <div v-show="isShow">欢迎您的到来。</div> </div> <script type="text/javascript"> var app=new Vue({ el:‘ #app‘, data:{ man: false, isShow: true } }) </script> </body> </html>
v-if~v-else 和 if(){}else{}有异曲同工之处，data定义的man为（false）时，“你好：这位先生隐藏”；“你好：这位女士”显示。
v-show改变css中display属性，DOM元素已加载。
v-for 指令
v-for指令用于循环渲染一组data中的数组，语法：v-for="item in items"；items 是源数据数组，item是数组元素迭代的别名。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue"></script> <title>V-for 指令</title> </head> <body> <div id="app"> <ol> <li v-for="item in items"> {{item}} </li> </ol> </div> <script type="text/javascript"> var app=new Vue({ el:‘#app‘, data:{ items:[10,20,30,40,50,60,70,80] } }) </script> </body> </html>
有序列表循环渲染输出。
v-text 与 v-html
javascript中html标签用v-text无法输出，v-html标签可以输出html标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue"></script> <title>v-text / v-html</title> </head> <body> <div id="app"> <span>{{ message }}</span>=<span v-text="message"></span><br/> <span v-html="meHtml"></span> </div> <script type="text/javascript"> var app=new Vue({ el: ‘#app‘, data: { message: ‘hello Vue.js!‘, meHtml: ‘<strong>hello Vue.js!</strong>‘ } }) </script> </body> </html>
页面渲染输出：hello Vue.js!=hello Vue.js! ； 加粗的hello Vue.js!
v-on 绑定事件监听
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue"></script> <title>v-on事件监听器</title> </head> <body> <div id="app"> 考试成绩： {{count}}<br/> <button v-on:click="jiafen">加分</button> <button v-on:click="jianfen">减分</button> </div> <script type="text/javascript"> var app=new Vue({ el: ‘#app‘, data: { count:1 }, methods: { jiafen:function() { this.count++; }, jianfen:function() { this.count--; } } }) </script> </body> </html>
此处着重提一下：(v-on: )可以用@来代写，用简写可以提高效率，减少代码量。
v-model 指令
v-model 实现数据的双向绑定：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue"></script> <title>v-model 数据双向绑定</title> </head> <body> <div id="app"> <p>基本信息：{{message}}</p> <p>v-model: <input type="text" v-model="message"></p> </div> <script type="text/javascript"> var app=new Vue({ el: ‘#app‘, data: { message:‘hello Vue!‘ } }) </script> </body> </html>
v-bind 指令
v-bind绑定HTML中的标签属性的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue"></script> <title>v-bind 属性标签绑定</title> </head> <body> <div id="app"> <div v-bind:style="style">v-bind属性</div> </div> <script type="text/javascript"> var app=new Vue({ el:‘#app‘, data:{ style:{ width: ‘100px‘, height: ‘100px‘, lineHeight: ‘100px‘, textAlign: ‘center‘, fontSize: ‘12px‘, color: ‘green‘, border: ‘1px solid green‘ } } }) </script> </body> </html>
( v-hind: )可以简写为( : )。
处理时间及事件绑定要灵活运用，结合Javascript相关知识。
对Vue.js的指令做简单的了解和书写，熟悉Vue基本的指令运用是开启下一步Vue学习的必由之路。
标签：https v-on for 事件监听 ++ 效率 属性 处理 att
原文地址：http://www.cnblogs.com/momei/p/7201807.html
