1. 什么是Vue?
Vue是前端框架,可以独立完成前后端分离式web项目的JavaScript框架
2. Vue特点
Vue是三大主流框架之一(Angular, Reactm, Vue), Vue结合了前两者的优点,是一个轻量级,中文api,数据驱动(数据驱动,不是从DOM出发),双向绑定(数据具有监听机制),MVVM设计模式,组件化开发,单页面(单页面能够体现出高效)应用的特点.
3. Vue的使用方法
1.下载vue.js：https://vuejs.org/js/vue.js
2. 通过下载保存在本地,在HTML文件中引入
3. 在HTML中书写挂载点,用id表示(一个Vue对象挂载点之后索引一个匹配结果,挂载点一般用id标识)
4. 在自定义的script的标签中new一个对象,传一个大字典过来
5. 字典中用el与HTML挂载点页面结构建立关联,data为其通过数据,methods为其提供方法
4. 实例成员挂载点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="c1">
<p>{{user}}</p>
</div>
</body>
<script>
new Vue({
el: '#c1', // el表示挂载点
})
</script>
</html>
5. 实例成员----数据
1. data给变量提供数据,用{}表示
2. 在插值表达式中直接书写数据的key来访问数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="c1">
<!--{{Vue变量}} 插值表达式, 中间出现的是Vue变量-->
<p>{{user}}</p>
<p>{{dic}}</p>
</div>
</body>
<!--将script写在body内比较保险,可以不用考虑程序加载时从上往下执行可能发生的问题-->
<script>
new Vue({
el: '#c1', // 挂载点
data:{ // 给各变量提供数据, 变量名: 变量的值
'user': 'panshao',
dic:{
'username': 'panshao',
'age': '18'
}
}
methods:{
} // 为挂载点提供事件方法, 函数名 : function(){}
})
</script>
</html>
6. 实例成员--过滤器
1. 过滤器本身数据就是数据处理函数.可以将插值表达式中的数据作为参数进行处理, 得到的函数返回值就是处理后的结果 2. 过滤器使用语法{{ 变量|过滤器(变量)}} 3. 过滤器在实例中用filters成员提供 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>{{100| f1}}</p> <!--<p>{{10, 20, 30, 40 | f2}}</p>--> <p>{{10, 20 | f2(30, 40)}}</p> <p>{{140 | f2}}</p> </div> </body> <script> new Vue({ el: '#app', filters:{ // f1 : function (num) { // return num**2 // },
// 总结: {{d1, d2, d3, d4 | f2}} 或者 {{d1, d2, d3, |f2(d4)}} 或者{{d1, d2 |f2(d3, d4)}}或者{{d1|f2(d2, d3, d4}} f2 : function (d1, d2, d3 ,d4) { // console.log(d1, d2, d3, d4); return d1 + d2 + d3 + d4 } } }) </script> </html>
当为{{d1 | f2}}时,返回的是NaN
7. 文本指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p v-text="123"></p>
<!--v-指令="变量名字" , 变量名是需要data提供数据值的 -- >如果v-text="常量"的话, 常量可以是数字,或者是bool值,这是不需要data提供数据值
<p v-HTML="info"></p> // 可以解析HTML语法
<p v-text="'abc' + info"></p> // 相当于字符串的拼接, 后续会常常遇到
</div>
</body>
<script>
let app = new Vue({
el: '#app',
// data:{
// info: '哈哈哈',
// }
})
</script>
</html>
平时在程序中遇到多行字符串时,如果觉得引号不够用,这时就可以用反引号, 他的按键在esc下面,具体用法如下:
反引号字符串中可以直接填充变量,语法为`${变量名}`
let name = 'panshao'
let hobby = 'dbj'
let s2 = `name: ${name}
hobby: ${hobby}`;
console.log(s2)
8. 事件指令
语法 : v-on: 事件名="函数名"
简写: @事件名="函数名"
在methods中写函数名与对应实现体的逻辑
事件传参: 函数名| 函数名()|函数名(自定义函数)| 函数名($event, 自定义参数)
当我们想要某个数字实现自减时(点击一次,数字减一), 具体代码如下:
这个是low b版本的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
<script src="js/vue.js"></script>
<style>
<!--将鼠标变成一个小手的样式-->
.low {
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<p @click="lowNum">{{num}}</p>
<p class="low" @dblclick="dblAction">双击</p>
<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>
let app = new Vue({
el: '#app',
data: {
num : 99,
},
methods:{
lowNum: function (num) {
this.num -= 1
},
// ev 是个事件对象, 在触发事件时候没有传参给函数体,而系统会自动的传参给前端,他是一个事件对象,判断是鼠标单击,还是双击,亦或是键盘点击的,点击在哪
dblAction: function (ev) {
console.log(ev)
},
overAction(a, b, c){
console.log(a,b ,c)
}
}
})
</script>
</html>
一旦加括号系统就不会帮我们传事件对象,那如果想要传事件对象,就得去明文书写,我们都知道,在方法里面body内在外部script中,想用Vue的数据成员时,我们就会这样表示: app.$data, 如果想在方法中使用那就要这样表示: this.$data,在插值表达式下面可以表示为{{$data.num}},省略了app,为什么会省略app, 原因就是我们在与前端交互时就已经挂载点存在.
总结: 事件传参
@事件 = '方法' 默认传入事件对象 $event
@事件 = '方法()' 不传递任何参数
@事件 = '方法(参数...)' 只传递自定义参数
@事件 = '方法($event, 参数...)' 自定义传参时会传递事件对象
9 属性指令
语法: v-bind: 属性名="变量值"
v-bind: 属性名 = "变量值" 可以简写:属性名 = "变量值"
单值属性绑定: :title="变量值" | :id = "变量值" | :自定义属性 = "变量值"
style属性绑定: : style = "字典变量" | :style = "{css属性1:变量1, ... , css属性n: 变量n}"
class属性绑定: : class= "变量值" | :class="[变量1, ... , 变量n]" | class="{类名: 布尔变量}"
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>属性指令</title>
<style>
[index] {
color: orange;
}
.ccc {
background-color: yellowgreen;
color: greenyellow;
border-radius: 50%;
}
.ccc1 {
background-color: yellowgreen;
}
.ccc2 {
color: greenyellow;
}
.ccc3 {
border-radius: 50%;
}
.ttt {
background-color: gold;
color: orange;
}
</style>
</head>
<body>
<div id="app">
<!--1) 语法：v-bind:属性名="变量" -->
<p id="p1" class="p1" style="" title="" index="">属性指令1</p>
<!--v-bind绑定class后p1就会变成变量,在绑定之前都是字符串,绑定之后数据由data提供-->
<p id="p2" v-bind:class="p1" style="" title="" index="">属性指令2</p>
<p v-bind:index="p1">自定义属性也可以被vue绑定1</p>
<!--2) v-bind:属性名="变量" 简写 :属性名="变量" -->
<p :index="p1">自定义属性也可以被vue绑定2</p>
<p :title="'文本提示'">悬浮文本提示</p>
<!--3) style样式属性绑定 -->
<!--加v-bind前端就会出现报错,将style里面的值当做一个非法的字符,这时候可以将font-size改变为其他字符来进行代替-->
<p :style="myStyle">样式绑定1</p>
<p :style="{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2</p>
<!--4) class类属性绑定 -->
<p :class="myc1">样式绑定3</p>
<p :class="[myc2,myc3,myc4,'bbb']">样式绑定4</p>
<!--xxx是类名，是否起作用有布尔类型变量yyy值决定 -->
<p :class="{xxx:yyy}">样式绑定5</p> yyy为布尔值
<!--案例：点击切换类名是否起作用-->
<p @click="clickAction" :class="{ttt:yyy}">点击切换类</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
p1: 'q1',
myStyle: {
backgroundColor: 'pink',
color: 'deeppink',
'border-radius': '50%'
},
c1: 'cyan',
c2: 'tan',
myc1: 'ccc',
myc2: 'ccc1',
myc3: 'ccc2',
myc4: 'ccc3',
yyy: true, // false
},
methods: {
clickAction() {
this.yyy = !this.yyy; // 如果yyy等于false,那么等于号右边的this.yyy就是false,这个方法只操作变量,变量只需与ttt进行绑定
}
}
})
</script>
</html>
10 表单指令
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', // 跟true-value相对应
mysex: 'others', // 默认others选中
myhobbies: ['male', 'female']
}
})
</script>
</html>
```