V-bind表达式
首先定义元素的属性
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'<h1>大字体</h1>',
mytitle:'这是使用v-bind定义的标题'
}
})
</script>
v-bind表达式是用来绑定元素属性的例如
<input type="button" value="按钮" v-bind:title="mytitle" />
这样就可以绑定元素的title属性
同时我们还可以将进行表达式的字符串的改变
例如
<input type="button" value="按钮" v-bind:title="mytitle+'123'" />
当然v-bind可以直接简写为:
例如
<input type="button" value="按钮" :title="mytitle" />
v-on表达式
v-on表达式主要是Vue针对于传统dom元素的一些相应事件在Vue中的表现形式，
下面以onclick为例列举一段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<input type="button" value="点击" v-on:click="show" />
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'<h1>大字体</h1>',
mytitle:'这是使用v-bind定义的标题'
},
methods:{
show:function(){
alert("Hello");
}
}
})
</script>
</html>
同时，我们可以简写v-on:表达式 简写为@，即将上述代码中的v-on:click简写为@click,同样可以达到与之前的效果一致
事件修饰符的简单介绍
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
- .once 事件只触发一次
v-model双向数据绑定
v-model实现的效果于v-text,v-bind类似，但是他只适用于表单元素，从而实现元素的双向数据绑定
Vue设置样式
直接在元素上使用:style设置
<!--当样式中包含'-'时，必须使用单引号包裹属性-->
<h1 :style="{color:'red','font-size':'50px'}">
这个字很大
</h1>
在data中定义属性
var vm = new Vue({
el:'#app',
data:{
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
})
再去元素中使用:style进行赋值
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
在 :style 中通过数组，引用多个 data 上的样式对象
- 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
Vue指令之v-for和key属性
- 迭代数组
<ul>
<li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>
- 迭代对象中的属性
<!-- 循环遍历对象身上的属性 -->
<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
- 迭代数字
<p v-for="i in 10">这是第 {{i}} 个P标签</p>
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
Vue指令之v-if和v-show
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
