Vue基础语法
文章目录
- 1 下载vue.js
- 2 挂载点、模板和实例
- 3 数据、事件和方法
- 4 属性绑定和双向数据绑定
- 5 计算属性和侦听器
- 6 v-if、v-show和v-for指令
1 下载vue.js
Vue.js官网：https://v2.cn.vuejs.org/v2/guide/，将下载好的vue.js文件放入Vue文件夹（自定义名字）下即可。
2 挂载点、模板和实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>挂载点、模板和实例</title>
<script src="./vue.js"></script>
</head>
<body>
<!--挂载点、模板、实例之间的关系-->
<div id="root"> <!--挂载点-->
<!--模板就是挂载点内的内容-->
</div>
<script>
/*实例*/
new Vue({
el: "#root",
template: '<h1>{{msg}}</h1>',
data:{
msg: "world"
}
})
</script>
</body>
</html>
3 数据、事件和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据、事件和方法</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<h1>{{number}}</h1><!--number插入到h1中：插值表达式-->
<h1 v-text="content"></h1><!--会转义：<h1>hello</h1>-->
<h1 v-html="content"></h1><!--不会转义：hello-->
<div v-on:click="handleClick">{{content}}</div><!--点击事件-->
<div @click="handleClick">{{content}}</div><!--v-on:简写形式@-->
</div>
<script>
new Vue({
el: "#root",
template: '',
data:{
msg: "world",
number: 123,
content: "<h1>hello</h1>"
},
methods:{
handleClick:function(){
this.content = "world"
}
}
})
</script>
</body>
</html>
4 属性绑定和双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性绑定和双向数据绑定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-bind:title="'del li' + title">hello world</div><!--属性和title数据项绑定。模板指令的等号后面跟的内容就是js表达式-->
<div :title="'del li' + title">hello world</div><!--v-bind缩写:-->
<input :value="content"/><!--单项绑定-->
<input v-model="content"/><!--双向数据绑定，框内内容改变，content也变化-->
<div>{{content}}</div>
</div>
<script>
new Vue({
el: "#root",
data:{
title:"this is hello world",
content: "this is content"
}
})
</script>
</body>
</html>
5 计算属性和侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性和侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{firstName}}{{lastName}}</div>
<div>{{fullName}}</div><!--fullName是姓+名-->
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data:{
firstName: '',
lastName: '',
count: 0
},
/*计算属性，如果firstName和lastName没有变化，可以使用上一次的缓存值*/
computed:{
fullName: function(){
return this.firstName + ' ' + this.lastName
}
},
/*侦听器，监听某个数据的变化，一点发生变化，就会在监听器中做业务逻辑*/
watch:{
/*firstName:function(){
this.count ++
},
lastName:function(){
this.count ++
},*/
fullName: function(){
this.count ++
}
}
})
</script>
</body>
</html>
6 v-if、v-show和v-for指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if、v-show和v-for指令</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="show">hello world</div><!--从DOM中删除标签（如果只需要一次操作，该方法更好）-->
<div v-show="show">hello world</div><!--加了个属性值display:none;隐藏标签（更好的选择，性能更高）-->
<button @click="handleClick">toggle</button>
<ul>
<li v-for="item of list" :key="item">{{item}}</li><!--数据做循环展示（li标签）。:key提升每一项渲染的性能，要求每一次循环key值不相同-->
<li v-for="(item, index) of list" :key="index">{{item}}</li><!--如果index改变（排序）就存在问题了-->
</ul>
</div>
<script>
new Vue({
el: "#root",
data:{
show: true,
list: [1, 2, 3]
},
methods:{
handleClick: function(){
this.show = !this.show;
}
}
})
</script>
</body>
</html>