<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>指令合集</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style>
.greenWord {
color: green;
}
.wordSize {
font-size: large;
background-color: darkorange;
}
.redWord {
color: red;
}
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app1">
<!--绑定普通文本-->
<h3>1、插值绑定</h3>
<span v-text="msg"></span>
<span>{{msg}}</span>
<!--插入一段html源码 将源码渲染为DOM结构-->
<h3>2、v-html 动态渲染html</h3>
<div v-html="mhtml"></div>
<!--v-show 原理：通过改变css的display决定是否显示元素；即不管v-show的值是true还是false,都会渲染完该节点下所有Dom-->
<h3>3、v-show 条件渲染</h3>
<span v-show="isshow">提莫队长现身啦</span>
<!--真正的条件渲染，符合条件则渲染v-if的DOM结构，否则只渲染v-else指示的结构块-->
<h3>4、v-if 使用</h3>
<span v-if="isok">您是男士</span>
<span v-else>您是女士</span>
<span v-if="Math.random() < 0.3">概率小于0.3</span>
<span v-else-if="Math.random() < 0.6 && Math.random()>=0.3">概率0.3~0.5</span>
<span v-else>概率大于50%</span>
<!--for循环插值-->
<h3>5、v-for vue循环</h3>
<div v-for="item in items">{{item}}</div>
<div v-for="item in items2">{{item.name}}>>>{{item.age}}</div>
<!--给节点添加事件处理功能-->
<h3>6、v-on 事件处理器</h3>
<button v-on:click="chgColor" id="btn1">雨中的彩虹</button>
<button v-on:click.right="rightAlert">右击选择</button>
<button v-on:click.stop="stopEvent($event)">停止冒泡</button>
<button v-on:click="count +=1">加法：{{count}}</button>
<!--给元素绑定class属性-->
<h3>7、v-bind 绑定class</h3>
<span v-bind:class="{greenWord : isActive}">快给我披上色彩吧</span>
<span v-bind:class="classObj">却从没有感觉，我无地自容</span>
<span v-bind:class="[redWord]">绑定数组类</span>
<!--给元素绑定内联style-->
<h3>8、绑定内联样式</h3>
<span v-bind:style="{color:'#66cc66',fontSize:20+'px'}">内联样式 对象语法</span>
<span v-bind:style="styleObj">内联样式>>>对象语法</span>
<span v-bind:style="[styleObj]">内联样式>>>数组语法</span>
<!--绑定一个html属性,自定义的也可以-->
<h3>9、绑定一个属性</h3>
<img v-bind:src=" './logo.png' "/>
<div v-bind:title="mtitle">红红火火恍恍惚惚</div>
<div v-bind:data-mid="mid">测试绑定mid</div>
<!--处理表单 憋说话 怒吃你的语法糖-->
<h3>10、v-model 表单控件或者组件上创建双向绑定</h3>
<input v-model="message" placeholder="edit me">
<p>单行信息：{{message}}</p>
<textarea v-model="info" placeholder="add multiple lines"></textarea>
<p style="color: darkorange">多行信息：{{info}}</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">单个复选框：{{checked}}</label>
<h4>多个复选框</h4>
<div>
<input type="checkbox" id="jack" value="jack" v-model="checkNames">
<label for="jack">jack</label>
<input type="checkbox" id="jack2" value="jack2" v-model="checkNames">
<label for="jack2">jack2</label>
<input type="checkbox" id="jack3" value="jack3" v-model="checkNames">
<label for="jack3">jack3</label>
<span>checked names:{{checkNames}}</span>
</div>
<h4>单选框</h4>
<input type="radio" id="one" value="one" v-model="picked">
<label for="one">one</label>
<span>您的选择：{{picked}}</span>
<h4>选择框</h4>
<select v-model="selected">
<option>111</option>
<option>222</option>
<option>333</option>
</select>
<span>您的选择：{{selected}}</span>
<!--语法糖 有点甜 方便一丢丢-->
<select v-model="mselect">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<span>您的选择：{{mselect}}</span>
<!--很少用到这个-->
<h3>11、v-pre 跳过该元素和其子元素编译过程</h3>
<span v-pre>{{@@@@@@@@@@@@@@@@@@@@@@}}</span>
<!--现象：在vue编译结束中，界面可能会闪现一下Mustach符号，很丑。加上这个指令可以有效地阻止这种情况发生，永葆优雅。-->
<h3>12、v-lock 该实例编译结束后，解除该指令绑定</h3>
<div v-cloak>{{message}}</div>
<!--少用-->
<h3>13、v-once 只渲染元素和组件一次</h3>
<span v-once>我只更新一次：{{once}}</span>
<span>不加v-once:{{once}}</span>
</div>
</body>
<script>
var app1 = new Vue({
el: '#app1',
data: {
msg: '插值测试',
mhtml: '<span style="color: palevioletred">巴啦啦小魔仙</span>',
isshow: true,
isok: true,
items: ["林徽因", "陆小曼", "张爱玲"],
items2: [{name: "徐志摩", age: "28"}, {name: '梁思成', age: 26}, {name: '金岳霖', age: 30}],
count: 0,
isActive: false,
error: null,
classObj: {
greenWord: true,
wordSize: true
},
redWord: 'redWord',
styleObj: {
color: '#00eeff',
fontSize: 30
},
message:'',
info:'',
checked:true,
checkNames:[],
picked:'',
selected:'',
options:[{text:'犬次郎',value:'QCL'},{text:'道格森二世',value:'DGS'}],
mselect:'',
once:'渲染2次',
mtitle:'title-property',
mid:'123456'
},
methods: {
chgColor: function () {
$("#btn1").css('color', "#cc66cc")
$('#btn1').text('我变成了粉红色')
},
rightAlert: function () {
alert("您点击了鼠标右键")
},
stopEvent: function (event) {
alert("event:" + event.target.tagName)
}
},
computed: {
classObj: function () {
return {
greenWord: this.isActive && !this.error,
wordSize: this.error && this.error.type === 'fatal'
}
}
}
})
</script>
</html>
