Vue.js学习总结
1.创建一个Vue实例
通过引入方式创建一个.html文件，在头部标签内引入
<!-- 开发环境版本，包含了有帮助
的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
，之后在<body>内部写入代码完成第一个”Hello Vue”的实例
2.挂载点、模板以及实例的关系
<body>
<div id='root'>
<h1>{{msg}}</h1>
</div>
<script>
new Vue({
el:'#root',
data:{
msg:'hello world'
}
})
</script>
</body>
挂载点就是element对应的标签，上面的html中的html中的{{msg}}去掉
<div id='root'></div>
这个标签就是vue实例的挂载点，因为下面的el正好与上面标签中的id对应上
模板：挂载点里面的内容
<h1>{{msg}}</h1>
模板可以有多种形式，可以写在挂载点内部也可以写在实例里面的template属性里面，所以模板就是挂载点的内部的内容。
new Vue({
el:'#root',
template:'<h1>{{msg}}</h1>',
data:{
msg:'hello world'
}
})
3.实例中的数据、实例和方法
数据：除了插值表达式，可以改变dom之外，Vue还提供了一些指令，操作dom，例如v-text和v-html，v-text会进行一次转义，如下
<!DOCTYPE html>
<html>
<head>
<title>vueTest</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h1>hello {{msg}}</h1>
<h2>number is {{number}}</h2>
<h2 v-text="number"></h2>
<h2 v-html="number"></h2>
<div v-text="content"></div>
<div v-html="content"></div>
</div>
<script >
new Vue({
el: "#root",
data: {
msg: "world",
number: 12345,
content: "<strong>hello</strong>"
}
})
</script>
</body>
</html>
事件：vue给一个标签绑定事件
vue模板指令：v-on：事件名称，也可简称为@事件名称，如下
<!DOCTYPE html>
<html>
<head>
<title>vueTest</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div @click="handleClick">{{msg}}</div>
<!-- <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>
这里用methods下函数实现事件触发
4.vue中的属性绑定和双向数据绑定、计算属性和侦听器
4.1属性绑定 v-bind，如下
<div id="root">
<div v-bind:title="title">hello world</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is hello world"
}
})
</script>
v-bind也可有另外一种方式
<div v-bind:title="title">hello world</div>可以写为 <div :title="title">hello world</div>
就是“v-bind“”改写为“：”
4.2双向数据绑定，如下
单向绑定：就是当数据改变页面发生变化，而当页面发生改变数据不会跟着改变
双向绑定：就是当数据改变页面发生变化，而当页面发生改变数据也会跟着改变
如下：
<div id="root">
<input type="text" v-model:value="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
content: "this is content"
},
})
</script
4.3vue中的计算属性和侦听器
4.3.1计算属性
计算属性computed：一个属性通过其他计算属性而来，例如funame由firstname和lastname计算而来，
<div id="root">
姓：<input type="text" v-model:value="firstName">
名：<input type="text" v-model:value="lastName">
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
},
//计算属性
computed:{
fullName: function () {
return this.firstName+" "+this.lastName
}
},
})
</script>
4.3.2侦听器watch，监听数据变化，一旦某个数据发生变化就会在侦听器中进行逻辑计算，如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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>{{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:{
fullName:function () {this.count++
}
}
})
</script>
</body>
</html>