内部指令
基本指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Helloworld</title>
</head>
<body>
<div id="app">
<h3>1、展示变量</h3>
{{message}}
<hr>
<h3>2、if else 判断</h3>
<div v-if="isLogin">islogin = true</div>
<div v-else>请登录后操作</div>
<div v-if="isLogout">a</div>
<div v-else>isLogout = fasle</div>
<hr>
<h3>3、v-for指令 ：解决模板循环问题</h3>
<hr>
<li v-for="item in items">
{{item}}
</li>
<h3>4、Vue的computed:属性</h3>
<hr>
<li v-for="sortItem in sortItems">
{{sortItem}}
</li>
<h3>5、Vue的对象循环输出</h3>
<hr>
<ul>
<li v-for="student in sortStudent">
{{student.name}} - {{student.age}}
</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
isLogin: true,
isLogout: false,
items:[20,23,181,65,32,19,54,56,41],
sortItem:[20,23,181,65,32,19,54,56,41],
students:[
{name:'jspang',age:32},
{name:'Panda',age:30},
{name:'PanPaN',age:21},
{name:'King',age:45}
]
},
computed:{
sortItems:function(){
return this.sortItem.sort(sortNumber);
},
sortStudent:function(){
return sortByKey(this.students,'age');
}
}
});
function sortNumber(a,b){
return a-b
}
//数组对象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}
</script>
</body>
</html>
注意事项：
- 高版本中，items和computed是不允许相同名称
- 在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
事件监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Helloworld</title>
</head>
<body>
<h1>v-on 事件监听器</h1>
<hr>
<div id="app">
本场比赛得分： {{count}}<br/>
<button v-on:click="jiafen">加分</button>
<button v-on:click="jianfen">减分</button>
<button @click="reset">重置</button>
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
count:1
},
methods:{
jiafen:function(){
this.count++;
},
jianfen:function(){
this.count--;
},
reset: function(){
this.count = 1
},
onEnter: function () {
this.count=this.count+parseInt(this.secondCount);
}
}
})
</script>
</body>
</html>
数据源绑定
v-model指令，理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Helloworld</title>
</head>
<body>
<h1>v-on 事件监听器</h1>
<hr>
<div id="app">
<p>原始文本信息：{{message}}</p>
<h3>文本框</h3>
<p>v-model:<br><input type="text" v-model="message"></p>
<p>v-model.lazy(移出文本框后数据同步):<br><input type="text" v-model.lazy="message"></p>
<p>v-model.number(检测数字):<br><input type="text" v-model.number="message"></p>
<p>v-model.trim(消除空格):<br><input type="text" v-model.trim="message"></p>
<hr>
<p>原始文本信息：{{textMessage}}</p>
<textarea cols="30" rows="10" v-model="textMessage"></textarea>
<hr>
<h3>多选按钮绑定一个值</h3>
<p>原始文本信息：{{isTrue}}</p>
<input type="checkbox" id="IDisTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>
<hr>
<h3>多选绑定一个数组</h3>
<p>
<input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
<label for="JSPang">JSPang</label><br/>
<input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
<label for="JSPang">Panda</label><br/>
<input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
<label for="JSPang">PanPan</label>
<p>{{web_Names}}</p>
</p>
<hr>
<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
textMessage:'hello textMessage!',
isTrue: true,
web_Names:[],
sex:[],
},
})
</script>
</body>
</html>
样式绑定
v-bind指令：Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.base {
width: 200px;
height: 200px;
}
.active {
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ active: isActive, base: hasBase }"></div>
<hr>
<h3>多样式类绑定</h3>
<div class="static"
v-bind:class="{ base: hasBase, active: isActive, 'text-danger': hasError }">
</div>
<hr>
<h3>数组绑定</h3>
<div v-bind:class="[baseClass, activeClass, errorClass]"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: true,
hasBase: true,
baseClass: 'base',
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
</body>
</html>
小结
el 是什么东西？
网友评论