正文
四、vue语法补充
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.自定义过滤器
格式：
{{ msg | filters}}
2.computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--过滤器-->
<h1>{{ msg | capitalize }}</h1> <!--computed的getter和setter-->
{{site}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {//数据项
msg: "hello",
name: "百度",
url: "https://www.baidu.com/"
},
filters: {//对输入的字符串第一个字母转为大写
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
},
computed: {//computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
});
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script></body>
</html>
3.Vue.js 事件处理器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--过滤器-->
<h1>{{ msg | capitalize }}</h1> <!--computed的getter和setter-->
{{site}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {//数据项
msg: "hello",
name: "百度",
url: "https://www.baidu.com/"
},
filters: {//对输入的字符串第一个字母转为大写
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
},
computed: {//computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
});
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script></body>
</html>
http://www.runoob.com/vue2/vue-events.html
事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop.prevent.capture.self.once
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
4.Vue.js 表单
http://www.runoob.com/vue2/vue-forms.html
修饰符
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
<input v-model.number="age" type="number">
这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">
5.组件补充1.插槽
详情：插槽
和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样：
<alert-box>
Something bad happened.
</alert-box>
Vue 自定义的 <slot> 元素，让Something bad happened.正常显示
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
2.解析 DOM 模板时的注意事项
有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
使用is特性
<table>
<blog-post-row></blog-post-row>
</table>
<table>
<tr is="blog-post-row"></tr>
</table>
需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：
- 字符串 (例如：
template: '...') - 单文件组件 (
.vue) <script type="text/x-template">
