<%@ 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>
<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 指令學習
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,