一、创建第一个vue实例
vue/vue.js
写入vue.js开发版
vue/index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue入门</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({//创建一个vue实例
el:"#root",
data:{
msg:"helloworld"
}
})
</script>
</body>
</html>
在浏览器打开显示hello world
二、挂载点、模板与实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue入门</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- 挂载点、模板,实例之间的关系 -->
<div id="root"> </div>
<script>
new Vue({
el:"#root",
template:'<h1>hello {{msg}}</h1> ',//模板
data:{
msg:"helloworld"
}
})
</script>
</body>
</html>
①最外层id = root的div称为实例vue的挂载点。
三、Vue实例中的数据、事件和方法
<div v-text = "msg"></div>
<div v-html = "msg"></div>
<div>msg</div>
注意v-text和v-html的区别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root" v-on:click="handleClick">hello {{msg}}</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello"
},
methods:{
handleClick:function() {
this.msg = "world"
}
}
})
</script>
</body>
</html>
以上实现了方法 点击(事件)hello变成world
v-on可以简写为@
四、vue中的属性绑定和双向数据绑定
1、属性绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>属性绑定和双向数据绑定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-bind:title="title">hello world</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is hello world"
}
})
</script>
</body>
</html>
v-bind:title=”title”,则绑定data下面的title。
可以简写为:titile
相当于title = “this is hello world”
title 鼠标放上去显示的内容
2、双向数据绑定
<div id="root">
<input v-model = "content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
content:"this is content"
}
})
</script>
v-model模板指令,输入框内容改变,data里面也改变。双向绑定
:value,data不改变,单向绑定
四、vue中的计算属性和侦听器
1、计算属性 computed
<body>
<div id="root">
姓:<input v-model="firstname" />
名:<input v-model="lastname" />
<div>{{fullName}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstname:'',
lastname:''
},
computed:{
fullName: function(){
return this.firstname + ' ' + this.lastname
}
}
})
</script>
2、侦听器 watch
<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:'',
lastname:'',
count:0
},
computed:{
fullName: function(){
return this.firstname + ' ' + this.lastname
}
},
watch:{
firstname: function(){
this.count ++
},
lastname: function(){
this.count ++
}
}
})
</script>
也可以修改为
watch:{
fullName: function(){
this.count ++
}
}
当输入框里面发生改变时,count加一
六、v-if,v-show,v-for指令
1、v-if
<div id="root">
<div v-if="show">hello world</div>
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick: function () {
this.show = !this.show;
}
}
})
</script>
当点击toggle按钮时,hello world会显示或者隐藏
在控制台,当点击toggle按钮,hello world消失时,是对dom中直接把div标签移除。
当修改为 v-show ,hello world消失时,是style =“display:none”
用v-show比较频繁时更好。
2、v-for
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
new Vue({
el:"#root",
data:{
list:[1,2,3]
}
“item of list”意思:循环llist这个数据项;每一次循环吧=把项的内容放到item这个变量里面去;后边把item输出出来。
key的属性,提升每一项渲染的效率/性能。每一项key都不相同。