vue核心就是组件,一个组件可以分为数据和视图,数据绑定,数据更新时,视图也会自动更新。在视图中又可以绑定一些事件,它们触发methods里指定的方法,从而可以改变数据、更新视图。
示例1,用2个大括号直接取vue实例中的message值:
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
示例2,用指令获取绑定值:
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
vue对象
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:
对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如,对于:
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
你可以添加一个新的 age 属性到嵌套的 userProfile 对象:
Vue.set(vm.userProfile, 'age', 27)
你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:
vm.$set(vm.userProfile, 'age', 27)
有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或 _.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:
Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你应该这样做:
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
vue常用属性:
var vm = new Vue({
el:'dom id',
data:{key:value},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
methods: {
//方法描述
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
},
})
vue常用指令:
v-if:
<p v-if="seen">现在你看到我了</p>
v-for:
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
new Vue({el:'#range'})
v-bind:
<a v-bind:href="url">...</a>可缩写为<a :href="url">...</a>
v-on:可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
<a v-on:click="doSomething">...</a>可缩写为<a @click="doSomething">...</a>
v-model:表单输入绑定,你可以用 v-model 指令在表单 <input>
、<textarea>
及 <select>
元素上创建双向数据绑定。
<input v-model="message" placeholder="edit me">
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<input type="checkbox" id="checkbox" v-model="checked">
<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>
new Vue({
el: '...',
data: {
selected: ''
}
})
template标签使用
template标签不会显示在浏览器中,例如
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
组件:
定义一个叫todo-item组件:
Vue.component('todo-item', {
props: ['todo'],
template: '<li>lili-{{ todo.text }}</li>'
})
使用组件:
<div id="app-8">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量,即其内容可以是动态的。
我们也需要为每个组件提供一个“key”,稍后再
作详细解释。组件可以复用,可以有多个todo-item
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
绑定数据:
var app8 = new Vue({
el: '#app-8',
data: {
groceryList: [
{ id: 0, text: '蔬菜0' },
{ id: 1, text: '奶酪1' },
{ id: 2, text: '随便其它什么人吃的东西2' }
]
}
})
数组更新检测
1、修改自身:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
示例:
example1.items.push({ message: 'Baz' })
2、返回修改后的值
filter(), concat() 和 slice()
示例:
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength