Vue.js 指令学习
2017-09-01 16:28
316 查看
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <!-- Hello World! --> <div id="helloworld"> <p>HelloWorld元素</p> <input v-model="message" placeholder="请输入..."> <p>消息是: {{message}}</p> </div> <script type="text/javascript"> var vm = new Vue({ el:"#helloworld", data:{ message: "Hello World !" } }); </script> <br><br> <input v-model="message" placeholder="edit me"> <p></p> <br><br> <!-- v-if:条件渲染指令,它根据表达式的真假来删除和插入元素 --> <div id="vue_if"> <p>v-if指令</p> <p v-if="yes">Yes</p> <p v-if="no">No</p> <p v-if="age>20">{{age}}</p> age:<input v-model="age"> </div> <script type="text/javascript"> var vif = new Vue({ el: "#vue_if", data: { yes: true, no: false, age: 25 } }); </script> <br><br> <!-- v-show:使用v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性 --> <div id="vue_show"> <p>v-show指令</p> <p v-show="yes">Yes</p> <p v-show="no">No</p> 4000 <p v-show="age>20">{{age}}</p> age:<input v-model="age"> </div> <script type="text/javascript"> var vshow = new Vue({ el: "#vue_show", data: { yes: true, no: false, age: 25 } }); </script> <br><br> <!-- v-else: 可以用v-else指令为v-if或v-show添加一个“else块 v-else元素是否渲染在HTML中,取决于前面使用的是v-if还是v-show指令。 --> <div id="vue_else"> <p>v-else指令</p> age1:<input v-model="age1"> <p v-if="age1 > 25">{{age1}}</p> <p v-else>{{age1}}</p> <!-- age2:<input v-model="age2"> <p v-show="age2 > 25">{{age2}}</p> <p v-else>{{age2}}</p> --> </div> <script type="text/javascript"> var velse = new Vue({ el: "#vue_else", data: { age1: 50, age2: 30 } }); </script> <br><br> <!-- v-for 基于一个数组渲染一个列表 --> <div id="vue_for"> <p>v-for指令</p> <table> <tr v-for="person in people"> <td>{{person.name}}</td> <td>{{person.age}}</td> <td>{{person.sex}}</td> </tr> </table> </div> <script type="text/javascript"> var vfor = new Vue({ el:"#vue_for", data:{ people:[ { name: "Jack", age: 30, sex: "男" }, { name: "Mari", age: 15, sex: "男" }, { name: "Dlt", age: 55, sex: "女" } ] } }); </script> <br><br> <!-- v-bind:v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开, 这个参数通常是HTML元素的特性(attribute) --> <div id="vue_bind"> <p>v-bind指令</p> 网站链接<input v-model="href"><br> <a v-bind:href="href" v-bind:target="target"> {{href}} </a> </div> <script type="text/javascript"> var vbind = new Vue({ el: "#vue_bind", data:{ href:"https://www.baidu.com", target:"_blank" } }); </script> <br><br> <!-- v-on指令用于给监听DOM事件 --> <div id="vue_on"> <p>v-on指令</p> <button v-on:click="fun1">绑定方法</button> <button @click="fun2('Hi')">内联方法</button> </div> <script type="text/javascript"> var von = new Vue({ el: "#vue_on", data:{ message:"Hello World!" }, methods:{ fun1: function(event){ console.log("绑定方法"); alert(this.message); }, fun2: function(arg){ alert("点击:内联方法"+arg); } } }); </script> </body> </html>
相关文章推荐
- Vue.js学习系列(二十)--常用指令(三)
- Vue.js 学习(6) -- Vue指令之:条件渲染
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- Vue.js学习系列(十七)--常用指令(一)
- Vue.js学习 Item13 – 指令系统与自定义指令
- Vue.js总结学习(指令、计算属性、数据绑定)
- Vue.js 学习(6) -- Vue指令之:列表渲染
- Vue.js学习 Item13 – 指令系统与自定义指令
- Vue.js学习 Item13 – 指令系统与自定义指令
- Vue.js入门学习--v-if 组合 v-else-if条件指令渲染DOM(三)
- 学习使用vue.js(二)声明式渲染 和 指令绑定
- Vue.js学习系列(二十)--常用指令(三)
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- Vue.js学习记录之在元素与template中使用v-if指令实例
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- vue.js中指令Directives详解
- Vue学习之源码分析--从template到DOM(Vue.js源码角度看内部运行机制)(九)
- angular.js学习(1)--directive指令独立scope
- vue学习-- 内置指令