Vue.js基础知识
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>