1.安装-使用<script>引入
操作步骤：
（1）进入vue.js官网：https://cn.vuejs.org/v2/guide/installation.html
（2）点击开发版本
（3）拷贝开发版本页面的vue.js源代码
（4）创建项目目录文件夹VUE
（5）VUE目录下新建vue.js文件，将开发版本中的源代码放入vue.js文件内
（6）VUE目录下新建index.html文件，将vue.js通过<script>标签引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="vue.js"></script>
</head>
<body></body>
</html>
注意：引入需要放在head中引入，避免放在body内会发生抖屏的现象
2.创建一个Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el: "#root",//element 元素，挂载点，绑定dom节点：表示Vue的示例接管页面上的哪个元素，此时vue实例与id=root的dom进行了绑定 #的含义是id=
data: { //存储数据，用于替换标签中的占位符，vue.js是通过数据操纵标签的
msg:"Hello World"
}
})
</script>
</body>
</html>
3.挂载点，模板与实例的关系
（1）挂载点：vue的el属性id对应的dom标签
vue只会处理挂载点下面的内容
（2）模板：挂载点内部的内容都叫做模板
模板的两种写法：
<div id="root">
<h1>{{msg}}</h1> //1.直接写在挂载点的内部（建议）
</div>
<script>
new Vue({
el: "#root",
data: {
msg:"Hello World"
}
})
</script>
<div id="root"></div>
<script>
new Vue({
el: "#root",
template: '<h1>{{msg}}</h1>', //2.写在vue实例内部，template属性表示模板，只会显示在挂载点内部
data: {
msg:"Hello World"
}
})
</script>
上述两种方式显示结果一致，如下：
模板显示
（3）实例：将挂载点、模板、数据等属性写入实例，vue会自动结合模板和数据生成最终要展示的内容，然后将最终生成的内容放入挂在点之中
4.实例中的数据，事件与方法
（1）v-text指令，当前标签显示的内容,用户v-html同样可以实现
<div id="root">
<h1 v-text="number"></h1> //v-text此处可以替换成v-html，展示效果相同
</div>
<script>
new Vue({
el: "#root",
data: {
msg:"Hello World",
number:123
}
})
</script>
（2）v-text与v-html的区别
当上述例子中的number变为html标签时，使用v-text会将标签进行转义，将标签显示在页面中，而使用v-html将不会对标签进行转义，标签将不会显示在页面中
//使用v-text
<div id="root">
<div v-text="content"></div>
</div>
<script>
new Vue({
el: "#root",
data: {
content:'<h1>Hello World</h1>>'
}
})
</script>
v-text页面展示
//使用v-html
<div id="root">
<div v-html="content"></div>
</div>
<script>
new Vue({
el: "#root",
data: {
content:'<h1>Hello World</h1>'
}
})
</script>
v-html页面展示
（3）v-on，绑定事件的指令
//事件名称：click
//事件绑定的方法：handleClick
//方法写入实例的methods中
<div id="root">
<div @click="handleClick">{{content}}</div> //@为v-on:的简写
</div>
<script>
new Vue({
el: "#root",
data: {
content:'Hello World'
},
methods:{
handleClick:function () {
this.content='world' //this表示当前实例下的data中的元素
}
}
})
</script>
5.属性绑定和双向数据绑定
（1）v-bind：单向绑定指令，表示绑定属性 title表示被绑定的属性，=后面的数据表示实例中的属性，也可以是js表达式
单向绑定：数据决定页面显示内容，页面无法决定数据的内容
<div id="root">
<div :title="title">hello world</div> //v-bind 缩写为：
</div>
<script>
new Vue({
el: '#root',
data: {
title: 'this is hello world'
}
})
</script>
单向绑定示例
（2）v-model：双向绑定指令
<div id="root">
<div :title="title">hello world</div> //v-bind 缩写为：，v-bind表示绑定属性 title表示被绑定的属性，=后面的数据表示实例中的属性，也可以是js表达式
<input v-model="content"/> //使用v-model绑定后当变量content的进行变化是input的值也进行变化，当input输入框中的值进行变化时 content的值也会进行变化
<div>{{content}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
title: 'this is hello world',
content: 'this is content'
}
})
</script>
6.Vue中的计算属性和侦听器
（1）computed：vue实例的计算属性，conmputed指的是一个属性通过其它属性计算而来
优点：在如下例子中，当firstName和lastName中的值都未发生变化，此时computed不会重新计算fullName的值，会使用上次的缓存（内置缓存），只有当firstName和lastName中的任意值发生变化时才会重新计算fullName的值，性能较高
<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:{
fullName: function () { //当firstName和lastName中任意一个数据发生变化，计数变量都会增加1
this.count++
}
}
})
</script>
7.常见指令
（1）v-if：条件指令
<div id="root">
<div v-if="show">hello world</div> //只有当v-if的值为ture时，此标签的内容才会显示
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function () {
this.show=!this.show
}
}
})
</script>
（2）v-show
<div id="root">
<div v-show="show">hello world</div> //只有当v-show的值为ture时，此标签的内容才会显示
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function () {
this.show=!this.show
}
}
})
</script>
（3）v-if和v-show的区别
v-if是在dom中中介把当前标签删除；而v-show是把当前标签的style属性中的display设置为none，把当前标签进行隐藏；
如果频繁的需要把当前标签的隐藏的频率高时，使用v-show会减少添加dom和小会dom的操作，性能较好
（3）v-for ,用户数据的循环展示
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(item,index) in list" :key="item">{{item}}</li>
<!--item 代表list中的每一条数据-->
<!--使用v-for时需要搭配 key属性，他会提升页面渲染的效率-->
<!--注意：key要求不能相同,index代表list每一项的下标，key设置为index每次都会不同-->
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
show:true,
list:[1,2,3]
},
methods:{
handleClick:function () {
this.show=!this.show
}
}
})
</script>
网友评论