<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue指令学习</title>
<style>
.red{
color: red;
}
.size{
font-size: larger;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 各种数据操作指令 -->
<div>
<!-- v-cloak:防止闪动、页面先显示{{msg}}、然后再出现结果的情况 -->
<!-- 填充纯文本 -->
<div v-cloak v-text="msg"></div>
<!-- 填充富文本 -->
<div v-html="msg_html"></div>
<!-- 是否显示当前单元 -->
<div v-show="is_show">当前是否显示</div>
<!-- if else if else -->
<div v-if="age>60">老年人</div>
<div v-else-if="age<60 && age>30">中年人</div>
<div v-else-if="age<30 && age>18">年轻人</div>
<div v-else>小屁孩</div>
<!-- 单数组for循环 -->
<div>
<ul>
<li v-for="item in str_arr">
{{item}}
</li>
</ul>
<ul>
<!-- index:代表序列号 -->
<li v-for="(item,index) in str_arr">
{{index+"----"+item}}
</li>
</ul>
</div>
<!-- 对象数组for循环 -->
<div>
<ul>
<!-- v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 -->
<!-- key 来提供一个排序提示： -->
<li :key="item.ID" v-for="(item,index) in json_arr">
当前序号:{{index}}
ID：{{item.ID}}
姓名:{{item.name}}
年龄:{{item.age}}
</li>
</ul>
</div>
</div>
<!-- v-on 事件 -->
<div>
<button v-on:click="Onclick">点击事件</button>
<button @click="Onclick">点击事件(简写)</button>
<button data-type="button1" data-name="BUT" @click="OnclickMsg('hello',$event)">点击事件(传参数)</button>
<!-- 键盘事件 -->
<!-- 如果想实现自定义键盘事件,请先获取相应的键盘对应的code值.再将该code值赋到自定义方法里面 -->
<input type="text" v-on:keyup='keyupCode' value="获取按键修饰符" />
<input type="text" v-on:keyup.空格='keyup_kong' value="调用空格事件" />
<input type="text" v-on:input='keyup_input' value="文本框输入事件" />
<input type="text" v-on:blur='keyup_blur' value="失去焦点事件" />
<!-- 阻止冒泡事件
v-on:click.stop="handle"
.prevent阻止默认行为
v-on:click.prevent="handle" -->
<div @click="Onclick">
<button data-type="button1" data-name="BUT" @click.stop="OnclickMsg('hello',$event)">阻止冒泡</button>
</div>
<!-- a标签绑定url -->
<a v-bind:href='url'>跳百度</a>
<a :href='url'>跳百度2</a>
<!-- prevent:组止默认行为 -->
<a v-on:click.prevent="Onclick" href="http://www.baidu.com">被阻止默认行为的A</a>
<form>
<div @click="Onclick">
<!-- 这种写法会调用:Onclick和OnclickMsg方法。而且也会执行sumbit的默认事件 -->
<!-- <button type="submit" data-type = "button1" data-name = "BUT" v-on:click="OnclickMsg('hello',$event)">按钮</button> -->
<!-- 只执行OnclickMsg方法.并不会执行sumbit的默认事件 -->
<button type="submit" data-type="button1" data-name="BUT" v-on:click.stop.prevent="OnclickMsg('hello',$event)">按钮</button>
</div>
</form>
<!-- once:点击回调只会触发一次 -->
<button type="button" data-type="button1" data-name="BUT" v-on:click.once="Onclick">只能点击一次的按钮</button>
</div>
<!-- v-bind 事件(对象属性操作) -->
<div>
<img v-bind:src="bind_obj.imageSrc">
<!-- 缩写 -->
<img :src="bind_obj.imageSrc">
<!-- 针对class操作 -->
<!-- <div :class="{bind_obj.redClass.name : bind_obj.redClass.is}"> -->
<div :class="{red:bind_obj.isred}">
<span>{{msg}}</span>
</div>
<div :class="[bind_obj.red_class,bind_obj.size_class]">
<span>{{msg}}</span>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/* 自定义在输入框里面按空格的事件 */
Vue.config.keyCodes.空格 = 32;
var vm = new Vue({
el: "#app",
data: {
msg: "我是msg内容",
msg_html: "<h1>我是标题</h1>",
is_show: true,
age: 27,
str_arr: ["1", "2", "3"],
json_arr: [{
ID: 1,
name: '王1',
age: 18
}, {
ID: 2,
name: '王2',
age: 17
}, {
ID: 3,
name: '王3',
age: 19
}],
url: 'http://www.baidu.com',
bind_obj: {
imageSrc: '~/../image/logo.jpg',
isred:true,
red_class:'red',
size_class:'size'
},
input_obj:{
input_str:'',
textarea_str:'',
checkedNames:[],
for_checked:[]
}
},
methods: {
/*
Vue方法：
*/
Onclick: function() {
alert("当前按钮被点击了")
},
OnclickMsg: function(msg, event) {
/* 显示当前对象的文本信息 */
console.log(event.target.innerHTML)
/* 显示当前对象的自定义属性 */
console.log(event.target.dataset.type)
console.log(event.target.dataset.name)
alert(msg)
},
keyupCode: function(event) {
/* 显示keyCode就是对应的键盘code */
console.log(event.keyCode)
},
keyup_kong: function() {
console.log('在输入框按下空格的事件')
},
keyup_input: function(event) {
//获取当前输入框当前输入的值
console.log(event.target.value)
},
keyup_blur: function() {
console.log('当前文本框失去焦点')
}
}
})
</script>
</html>
