1.插值---数据绑定
| 输出 |
|
template |
data |
| 文本 |
{{}} |
<p>{{ message }}</p> |
message: 'AAA' |
| 支持表达式 |
{{}} |
{{ message.split('').reverse().join('') }} |
message: 'welcome' |
| html代码 |
v-html |
<div v-html="message"></div> |
message: '<h1>AAA</h1>' |
| html属性 |
v-bind |
<div v-bind:class="{'class1': use}"></div> |
use: false |
2.指令---v- 前缀的特殊属性
属性v-bind，事件监听v-on，条件语句v-if，循环语句v-for
| 输出 |
指令 |
template |
data/methods |
| 响应 HTML 属性 |
v-bind |
<a v-bind:href="url">aaa</a> |
data: {url:'http://xxx.com'} |
| 动态绑定 props 的值到父组件的数据 |
v-bind |
<child v-bind:message="parentMsg"></child> |
Vue.component('child', { props: ['message1'],template: '<span>{{ message1 }}</span>'}) |
| * 监听 DOM 事件 |
v-on |
<a v-on:click="func"> |
methods: {func: function () {this.seen = false} |
* 修饰符：调用 event.preventDefault()
|
v-on |
<form v-on:submit.prevent="onSubmit"></form> |
|
| 条件判断是否插入 p 元素 |
v-if |
<p v-if="seen">看到</p> |
data: {seen: true} |
| 判断随机数是否大于0.5 |
v-else |
<div v-if="Math.random()>0.5">Sorry</div><div v-else>Not sorry</div> |
|
| 链式的多次使用 |
v-else-if |
<div v-if="type === 'A'">A</div><div v-else-if="type==='B'">B</div><div v-else>Not A/B</div> |
|
| 展示元素 |
v-show |
<p v-show="seen">看到</p> |
data: {seen: true} |
| * 迭代数组 |
v-for |
<li v-for="site in sites">{{ site.name }}</li> |
data: {sites: [{ name: 'AAA' },{ name: 'BBB' }]} |
| * 迭代对象 |
v-for |
<li v-for="(value, key, index) in object">{{index}}.{{key}}:{{value}}</li> |
data: {object: {name: 'zx',age:'28',}} |
| * 迭代整数 |
v-for |
<li v-for="n in 10">{{n}}</li> |
|
-
v-on:缩写@
-
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，
.prevent修饰符告诉v-on指令对于触发的事件调用 event.preventDefault()
事件处理器 v-on
|
template |
|
|
<button v-on:click="counter += 1">增加 1</button> |
|
| 定义的方法 |
<button v-on:click="greet">Greet</button> |
methods: {greet: function (event) {} |
| 内联 js语句 |
<button v-on:click="say('hi')">Say hi</button> |
methods: {say: function (msg) {} |
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
- 按键修饰符: Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
//记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：
.enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space
.up .down .left .right .ctrl .alt .shift .meta
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
3.用户输入---表单双向数据绑定v-model
v-model: 在 input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
| 输出 |
template |
data |
| input |
{{ message }}<input v-model="message"> |
message: 'welcome!' |
| 单个复选框 |
<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label> |
checked : false |
| 多个复选框 |
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"><label for="runoob">Runoob</label>... |
checkedNames: [] |
| 单选按钮 |
<input type="radio" id="runoob" value="Runoob" v-model="picked"><label for="runoob">Runoob</label> |
picked : 'Runoob' |
| select 列表 |
<select v-model="selected" name="fruit"><option value="">aa</option></select> |
|
| 修饰符 |
template |
|
| .lazy |
<input v-model.lazy="msg" > |
在 change 事件中同步 |
| .number |
<input v-model.number="age" type="number"> |
输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值） |
| .trim |
<input v-model.trim="msg"> |
过滤用户输入的首尾空格 |
过滤器
| 输出 |
指令 |
template |
methods |
| 第一个字母转为大写 |
{{}} |
{{ message|capitalize }} |
capitalize: function (value) { return value.charAt(0).toUpperCase() + value.slice(1) } |
|
v-bind |
<div v-bind:id="rawId | formatId"></div> |
|
样式绑定
表达式的结果类型除了字符串之外，还可以是对象或数组。
| 输出 |
template |
结果 |
| 设置一个对象，从而动态的切换 class: |
<div v-bind:class="{ active: isActive }"></div> |
class="active" |
| 对象中传入更多属性用来动态切换多个 class |
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError}"></div> |
class="static active text-danger" |
| 数组语法 |
<div v-bind:class="[activeClass, errorClass]"></div> |
class="active text-danger" |
| 直接绑定数据里的一个对象
|
<div v-bind:class="classObject"></div> |
代码 |
| 三元表达式来切换列表中的 class |
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div> |
|
| *内联样式 |
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> |
<div style="color: green; font-size: 30px;"> |
| *样式对象 |
<div v-bind:style="styleObject"> |
|
| *数组将多个样式对象 |
<div v-bind:style="[baseStyles, overridingStyles]"> |
|
- text-danger 类背景颜色覆盖了 active 类的背景色
- 当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
new Vue({
el: '#app',
data: {
isActive: true,
error: {
value: true,
type: 'fatal'
}
},
computed: {
classObject: function () {
return {
base: true,
active: this.isActive && !this.error.value,
'text-danger': this.error.value && this.error.type === 'fatal',
}
}
}
})
计算属性
处理一些复杂逻辑，都写在模板里不好理解
| 输出 |
指令 |
template |
computed |
| 计算后反转字符串 |
|
<p>{{ reversedMsg }}</p> |
reversedMsg: function () { return this.message.split('').reverse().join('')} |
-
this 指向 vm 实例
-
computed vs methods：可以使用 methods 来替代 computed，效果上两个都是一样的，但是
computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用methods属性。
-
computed setter:
computed属性默认只有getter，不过在需要时你也可以提供一个setter
var vm = new Vue({
el: '#app',
data: {
name: 'zx',
age: '28'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.age
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.age 也会被对应更新
vm.site = 'zxa 18';
document.write('name: ' + vm.name);//zxa
document.write('<br>');
document.write('url: ' + vm.url);//18
监听属性
通过 watch 来响应数据的变化。
<div id = "computed_props">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>
网友评论