Vue简介
Vue是市场三大主流框架之一.和Angular, React都是基于JavaScript开源框架.Vue框架是一种js渐进式框架, 相对于React(gitup),偏向于做pc端.
Vue的优点: 轻量级,中文API, 支持双向绑定, MVVM设计模式,组件开发,单页面应用.
渐进式: 可以根据开发进行调整Vue框架控制项目的具体位置: 可以是一个标签,一个页面,也可是整个项目.
Vue简单使用
下载链接: https://cn.vuejs.org/v2/guide/installation.html. 下图下载入口. 开发版本完整版, 生成版本压缩版.都可以使用.
使用时导入本地即可使用
<!--本地vue文件导入. 下载的VUE文件路径--> <script src="js/vue.js"></script> <!--cdn下Vue文件导入, 这种方式必须在联网状态--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
挂载点
挂载点控制页面及项目的范围
<body>
<h1>{{Vue_h1}}</h1>
<h2>{{Vue_h2}}</h2>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: 'h1'
})
</script>
将h1标签挂载, 页面只显示h2标签文本如下图所示; h1标签被Vue控制,所以没有显示. .
ps: body标签和html标签不可以做挂载点. 挂载点一般使用id属性
Vue实例
1, el:实例:
<script>
new Vue({
el: 'h1' // 可以是标签名, 类名, 属性名
})
</script>
2, data:数据
数据类型有: 字符串, 整形, 数组, 字典, 布尔值.
let a = 0;let app1 = new Vue({
el: '#app1',
data: {
Vue_h1: '这是h1标签',
Vue_h2: '这是h2标签', a, // a表示: a: a
}
})
ps:
实例成员data为vue提供数据环境, 数据采用字典{}键值对的形式. (字典中的键是字符串,两侧引号省略不写)
再插入的文本值中用{{变量名}}, 直接书写数据度key可以访问数据.
外部访问内部: 1, 挂载点内部的标签实例后,可以访问内部成员 (app1.$data.Vue_h1)
2, 也可以通过app这个变量来访问: app.Vue_h1
在vue实例内部的方法使用this.vue_h1一样.
3, 过滤器
过滤器对{ }}内数据操作. 语法{{值1...| 函数名(参数)}}, 将值当作参数传入
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{num + 1}}</p>
<p>{{num + 1 | f1}}</p>
<p>{{10, 20 | f2(10, 100)}}</p>
<p>{{10, 20, 30, 40, 50 | f2(10, 100)}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '过滤器',
num: 3,
},
// 过滤器函数 f1, f2 过滤器函数 {{值1...| 函数名(参数:值)}}
filters: {
f1: function (num) {
return num*2
},
f2: function (a, b, c, d) {
return a+b+c+d
}
}
})
</script>
4, 文本指令
插入表达式, 例: v-text指令, 渲染普通文本, 也可以使用v-html指令渲染文本, 可以渲染变量, 常量.
<body>
<div id="app">
<p>{{info}}</p>
<p v-text="info"></p>
<p v-text="123"></p>
<p v-text="true"></p>
<p v-text="'abc' + info"></p>
<p v-text="[1, 2, 3]"></p>
<p v-html="sign"></p>
<h1></h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: '文本渲染', // 普通文本渲染
sign: '<h1>h1html文本渲染</h1>' // html:文本渲染
}
})
</script>
5, 事件指令
语法: v-on:事件名="函数名(参数)", 简写形式: @事件名="函数名(事件名)".
使用methods实例成员提供, 事件函数实现.
事件传参：函数名 | 函数名() | 函数名(自定义参数) | 函数名($event, 自定义参数)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<style>
body {
user-select: none;
}
.low-num {
cursor: pointer;
}
.low-num {
color: red;
}
</style>
</head>
<body>
<div id="app">
<p class="low-num" v-on:click="lowNum">
<span>点击减一:</span>
<span>{{num}}</span>
</p>
<!-- <p v-on:dblclick="dblAction">双击</p>-->
<!--@mouseover 鼠标悬浮事件-->
<p @mouseover="overAction()">悬浮</p>
<p @mouseover="overAction(10)">悬浮1</p>
<p @mouseover="overAction(10, 20)">悬浮2</p>
<p @mouseover="overAction(10, 20, $event)">悬浮3</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 100,
},
methods: {
lowNum: function () {
this.num --
},
dblAction(ev){
console.log(ev)
},
overAction(a, b, c) {
console.log(a, b, c)
}
}
})
</script>
</html>
6, 属性指令
1) 语法：v-bind:属性名="变量"
2) v-bind:属性名="变量" 简写 :属性名="变量"
3) 单值属性绑定： :title="变量" | :id="变量" | :自定义属性="变量"
4) style属性绑定： :style="字典变量" | ：style="{css属性1:变量1, ..., css属性n:变量n}"
5) class属性绑定： :class="变量" | :class="[变量1, ..., 变量n]" | :calss="{类名:布尔变量}"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<style>
[index] {
color: orange;
}
.cc {
background-color: yellowgreen;
color: greenyellow;
border-radius: 50%;
}
.cc1 {
background-color: yellowgreen;
}
.cc2 {
color: greenyellow;
}
.cc3 {
border-radius: 50%;
}
.tt {
background-color: gold;
color: orange;
}
</style>
</head>
<body>
<div id="app">
<p id="p1" class="p1" style="" title="" index="">属性指令1</p>
<!-- 单值绑定-->
<p id="p2" v-bind:class="p1" style="" title="" index="">属性指令1</p>
<!-- style属性绑定-->
<p :style="myStyle">样式绑定1</p>
<!-- class-->
<p class="cc">class样式</p>
<p :class="myc1">class1样式绑定</p>
<p :class="[myc2, myc3, myc4]">class2样式绑定</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
p1: 'q1aaaaa',
myStyle: {
backgroundColor: 'pink',
color: 'deeppink',
'border-radius': '50%',
},
myc1: 'cc', // 使用类名赋值
myc2: 'cc1',
myc3: 'cc2',
myc4: 'cc3',
}
})
</script>
</html>
动态修改案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
}
.center {
text-align: center;
line-height: 200px;
}
.rcenter {
text-align: right;
line-height: 200px;
}
.right {
text-align: right;
}
.top {
line-height: 21px;
}
.bottom {
line-height: calc(400px - 21px);
}
</style>
</head>
<body>
<div id="app">
<div class="box" :class="[c1, {right:r, top:t, bottom:b}]" @mouseover="a1" @mousedown="a2" @mouseup="a3" @mouseout="a4">{{ msg }}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
a1(){
this.msg = '被悬浮';
// 正中
this.c1 = 'center';
this.r = 0;
this.t = 0;
this.b = 0;
},
a2(){
this.msg = '被按下';
// 右上
this.r = 1;
this.t = 1;
this.b = 0;
},
a3(){
this.msg = '被抬起';
// 右中
this.c1 = 'rcenter';
this.r = 0;
this.t = 0;
this.b = 0;
},
a4(){
this.msg = '被移开';
// 右下
this.r = 1;
this.t = 0;
this.b = 1;
},
},
data: {
msg: '',
c1: '',
r:0,
t:0,
b:0,
}
})
</script>
</html>
表单指令
1) 语法：v-model="控制vaule值的变量"
2) :value="变量" 直接绑定数据不会时时更新(修改表单标签值，值不会时时映射给绑定的变量)
3) v-model="变量" 绑定数据会时时更新(修改表单标签值，值会时时映射给绑定的变量)
4) 单独复选框作为确认框时，v-model绑定的变量为布尔类型变量
5) 多复选框，v-model绑定的变量值是一个列表(数组)，存放复选框选项值(谁被选中就存放了谁)
6) 单选框，v-model绑定的变量值是某一个选项的值(值是哪个选项的值，那个选项就被选中)
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.p1 {
width: 500px;
height: 21px;
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<form action="">
<!--1) 对表单标签value进行绑定操作变量，不能时时检测绑定的变量-->
<input class="inp1" type="text" :value="info">
<input class="inp2" type="text" :value="info">
<p class="p1">{{ info }}</p>
<hr>
<!--2) 表单标签的值有 v-model="变量" 来绑定控制，操作的还是value，但是拥有时时变量值的检测 -->
<input class="inp1" type="text" v-model="info">
<input class="inp2" type="text" v-model="info">
<p class="p1">{{ info }}</p>
<hr>
<!-- 2) v-model操作单独复选框 - 确认框 -->
是否同意：<input type="checkbox" name="agree" v-model="isAgree">
<!--是否同意：<input type="checkbox" name="agree" true-value="yes" false-value="no" v-model="isAgree">-->
<p>{{ isAgree }}</p>
<!-- 3) 单选框-->
性取向：
男 <input type="radio" name="sex" value="male" v-model="mysex">
女 <input type="radio" name="sex" value="female" v-model="mysex">
哇塞 <input type="radio" name="sex" value="others" v-model="mysex">
<p>{{ mysex }}</p>
<!-- 4) 复选框-->
兴趣爱好：
男 <input type="checkbox" name="hobbies" value="male" v-model="myhobbies">
女 <input type="checkbox" name="hobbies" value="female" v-model="myhobbies">
哇塞 <input type="checkbox" name="hobbies" value="others" v-model="myhobbies">
<p>{{ myhobbies }}</p>
<hr>
<input type="submit">
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: '123',
isAgree: 0,
// isAgree: 'no',
mysex: 'others',
myhobbies: ['male', 'female']
}
})
</script>
</html>
```