本系列Vue学习笔记为我学习黑马程序员前端基础课程https://www.bilibili.com/video/BV12J411m7MG?p=2中所记录的重点以及部分代码运行的结果和过程。
vs code control+D可以选中所有相同元素
1.Vue简介
Vue是一个js框架，相比jquery这样的js库，框架的功能更为强大。
特点：
- 要严格遵循框架的使用规则。
- 简化DOM操作
传统DOM操作：获取元素->操作元素
VUE：vue特殊语法 不用人为操作 - 响应式数据驱动
数据改变时 页面会同步更新
2. Vue实例
Vue实例由一下几部分组成：el挂载点，data数据对象，methods方法。
Vue实例可以用以下结构表示：
var app=new Vue({
el:"挂载对象"，
data:{数据对象}，
methods:{方法}
})
2.1 第一个Vue程序
- 导入开发版本的Vue.js
- 创建Vue实例对象，设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE HTML>
<html lang="EN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width.initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue基础</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"你好"
}
})
</script>
</body>
</html>
3.el挂载点
注意事项：
- el是用来设置Vue实例挂载的元素
- vue会管理el选项命中的元素及其内部的后代元素
- 可以使用其他的选择器（选择器有class、id等），但是建议使用ID选择器，因为在css中每个元素的ID往往是唯一的
- 可以使用除了HTML和BODY以外的的双标签，如DIV，H2，P等
4.data数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时，遵守js的语法即可，比如对象的点语法、数组的索引语法
- data的引用在body中存在不同的形式
- 在内容中应用的形式为
{{变量名}} - 而在属性中的引用形式为
"变量名"
<!DOCTYPE HTML>
<html lang="EN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width.initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>data数据对象</title>
</head>
<body id="body">
<div id="app">
{{message}}
<h2>{{school.name}} {{school.mobile}}</h2>
<ul>
<li>{{campus[0]}}</li>
<li>{{campus[1]}}</li>
<li>{{campus[0]}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"我是程序员",
school:{
name:"Xiaoming",
mobile:"123456"
},
campus:["北京校区","上海校区","广州校区","深圳校区"]
}
})
</script>
</body>
</html>
5.Vue指令
5.1 内容绑定v-text
v-text指令的作用是：设置元素的文本值，本质为切换元素的textContent，简写为{{}}
Vue赋值文本内容有两种形式：
<div id="app">
<h2 v-text="message"></h2>
<h2>{{message}}</h2>
</div>
var app=new Vue({
el:"#app",
data:{
message:"我是程序员"
}
})
v-text这种默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容，如下所示
<div id="app">
<h2 v-text="message">阿曹</h2>
<h2>{{message}}阿曹</h2>
</div>
var app=new Vue({
el:"#app",
data:{
message:"我是程序员"
}
})
第一种方式输出 我是程序员
第二种方式输出 我是程序员阿曹
5.2 v-html
- v-html指令的作用是设置元素的innerHTML；
- 内容中有html结构会被解析为标签；
- v-text指令无论内容是什么，只会解析为文本。
<!DOCTYPE HTML>
<html lang="EN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width.initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue指令--v-text</title>
</head>
<body id="body">
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
// content:"我是程序员"
content:"<a href='http://www.baidu.com'>我是程序员</a>"
}
})
</script>
</body>
</html>
5.3 事件绑定v-on
v-on指令的作用是为元素绑定事件，指令可以简写为@
- 事件名不需要写on
- 绑定的方法写在methods中
- 方法中通过this关键字获取data中的数据
- 两种写法：v-on:或者@
<div id="app">
<input type="button" value="事件绑定" v-on:事件="方法">
<input type="button" value="事件绑定" @事件="方法">
</div>
<script>
var app = new Vue({
el: "#app",
methods: {
方法: function () {
}
}
})
</script>
5.4 v-show
作用：根据表达式的真假，切换元素的显示和隐藏。
原理：修改元素的display的值。
应用场景：广告、遮罩层
特点：
- 指令后面的内容，最终都会解析为布尔值
5.5 v-if
作用：根据表达式的真假切换元素的显示状态
本质：通过操纵dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，为false，从dom树中移除
相比于v-show，该方法切换消耗较大
<div id="app">
<button @click="toggleIsShow">切换显示</button>
<p v-if="isShow">vue指令--if</p>
<p v-show="isShow">vue指令--show</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: true
},
methods: {
toggleIsShow: function () {
this.isShow=!this.isShow
},
}
})
</script>
执行上述代码，使用chrome打开F12开发者模式，打开element，通过点击button，可以看出v-if和v-show的区别如下：
实际工作中，频繁操作的元素用v-show，反之用v-if，因为操作dom数对性能消耗比较大。
5.6 v-bind
设置元素的属性（比如：src，title，class等），元素的属性有很多种，特点是都写在元素的内部。
使用方法：
v-bind:属性名=表达式
or
:属性名=表达式
example：
<img v-bind:src="imgAddress">
<img :src="imgAddress">
// :src和v-bind:src一样
<img v-bind:title="imgTitle">
<img v-bind:class="isActive?'active':''">
//三元表达式方式。isActive为true返回active，否则为空字符
<img v-bind:class="{active:isActive}">
//对象方式。active是否生效取决于isActive的值
未完待续
欢迎批评指正！！！
