vue.js - 入门学习教程
2018-05-06 本文已影响17人
红薯爱帅
1. 概述
相比另外两个JaveScript Frameworks（Angular.js by Google、React.js by Facebook），Vue.js高性能、更灵活、可维护性强。最关键的，Vue.js是国人设计开发的。
本文参考慕课的vue学习视频，整理总结完成。
- javaScript框架(库)汇总
https://blog.csdn.net/Acmen_007/article/details/53020789
2. 入门学习
概念介绍
- 实例 - new Vue({})
- 挂载点 - Vue示例的el值对应的dom节点，例如div
- 模板 - 可以在dom节点中写，也可以在Vue实例中填写
备注：一般将模板写入到挂载点内部，便于代码走读
<body>
<div id="root"></div>
<script>
new Vue({
el: '#root',
template: '<h1>{{msg}}</h1>',
data: {
msg: 'hello world'
}
})
</script>
</body>
数据展示和方法绑定
- {{msg}}, 插值表达式，显示msg数据
- v-text='msg', 显示msg值，纯文本信息
- v-html='msg', 显示msg值，支持html标签
- v-on:click='handleClick', 绑定事件，对应vue实例的methods.handleClick
备注：v-on可以缩写为@
<body>
<div id="root">
<h1 v-on:click='handleClick'>{{content}}</h1>
</div>
<script>
new Vue({
el: '#root',
data: {
content: 'hello'
},
methods: {
handleClick: function() {
this.content='world'
}
}
})
</script>
</body>
dom属性绑定
- v-bind:title='"aa " + title', title是dom节点属性，此处绑定到vue实例的title变量，注意，这里可以写js代码
备注：v-bind可以缩写为:
<body>
<div id="root">
<div v-bind:title='"aa " + title'>
{{content}}
</div>
</div>
<script>
new Vue({
el: '#root',
data: {
content: 'hello world',
title: 'this is hello world'
}
})
</script>
</body>
双向数据绑定
- v-model='content', 实现挂载点与vue实例的双向绑定，绑定的变量是content
<body>
<div id="root">
<div :title='"aa " + title'>
{{content}}
</div>
<input v-model='content'/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
content: 'hello world',
title: 'this is hello world'
}
})
</script>
</body>
计算属性
- computed，通过一个方法的return值，给某一个变量赋值。性能高，只有依赖的属性发生变化，才重新计算，并展示。如果依赖属性未变化，则不重新计算，用最近一次缓存结果。
侦听器
- watch，监听某一个变量的数值变化，如果变化则可以修改其他变量，或者执行一些方法
<body>
<div id="root">
姓：<input v-model='firstName'/>
名：<input v-model='lastName'/>
<div>姓名：{{fullName}}</div>
<div>改变次数：{{count}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: 'hello',
lastName: 'world',
count: 0
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
fullName: function() {
this.count ++
}
}
})
</script>
</body>
简单逻辑处理
- v-if，控制dom节点存在与否。当对应的变量值是true，则显示该dom节点，否则，删除该dom节点
- v-show，控制dom节点显示与否。当对应的变量值是true，则显示该dom节点，否则，只是隐藏，'display: none;'
- v-for, 循环展示list内容，可以通过v-for='item of list'实现。指定key值会提高遍历效率，key不能重复。
备注：频繁隐藏或展示，v-show效率更高
<body>
<div id="root">
<div v-show='show'>hello world</div>
<button @click='handleClick'>toggle</button>
<ul>
<li v-for='item of list'>{{item}}</li>
<!-- <li v-for='(item, index) of list' :key='index'>{{item}}</li> -->
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
show: true,
list: [3, 2, 3]
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
})
</script>
</body>
TodoList Demo
<body>
<div id="root">
<input v-model='todo'>
<button @click='add'>提交</button>
<ul>
<li v-for='item of list'>{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
todo: '',
list: []
},
methods: {
add: function() {
this.list.push(this.todo)
this.todo = ''
}
}
})
</script>
</body>
TodoList组件拆分
- 全局组件，Vue.component，全局范围内定义一个组件对象，可以设置参数列表props（在dom中绑定属性，从dom中接收数据）
- 局部组件，定义一个组件变量，然后在vue实例中声明对他的使用
<body>
<div id="root">
<input v-model='todo'>
<button @click='add'>提交</button>
<ul>
<!-- <li v-for='item of list'>{{item}}</li> -->
<todo-item
v-for='(item, index) of list'
:key='index'
:content='item'
>
</todo-item>
</ul>
</div>
<script>
// 全局组件
Vue.component('todo-item', {
props: ['content'],
template: '<li>{{content}}</li>'
})
// 局部组件
// var TodoItem = {
// template: '<li>{{content}}</li>'
// }
new Vue({
el: '#root',
// components: {
// 'todo-item': TodoItem
// },
data: {
todo: '',
list: []
},
methods: {
add: function() {
this.list.push(this.todo)
this.todo = ''
}
}
})
</script>
</body>
组件与实例的关系
- 任何一个vue项目是由一个个vue实例构成
- 每一个component都是一个vue实例
为了验证component是一个vue实例，我们可以在component里面写vue实例的属性，例如template、methods、data、computed、watch等
<body>
<div id="root">
<input v-model='todo'>
<button @click='add'>提交</button>
<ul>
<!-- <li v-for='item of list'>{{item}}</li> -->
<todo-item
v-for='(item, index) of list'
:key='index'
:content='item'
>
</todo-item>
</ul>
</div>
<script>
// 全局组件
Vue.component('todo-item', {
props: ['content'],
template: '<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function() {
alert(this.content+' clicked')
}
}
})
// 局部组件
// var TodoItem = {
// template: '<li>{{content}}</li>'
// }
new Vue({
el: '#root',
// components: {
// 'todo-item': TodoItem
// },
data: {
todo: '',
list: []
},
methods: {
add: function() {
this.list.push(this.todo)
this.todo = ''
}
}
})
</script>
</body>
实现TodoList的删除功能
父组件与子组件的通信，是vue的重点和难点，需要深入理解下
- 父->子，父组件通过变量赋值到template中，再通过template的绑定属性，将数值传入到子组件中
- 子->父，采用发布订阅模式，父组件提前绑定一个方法，当子组件emit一个事件时，父组件可以获取该事件，执行相应的method
<body>
<div id="root">
<input v-model='todo'>
<button @click='handleSummit'>提交</button>
<ul>
<!-- <li v-for='item of list'>{{item}}</li> -->
<todo-item
v-for='(item, index) of list'
:key='index'
:content='item'
:index='index'
@delete='handleDelete'
>
</todo-item>
</ul>
</div>
<script>
// 全局组件
Vue.component('todo-item', {
props: ['content', 'index'],
template: '<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function() {
// alert(this.content+' clicked, will be deleted')
this.$emit('delete', this.index)
}
}
})
// 局部组件
// var TodoItem = {
// template: '<li>{{content}}</li>'
// }
new Vue({
el: '#root',
// components: {
// 'todo-item': TodoItem
// },
data: {
todo: '',
list: []
},
methods: {
handleSummit: function() {
this.list.push(this.todo)
this.todo = ''
},
handleDelete: function(index) {
this.list.splice(index, 1)
}
}
})
</script>
</body>
3. 总结
vue.js完美地将数据model的变化自动地反应到了view上，给coder提供很强的web前端开发框架。vue-cli脚手架提出vue生产项目的开发套路，接下来，我会继续总结介绍。
