v-if v-else v-for v-on v-bind
由于公司只用JQ,再这样下去，本宝宝就要被淘汰啦，所以闲暇时间，学习下当前热门框架Vue,这也是我准备今年必须啃下的硬骨头。在此记录学习过程中的点点滴滴，一方面方便其他有志于学习Vue的同学，另一方面，也有助于我后期回顾知识。以下文字纯属手码，如有雷同，纯属巧合。欢迎志同道合者提出文中错误和问题！
1.vue常用指令
v-if v-else
v-if、v-else 条件渲染指令，根据其后表达式的boolean值进行判断是否渲染该元素
例子：
<div id="app">
<h2 v-if="flag">show-boy</h2>
<!-- v-else和v-if一起用-->
<h2 v-else>show-girl</h2>
<button v-on:click="changeFlag"></button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
},
methods:{
changeFlag:function(){
this.flag = !this.flag;
}
}
})
<script>
v-if和v-else一般结合起来用，当v-if后面的变量的布尔值为真的时候，显示该内容"show-boy"，v-else里面的内容不显示。反之，则显示v-else里面的内容"show-girl"，不显示v-if里面的内容
v-show
v-show决定是否显示内容
例子：
<div id="app">
<h2 v-show="flag">show-me</h2>
<button v-on:click="changeFlag"></button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
},
methods:{
changeFlag:function(){
this.flag = !this.flag;
}
}
})
<script>
v-show决定该区域是否显示出来，当后面布尔值为真的时候，显示"show-me",反之不显示
v-for
v-for是vue指令当中用的最频繁的，它的作用就相当于我们在JS代码中循环遍历从后台获取的数据，最后再将数据渲染到页面上
例子：
<div id="app">
<ul>
<li v-for="item in Arr">//item为每次循环的对象
<div>item.name</div>
<div>item.age</div>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
Arr:[
{
name:"tom",
age:15
},
{
name:"jack",
age:20
}
]
}
})
<script>
//结果
tom
15
jack
20
v-for一般用来将从后台获取的数据，循环遍历渲染在页面上，使用v-for不仅可以循环遍历数组元素，还可以遍历数组元素的下标
例子：
<div id="app">
<ul>
<li v-for="(item,i) in Arr">//item为每次循环的对象,i为元素下标
<div>第{{i}}个人的名字为：{{item.name}}</div>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
Arr:[
{
name:"tom",
age:15
},
{
name:"jack",
age:20
}
]
}
})
<script>
//结果:
第0个人的名字为：tom
第1个人的名字为：jack
v-for不仅可以用来遍历数组，还可以用来遍历对象的key和value
例子：
<div id="app">
<ul>
<li v-for="(value,key) in Mine">//key为属性名称，value为对应属性值,注意value在前，key在后
<span>{{key}}</span>:
<span>{{value}}</span>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
Mine:{
name:"rui.wei",
age:25,
gender:"man"
}
}
})
<script>
//结果:
name: rui.wei
age: 25
gender: man
v-on
v-on用来给元素绑定事件，事件函数定义在实例vm的methods属性里
例子：
<div id="app">
<button v-on:click="myTry"></button>//可以简写为@click="myTry"
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
},
methods:{
myTry:function(){
console.log("Welcome to Vue")
}
}
})
<script>
不管什么事件，如click、mouseover、keyup...都用该指令绑定到对应元素上，如果想要对该元素做一些行为或者样式改变的话，那么在methods中定义事件的时候，要将事件对象传入进去，如下：
例子：
<div id="app">
<button v-on:click="myTry"></button>//可以简写为@click="myTry"
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
},
methods:{
myTry:function(event){
event.target.style.background = "red";
}
}
})
<script>
Vue的强大之处，还在于很人性化，比如给事件加上了一些事件修饰符和按键修饰符（即指定什么键触发该事件）**
(官方解释)在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
例子（事件修饰符）：
<div id="app">
<button v-on:click.stop="myTry"></button>//可以简写为@click="myTry"
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
},
methods:{
myTry:function(event){
event.target.style.background = "red";
}
}
})
<script>
//.stop:取消事件冒泡
//.prevent:提交事件不在重载页面
//.self:只在该元素上触发事件，而不在其子元素上触发事件
//.once:点击事件将只会触发一次
//事件修饰符还可以是串联的，如<form v-on:submit.prevent></form>
......
例子（按键修饰符）：
<div id="app">
<div v-on:keyup.enter="myTry"></div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
},
methods:{
myTry:function(event){
console.log("You have get it by press Enter!")
}
}
})
<script>
//在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符,有：.enter/.tab/.delete (捕获 “删除” 和 “退格” 键)/.esc/.space/.up/.down/.left/.right
v-bind
v-bind用来给元素绑定属性
1.v-bind:class用来给元素动态添加class值
例子：
<style>
.myClass{
background:"pink";
color:"gray";
}
</style>
<body>
<div id="app">//v-bind:class可以缩写为:class
<h2 v-bind:class={myClass:flag}">Hello world!</h2>
<button @click="changeFlag">Give me a change!</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:false
},
methods:{
changeFlag:function(){
this.flag = !this.flag;
}
}
})
<script>
</body>
//当我们点击按钮的时候，动态的改变定义在data中的flag值。当flag值为true的时候，h2标签将会加上名为myClass的class。但是一般会将flag同时对应两个class，从而在两个class之间来回切换样式。如下:
<style>
.myClass{
background:"pink";
color:"gray";
}
.myClass_1{
background:"red";
color:"blue";
}
</style>
<body>
<div id="app">
<h2 :class={myClass:flag,myClass_1:!flag}">Hello world!</h2>
<button @click="changeFlag">Give me a change!</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:false
},
methods:{
changeFlag:function(){
this.flag = !this.flag;//methods中的this==vm
}
}
})
<script>
</body>
2.v-bind:style
v-bind:style用来给元素绑定样式
例子：
<div id="app">
<div :style="myStyle">Welcome to my world!</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true,
myStyle:{
"color":"red",
"font-size":"16px"
}
}
})
<script>
//div将会加上color="red",font-size:16px样式
网友评论