Vue基础知识2
计算属性
-
模板内的表达式，只用于简单的运算；对于复杂逻辑，应当使用计算属性
-
基础例子
<div id="example"> <p>Original message:"{{ message }}"</p> <p>Computed reversed message:"{{ reversedMessage}}"</p> </div> var vm = new Vue({ el: "#example", data: { message: "hello" }, computed: { // a computed getter reversedMessage: function() { //"this" 指向vm实例 return this.message.split("").reverse().join("") } } }) -
Methods
<p>Reversed message:"{{ reversedMessage()}}"</p> // in component methods: { reversedMessage: function() { return this.message.split("").reverse().join("") } }
Note计算属性与method的最终结果相同，不同的是**计算属性是基于它们的依赖进行缓存的，相比而言，只要发生渲染，method调用总会执行该函数
-
Watched属性：观察和响应Vue实例上的数据变动；通常使用computed属性代替
-
计算
settercomputed: { fullName: { //getter get: function() { return this.firstName + " " + this.lastName }, //setter set: function(newValue) { var names = newValue.split(" ") this.firstName = names[0] this.lastName = names[names.length-1] } } }
当vm.fullName = "John Doe"时，setter会被调用，vm.firstName和vm.lastName会相应更新
Class与Style绑定：操作元素的class列表和内联样式
绑定HTML Class：传给v-bind:class一个对象，以动态地切换class
<div class="static"
v-bind:class="{ active: isActive, "text-danger": hasError}"
</div>
data: {
isActive: true,
hasError:false
}
// 渲染为：
<div class="static active"></div>
-
数组语法：把一个数组传给
v-bind:class，以应用一个class列表<div v-bind:class="[activeClass,errorClass]"> data: { activeClass: "active", errorClass: "text-danger" } // 渲染为： <div class="active text-danger"></div> -
用在组件上
定制组件上的class属性会被添加根元素上，这个元素上已经存在的类不会被覆盖Vue.conponent('my-component',{ template: "<p class='foo bar'>Hi</p>" }) <my-component class="baz boo"></my-component> // 渲染为： <p class="foo bar baz boo">Hi</p>
绑定内联样式
-
对象语法：
v-bind:style,CSS属性名可以用驼峰式或短横分隔命名<div v-bind:style="{ color:activeColor, fontSize: fontSize + 'px'}"></div> // js data: { activeColor: "red", fontSize: 30 } //直接绑定样式对象 <div v-bind:style="styleObject"></div> //js data: { styleObject: { color: "red", fontSize: "13px" } } -
数组语法：将多个样式对象应用到一个元素上
<div v-bind:style="[baseStyles, overridingStyles]"> -
自动添加前缀：当
v-bind:style使用需要特定前缀的CSS属性时，Vue.js会自动侦测并添加相应的前缀
条件渲染 v-if、v-else、v-else-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-if-else="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
-
用
key管理可复用的元素，声明元素的独立性，不需要复用<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> -
v-show:根据条件展示元素，切换元素的CSS属性display
列表渲染:v-for指令根据一组数组的选项列表进行渲染
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
//js
var example1 = new Vue({
el: '#example-1',
data: {
items:[
{message: 'Foo'},
{message: 'Bar'}
]
}
})
//v-for 可接受第二参数
<ul id="example-2">
<li v-for="(item,index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo'},
{ message: 'Bar'}
]
}
})
-
对象迭代
v-for<ul id="repeat-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> // js new Vue({ el: '#repeat-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) //第二个参数为键名 <div v-for="(value, key) in object"> {{ key }} : {{ value }} </div> //第三个参数为索引 <div v-for="(value, key, index) in object"> {{ index }}.{{ key }}: {{ value }} </div> -
v-forwithv-if:处于同一节点时，v-for的优先级高于v-if<li v-for="todo in todos" v-for="!todo.isComplete"> {{ todo }} </li> -
显示过滤/排序结果
<li v-for="n in eventNumbers">{{ n }}</li> //js data: { numbers: [1,2,3,4,5] }, computed: { eventNumbers: function() { return this.number.filter(function(number) { return number % 2 === 0 }) } }
事件处理器
-
监听事件：
v-on指令监听DOM事件触发一些JavaScript代码<div id="example-1"> <button v-on:click="counter += 1">增加1</button> <p>这个按钮被点击了 {{ counter }}次</p> </div> //js var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) -
方法事件处理器：
v-on接收一个定义的方法来调用<div id="example-2"> <button v-on:click="greet">Greet</button> </div> //js var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, methods: { greet: function(event) { alert('hello' + this.name + '!') if(event) { alert(event.target.tagName) } } } }) -
内联处理器方法
<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> //js new Vue({ el: '#example-3', methods: { say: function(message) { alert(message) } } }) -
事件修饰符
// 阻止单击事件冒泡 <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.pevent></form> // 添加事件监听器时使用事件捕获模式 <div v-on:click.capture="doThis">...</div> // 只当事件在该元素本身触发时触发回调 <div v-on:click.self = "doThis">...</div> -
键值修饰符
v-on监听键盘事件//keycode为13时调用 vm.submit() <input v-on:keyup.13="submit"> //常用键提供别名 v-on可缩写@ <input @keyup.enter="submit">
表单控件绑定：v-model指令在表单控件元素上创建双向数据绑定
-
文本
<input v-model="message" placeholder="edit me"> <p>Message is:{{ message }}</p> -
多行文本
<span>Multiline message is:</span> <p style="white-space: pre-line">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> -
复选框
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> // 多个勾选框，绑定到同一数组 <input type="checkbox" id="jack" value="jack" v-model="checkedName"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="john" v-model="checkedName"> <label for="john">John</label> //js new Vue({ el:"...", data: { checkedName:[] } }) -
单选按钮
<div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked:{{ picked }}</span> </div> //js new Vue({ el:"#example-4", data: { picked: '' } }) -
选择列表
<div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> //js new Vue({ el: '...', data: { selected: '' } })
绑定value:v-model绑定的value通常是静态字符串
//当选中时，'picked'为字符串"a"
<input type="radio" v-model="picked" value="a">
// 'toggle'为'true'或'false'
<input type="checkbox" v-model="toggle">
// 当选中时，'selected'为字符串"abc"
<select v-model="selected">
<option value="abc">ABC</option>
</select>
组件：扩展HTML元素，封装可重用的代码
使用组件
-
注册
//全局组件注册 Vue.component("my-component",{ //选项 }) //使用自定义元素 <div id="example"> <my-component></my-component> </div> //创建根实例 new Vue({ el: "#example" }) //渲染为 <div id="example"> <div>A custom component!</div> </div> -
局部注册
var child = { template: "<div>A custom component!</div>" } new Vue({ // ... components: { //<my-component>将只在父模板可用 "my-component": Child } }) -
DOM模板解析说明
像<ul>,<ol>,<table>,<select>限制了能被它包裹的元素，自定义组件在这些元素中使用时会出现问题<table> <my-row>...</my-row> </table> //自定义组件被认为是无效内容 使用`is`属性解决 <table> <tr is="my-row"></tr> </table> -
data必须是函数
春天的雨，夏天的风，只为更好的自己和最爱的你！
