vue 框架基本语法
声明式渲染
- 采用模板语法声明式的将数据渲染进DOM
<div id="app">
{{ message }}
</div>
var app = new Vue({
el:'#app',
data:{
message: 'hello Vue!'
}
})
绑定元素特性
<div id="app-2">
<span v-bind:title="message">
鼠标悬停查看动态绑定提示
</span>
</div>
var app2 = new Vue({
el:'#app-2',
data:{
message:'页面加载于'+ new Date().toLocalString()
}
})
v-bind 指令：将这个元素节点的title特性和vue 实例的message保持一致
v-if 控制显示
<div id="app-3">
<p v-if="seen">哈哈哈</p>
</div>
var app3 = new Vue({
el:'#app-3',
data:{
seen: true
}
})
v-for渲染项目列表
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el:'#app-4',
data: {
todos:[
{text:'哈哈'}，
{text: '呵呵'}，
{text: 'haha'}
]
}
})
app4.todos.push({text: '新项目'})添加
</script>
处理用户输入
- v-on 指令添加一个事件监听器
<div id="app-5">
<p> {{ message }} </p>
<button v-on:click="reverseMess">逆转消息</button>
</div>
<script>
var app5=new Vue({
el:'#app-5',
data:{
message: 'hello vuejs'
},
methods:{
reverseMess: function (){
this.message= this.message.split('').reverse().join('')
}
}
})
</script>
v-model 实现表单输入和应用状态的双向绑定
<div id="app-6">
<p> {{ message }} </p>
<input v-model="message">
</p>
var app6 = new Vue({
el:'#app-6',
data:{
message: 'Hello Vue!'
}
})
vue 组件
<script>
Vue.component('todo-item',{
template: '<li>这是个待办项</li>'
})
</script>
<ol>
<!-- 创建组件实例 -->
<todo-item></todo-item>
</ol>
要添加一个prop
<script>
Vue.component('todo-item',{
props:['todo'],
template: '<li>{{ todo.text }}'
})
var app7 = new Vue({
el:'#app-7',
data:{
groceryList: [
{id: 0,text: 'aa'},
{id: 1,text: 'bb'},
{id: 2,text: 'cc'}
]
}
})
</script>
<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
数据与方法
data 只有实例被创建时data中存在的属性才是响应式的
<script>
var data = {a : 1}
var vm = new Vue({
data:data
})
vm.a === data.a
</script>
缩写
v-bind
- <a v-bind:href="url">...</a>
- <a :href="url">...</a>
v-on
- <a v-on:click="dosomething">...</a>
- <a @click="dosmething">...</a>
实例属性与方法
<script>
var data = { a: 1 }
var vm = new Vue({
el:'#example',
data: data
})
vm.$data === data
vm.$el === document.getElementById('example')
vm.$watch('a', function (newValue, oldValue){
<!--a 的值改变后调用此回调 -->
})
</script>
实例生命周期钩子
- created updated destroyed mounted
<script>
new Vue({
data:{
a:1
},
created: function(){
console.log(this.a)
}
})
<!-- 实例被创建之后执行 -->
</script>
- v-once 一次性插值，当数据改变时插值处内容不会更新
计算属性缓存 vs 方法
- 计算属性是基于他们的依赖进行缓存的
- 只要message未发生改变 多次访问reversedMessage 计算属性会立即返回之前的结果，不必再次执行函数
<div id="example">
<p>Original message: "{{ message }}" </p>
<p>Computed reversed message: "{{ reverseMessage}}"</p>
</div>
<script>
var vm = new Vue({
el:'#example',
data: {
message: 'hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
计算属性 监听属性
<div id="demo">{{ fullName }} </div>
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'bar',
fullName: 'Foo Bar'
},
//坚听属性
watch: {
firstName: function (val){
this.fullName = val + '' + this.lastName
}，
lastName: function (val) {
this.fullName = this.firstName + '' +val
}
}
})
//计算属性
var vm =new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function (){
return this.firstName + '' + this.lastName
}
}
})
</script>
计算属性默认只有getter
<script>
computed: {
fullName: {
get: function (){
return this.firstName + '' + this.lastName
},
set: function (newValue){
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length-1]
}
}
}
</script>
- 侦听器／自定义侦听器 vue watch 选项 提供通用的方法 ，需要在数据变化时执行异步或开销较大得操作时
列表渲染
<script>
<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'}
}
}
})
</script>
v-for 中拥有对父作用域属性的完全访问权限
还支持一个可选的第二个参数为当前项的索引
<script>
<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'}
]
}
})
</script>
也可以用 of 代替分隔符in
也可以用v-for通过一个对象的属性来迭代
提供第二个的参数为键名
<div v-for= "(value,key) in object ">
{{ key }}: {{ value }}
</div>
<!-- 第三个参数作为索引 -->
<div v-for="(value,key,index) in object">
{{ index }}.{{ key }}.{{ value }}
</div>
<!-- 尽量在v-for 提供一个key
工作方式类似于属性 要用v-bind 绑定-->
<div v-for="item in items=" :key="item.id">
</div>
冒泡机制
<script>
<div id="gpa" v-on:click = "dodo">
<!--div id="gpa" v-on:click.stop = "dodo" 阻止冒泡-->
<!-- .prevent 不再重载当前页面-->
<div id="pa" v-on:click="doThat">
<a v-on:click="doThis"href="http://www.baidu.com">百度</a>
<!-- 点击 百度不冒泡 执行 doThis 函数-->
</div>
<!-- 点击gpa 发生冒泡 执行doThat dodo 函数 -->
</div>
</script>
Vue 的自定义指令
- Vue.directive(id,definition)
- vue 自定义指令常见使用例子
<script>
Vue.directive('my-directive',{
bind: function(){
//绑定准备工作
//添加监听事件 或只需要执行一次的复杂操作
};
update: function(){
//根据获得的新值执行对应的更新
//对于初始值也会调用一次
};
unbind: function(){
//清理操作
//比如移除事件监听器
}
})
</script>
页面加载时input 输入框自动聚焦
<div id="app">
<input v-focus>
</div>
<script>
Vue.directive('focus',{
inserted: function(el){
el.focus()
}
});
var app=new Vue({
el:'#app'
});
</script>
