Vue简介
-
什么是Vue
就是一个前端的JavaScript框架, 有了它, 可以实现脱离后端, 独立完成前端代码
-
为什么用Vue
三大主流前端框架: Angular, React, Vue
-
Vue的特点
1.单页面
2.数据驱动
3.虚拟DOM
4.数据的双向绑定
Vue使用
- 通过script标签引入vue.js
- 创建vue对象
- 通过el进行挂载
- 通过data定义对象的属性
- 通过methods定义对象的方法
<body>
<div id="d1">
{{ msg }}
</div>
<!--通过script标签引入vue-->
<script src="vue/vue.js"></script>
<script>
// 创建vue对象
let vue1 = new Vue({
el: '#d1', // 挂载点:使vue对象和html标签建立联系
data: {
msg: 'message'
},
methods: {
Click : functione () {
alert(123)
}
})
</script>
</body>
el挂载点
-
什么是挂载点
el挂载点: 使vue对象和html标签建立联系
let vue1 = new Vue({
el: '#d1' // 挂载点:使vue对象和html标签建立联系
})
- 注意事项
`
1.挂载点通常采用id选择器(唯一)
2.一个vue对象只能有一个挂载点, 一个挂载点只能匹配到一个标签
3.html和body标签不能作为挂载点
`
<body>
<div id="d1">
{{ }}
</div>
<div id="d2">
{{ }}
</div>
<div class="c1">
{{ }}
</div>
<div class="c1">
{{ }}
</div>
<script src="vue/vue.js"></script>
<script>
let vue1 = new Vue({
el: '#d1',
el: '#d2' // 一个vue对象只能有一个挂载点
});
let vue2 = new Vue({
el: '.c1' // 一个挂载点只能匹配到一个标签
})
</script>
-
补充
我们到实例化vue对象到底要不要用一个变量来接收呢?
1.如果我们只是在实例对象内部调用, 可以用this, 相当与self
2.如果在外部或者其他对象内部调用, 就需要用变量名接收了
差值表达式
- 什么是差值表达式
`
差值表达式就是在挂载点对应的标签当中,
用{{ }}调用在vue对象中已经定义好的变量也可以对变量进行简单处理
`
<div id="d1">
{{ msg }}
{{ num * 10}}
{{ msg + 1}}
{{ msg[1] }}
{{ msg.split('') }}
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
msg: 'test',
num: 10
}
})
</script>
文本指令
- {{ }}
- v-text: 原样输出
- v-html: 可以解析html代码
- v-once: 当前的标签只能被渲染一次, 即使标签内引用的变量发送了变化, 但是页面不会渲染出新的值
<body>
<div id="d1">
<p>{{ msg }}</p>
<p v-text="msg.split('')">12345</p>
<p v-text="info"></p>
<p v-html="info"></p>
<hr>
<!--v-once保证当前标签只渲染一次, 既第一次加载页面的时候, 因此即使msg的值发生了变化, 变迁的内容也不变-->
<p v-on:click="pClick" v-once>{{ msg }}</p>
<p>{{ msg }}</p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
msg: 'message',
info: '<h1>info</h1>'
},
methods: {
pClick: function () {
if (this.msg !== '信息') {
this.msg = '信息'
}else {
this.msg = 'message'
}
}
})
</script>
事件指令
-
就是给挂载点内的标签绑定事件
-
v-on:事件名="方法名"也可以简写为@事件名="方法名" -
@事件名="方法名"方法名不加括号会自动传入一个$event事件对象 -
@事件名="方法名()方法名加括号时, 不会自动传参
<body>
<div id="d1">
<p @click="f1">{{ click }}</p>
<p @mouseover="f2" @mouseout="f3" @mousedown="f4" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
<hr>
<!--不加括号时, 会自动传入一个参数: 点击事件对象$event-->
<p @click="f8">{{ click }}</p>
<!--加括号时, 不会自动传参, 可以手动传参-->
<p @click="f8($event, '并且传入参数')">{{ click }}</p>
<p></p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
click: '点击事件',
action: '鼠标事件'
},
methods: {
f1() {
this.click = '点击了'
},
f2() {
this.action = '悬浮'
},
f3() {
this.action = '离开'
},
f4() {
this.action = '按下'
},
f5() {
this.action = '抬起'
},
f6() {
this.action = '移动'
},
f7() {
this.action = '右键'
},
f8(ev, arg) {
console.log(ev);
this.click = '点击了' + arg
},
}
})
</script>
属性指令
- 属性指令就是用来控制挂载点内的标签的属性的
v-bind:属性名="变量"也可以简写为:属性名="变量"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
200px;
height: 200px;
background-color: red;
}
.d2 {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="d1">
<!--class属性绑定-->
<p :class="c1">class属性</p>
<!--使用[]绑定多个类-->
<p :class="[c1, c2]">class属性</p>
<!--既支持变量, 也支持常量-->
<p :class="['d1', c2]">class属性</p>
<!--{类名:布尔值}可以控制该类是否其作用-->
<p :class="[c1, {d2: false}]">布尔控制</p>
<p :style="myStyle">style属性</p>
<p :style="{ w, height: h, backgroundColor: bgc}">style属性</p>
<p></p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
c1: 'd1',
c2: 'd2',
is_true: true,
myStyle: {
'100px',
height: '100px',
backgroundColor: 'green'
},
w: '100px',
h: '100px',
bgc: 'green'
},
})
</script>
</body>
</html>