一、插值绑定
<body>
<div id="app">
<!-- 插值绑定 -->
<p v-cloak>++++++++ {{ msg }} ----------</p>
<h4 v-text="msg">==================</h4>
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2">1212112</div>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>'
},
methods: {
}
})
</script>
</body>
效果图
1.文本插值
文本插入非常的简单，只要用大括号“{{ }}”将要绑定的变量、值、表达式括住就能实现，Vue会获得计算后的值，并以文本的形式进行展示。
2.HTML插值
使用“v-text”以及“v-html”进行HTML插值，同样可以动态渲染DOM节点;其中，“v-text”是将元素当成纯文本输出，“v-html”会将元素当成HTML标签解析后输出。
注意：
文本插值会出现闪烁的问题，使用“v-cloak”可以解决；v-text会覆盖元素中原本的内容，但是插值表达式替换自己的这个占位符，不会把整个元素的内容清空。
二、属性绑定
DOM节点的属性基本都可以用指令v-bind进行绑定（v-bind可以省略不写，写一个":"）。这里以class属性举例：
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
<body>
<div id="app">
<!-- 第一种使用方式 字符串 -->
<h1 :class="classObjStr">H1111111111111111111111</h1>
<!-- 第一种使用方式 对象 -->
<h2 :class="classObj">H2222222222222222222222</h2>
<!-- 在数组中使用三元表达式 -->
<h3 :class="classArr">H33333333333333333333333</h3>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObjStr: 'red thin italic active',
classObj: { red: true, thin: true, italic: true, active: true },
classArr: ['red', 'thin', 'italic', 'active']
},
methods: {}
});
</script>
</body>
拼接字符串、数组、对象，三种方式绑定类名的效果是一样的。
三、事件绑定
1.v-on指令
Vue可以通过“v-on”指令将事件代码绑定到DOM节点上；"v-on"可以简写为“@”。
<body>
<div id="app">
<input type="button" value="按钮" @click="show">
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert('Hello')
}
}
})
</script>
</body>
2.事件修饰符
stop
当事件触发时，阻止事件冒泡。
prevent
当事件触发时，阻止默认行为，例如阻止a标签的跳转。
capture
当事件触发时，阻止事件捕获，自己先处理，然后交由内部元素处理。
self
只有点击当前元素的时候，才会触发事件处理函数。
once
只触发一次事件处理函数。
四、双向绑定
1.v-model指令
可以使用v-model为元素（input、textarea、select、checkbox）创建数据绑定。
<body>
<div id="app">
<h4>{{ msg }}</h4>
<!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定 -->
<!-- <input type="text" v-bind:value="msg" style="width:100%;"> -->
<!-- 使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 -->
<!-- 注意： v-model 只能运用在 表单元素中 -->
<!-- input(radio, text, address, email....) select checkbox textarea -->
<input type="text" style="width:100%;" v-model="msg">
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
},
methods: {
}
});
</script>
</body>
2.v-model指令与修饰符
.lazy
将用户输入的数据赋值于变量的时机由输入时延迟到数据改变时；例如，在input框上加了v-model.lazy，输入数据时，并不会立刻改变变量的值；当input框失去焦点，变量才发生改变。
.number
自动转换为数值类型。
.trim
自动过滤用户输入的收尾空白字符。
五、条件渲染和列表渲染
1.条件渲染v-if和v-show
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
/* toggle() {
this.flag = !this.flag
} */
}
});
</script>
</body>
v-if
每次都会重新删除或创建元素，有较高的性能切换消耗；如果元素涉及频繁的切换，请使用v-show.
v-show
每次不会重新进行元素的删除和创建，只是切换元素的display:none 样式。
2.列表渲染v-for
<body>
<div id="app">
<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]
},
methods: {}
});
</script>
</body>
注意：
使用v-for时，最好给每个迭代元素提供一个不重复的key值；否则，当不使用key值且数组内容发生变化的时候，Vue会为了数组成员就近复用已存在的DOM节点；例如，如果不使用key值，当数组的顺序发生变化，DOM节点不会发生变化，数组只会找当前最近的DOM节点，而不是原本的DOM节点。
常用数组方法拓展
push
将一个或多个元素添加到数组末尾并返回新数组的长度。
pop
从数组中删除并返回最后一个元素。
shift
从数组中删除并返回第一个元素。
unshift
将一个或多个元素添加到数组的开头并返回新数组的长度。
reverse
将数组中的元素位置颠倒，返回颠倒后的数组
splice
在数组中，删除或添加元素
sort
对数组进行排序。
网友评论