注:此文档笔记来自于imooc-vue2.5入门 课程(https://www.imooc.com/learn/980)
创建第一个Vue实例
<!DOCTYPE html>
<html>
<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">{{msg}}
<div>{{msg}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world",
}
})
</script>
</body>
</html>
引入Vue.js的脚本标签要放在head中,可以防止出现抖屏的情况,body中的<div id="root"></div>
称为挂载点,div标签中的内容称为模板。{{msg}}
称为插值表达式。
new Vue({
el:"#root",
data:{
msg:"hello world",
}
})
称为一个实例,其中el
是将此实例绑定到所属的id
元素上,之后此dom元素就被实例化的Vue接管。
数据、事件与方法
<!DOCTYPE html>
<html>
<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-text="msg"></div>
<div v-text="content"></div>
<div v-html="content"></div>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world",
content:"<h1>hello world</h1>",
}
})
</script>
</body>
</html>
v-text
会转义字符串,v-html
不会转义,此处的转义是指会不会翻译成HTML标签
点击事件
点击页面上显示的hello。变成world
<!DOCTYPE html>
<html>
<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">{{msg}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello",
},
methods:{
handleClick: function(){
this.msg="world"
}
}
})
</script>
</body>
</html>
v-on:click
可简写为@click
属性绑定和双向数据绑定
属性绑定
<!DOCTYPE html>
<html>
<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">{{msg}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello",
title:"this is a title",
}
})
</script>
</body>
</html>
v-bind:title="title"
属性绑定,后边的title
不在是简单的字符串,而是一个js表达式,可以写成v-bind:title="'123'+title"
,v-bind:title="title"
可简写成:title="title"
双向数据绑定
<!DOCTYPE html>
<html>
<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="msg"/>
<div >{{msg}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello",
}
})
</script>
</body>
</html>
注意看其中<input v-model="msg"/>
标签,其中的v-model
可实现数据的双向绑定,即通过输入框可以改变msg
的值
Vue中的计算属性
<!DOCTYPE html>
<html>
<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="num1" type="number"/>
<div>+</div>
<input v-model="num2" type="number"/>
<div>{{result}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
num1:0,
num2:0,
},
methods:{
handleClick: function(){
this.msg="world"
}
},
computed:{
result: function(){
return Number(this.num1)+Number(this.num2)
}
}
})
</script>
</body>
</html>
v-if、v-show
点击按钮控制内容的显示和隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if、v-show</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<button @click="handleClick">on/off</button>
<div v-if="show">{{msg}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world",
show:true
},
methods:{
handleClick: function()
{
this.show=!this.show;
}
}
})
</script>
</body>
</html>
标签div
的属性v-if
为真时显示,为假时隐藏,监听按钮动作,点击按钮显示/隐藏内容
也可以使用v-show
来替换v-if
,页面效果相同,都是点击按钮显示隐藏内容,但是v-if
为false时会将此dom元素从源码中删除,v-show
会改变dom元素的display
属性,此不同之处可通过查看网页源代码得出
v-for
遍历列表循环展示列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div>{{msg}}</div>
<ul>
<li v-for="(item,index) of list">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world",
list:[1,2,3]
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div>{{msg}}</div>
<ul>
<li v-for="(item,index) of list">{{item}}/{{index}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world",
list:[1,2,3]
}
})
</script>
</body>
</html>