目录
基本概念
目前有个功能,要使用到前端,本来是用Bootstrap的,但领导要求要用vue框架来做,本来还有的情绪,但在继续学习spring boot开发,使用前端的时候,发现大家都是使用vue,而且一般后端发送json数据,vue来解析,这的确是非常方便,比Bootstrap好了很多倍。今天特意花一天时间来初步学习下vue这个创建。
div与vue实例绑定
程序运行截图如下:
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el: "#root",
data: {
msg: "How old are you"
}
})
</script>
</body>
</html>
这里是创建vue实例与html上的元素进行绑定
el:让vue的实例接管哪一个element,上面的代码是接管root;
data:为vue实例里面的数据。
挂载点,模板,实例之间的关系
如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<head>
<body>
<div id="root"></div>
<script>
new Vue({
el: "#root",
template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',
data: {
msg: "How old are you",
number: 10086
}
})
</script>
</body>
</html>
运行截图如下:
挂载点:就是html中的div的那个root就为挂载点;
实例:script中new Vue就是一个实例;
模板:挂载点内部的内容都称之为模板,如上面的template。
挂载点用于显示数据,实例用于存储数据和其他绑定,模板用于提供数据。
插入页面的其他写法
插值法:{{}}
代码就是上面的那些!
v-text显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<head>
<body>
<div id="root" v-text="msg"></div>
<script>
new Vue({
el: "#root",
//template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',
data: {
msg: "How old are you",
number: 10086
}
})
</script>
</body>
</html>
运行截图如下:
v-html显示
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<head>
<body>
<div id="root" v-html="content"></div>
<script>
new Vue({
el: "#root",
//template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',
data: {
msg: "How old are you",
content: "<h1>How are you<h1>"
number: 10086
}
})
</script>
</body>
</html>
运行截图如下:
这里v-html主要用与当有<h1>这种修饰的。
模板指令
如果有这样的一种功能,点击源码中的<h1>标签内容,然后变成How old are you
使用v-on来绑定点击事件:
点击后:
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<div v-on:click="handleClick"><h1>{{content}}</h1></div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "How are you"
},
methods: {
handleClick: function(){
this.content = "How old are you"
}
}
})
</script>
</body>
</html>
这里可以简写把v-on简写成@
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<div @click="handleClick"><h1>{{content}}</h1></div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "How are you"
},
methods: {
handleClick: function(){
this.content = "How old are you"
}
}
})
</script>
</body>
</html>
Vue中的属性绑定和双向数据绑定
html中有个title,当鼠标移动上去会有tip显示:
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<div title="hehehehehehehda"><h1>呵呵</h1></div>
</div>
<script>
new Vue({
el: "#root"
})
</script>
</body>
</html>
v-bind指XXX属性和什么数据项绑定
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<div v-bind:title="title"><h1>呵呵</h1></div>
</div>
<script>
new Vue({
el: "#root",
data: {
title: "呵呵呵额和"
}
})
</script>
</body>
</html>
用一个input框,输入数据后修改h1标签的内容 这样进行双向数据绑定。
其中v-bind:可以简写为 : 这个符号
使用v-model可以实现双向绑定
下面代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<input v-model="content" />
<div><h1>{{content}}</h1></div>
</div>
<script>
new Vue({
el: "#root",
data: {
title: "呵呵呵",
content: "mmp"
}
})
</script>
</body>
</html>
运行截图如下:
Vue中的计算属性和侦听器
先构造如下页面,输入姓名后,会在上面显示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div><h1>{{firstName}}{{lastName}}</h1></div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: ''
}
})
</script>
</body>
</html>
运行截图如下:
还可以通过这种方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div><h1>{{fullName}}</h1></div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: ''
},
computed: {
fullName: function(){
return this.firstName + this.lastName
}
}
})
</script>
</body>
</html>
下面说下侦听器,当修改了input后,Vue中的count属性会加1
使用watch关键字!
运行截图如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div><h1>{{fullName}}</h1></div>
<div><h1>{{count}}</h1></div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName + this.lastName
}
},
watch:{
fullName: function(){
this.count ++
}
}
})
</script>
</body>
</html>
v-if,v-show,v-for指令
如果有下面这个需求,点击按钮text就影藏,再点击就显示!
如下源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<div v-if="show"><h1>Hello world</h1></div>
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function(){
this.show =! this.show;
}
}
})
</script>
</body>
</html>
运行截图如下:
点击后:
同样,使用这种方式也是可以的,至少看起来是一样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<div v-show="show"><h1>Hello world</h1></div>
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function(){
this.show =! this.show;
}
}
})
</script>
</body>
</html>
使用v-show,实际上并没有从dom树上删除,而是加了一个display: none的属性值。
从性能上面来说,v-show的确要高些,因为他不用被销毁。
下面来看看v-for,做一个循环展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
list: [1, 2, 3]
}
})
</script>
</body>
</html>
运行截图如下:
这里有个小技巧,输入:key可以提升每一个item的渲染性能,并且添加index会得到下标:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<ul>
<li v-for="(item, index) of list" :key="item">{{item}} {{index}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
list: ['球球', '腿腿', '米线']
}
})
</script>
</body>
</html>
运行截图如下:
TodoList功能开发
要做一个功能,一个输入框一个提交,点击提交,数据就会在列表中;
运行截图如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<ul>
<li v-for="(item, index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
inputValue: "Hello",
list: []
},
methods:{
handleSubmit: function(){
this.list.push(this.inputValue)
this.inputValue = ""
}
}
})
</script>
</body>
</html>
TodoList中组建的拆分
组建:页面上的某一个部分。
通过组建,但项目比较大的时候,一般企业都应该采用的方式;
把上面的TodoList改成组建的形式:
使用Vue.component进行组建的注册,这个组建是一个全局的组建。
使用 var TodoItem = {
template: '<li>item</li>'
}
这种是局部组建,需要在vue中做一个声明
components:{
}
如下的全局组建:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
template: '<li>呵呵</li>'
})
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods:{
handleSubmit: function(){
this.list.push(this.inputValue)
this.inputValue = ""
}
}
})
</script>
</body>
</html>
运行截图如下:
局部组建:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
//Vue.component('todo-item', {
// template: '<li>呵呵</li>'
//})
var TodoItem = { template: '<li>item</li>' }
new Vue({
el: "#root",
components: {
'todo-item': TodoItem
},
data: {
inputValue: '',
list: []
},
methods:{
handleSubmit: function(){
this.list.push(this.inputValue)
this.inputValue = ""
}
}
})
</script>
</body>
</html>
接收从外部传来的content属性:
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<ul>
<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>'
})
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods:{
handleSubmit: function(){
this.list.push(this.inputValue)
this.inputValue = ""
}
}
})
</script>
</body>
</html>
注意,在Vue中每一个组建都是Vue的实例。
TodoList的删除
使用handleSubmit实现删除的功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<ul>
<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(){
//触发后发送事件
this.$emit('delete', this.index)
}
}
})
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods:{
handleSubmit: function(){
this.list.push(this.inputValue)
this.inputValue = ""
},
handleDelete: function(index){
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>
这种套路和Qt有点像,今天的基本认识就到这里了,这个笔记真的丰富啊