Vue篇
1.Vue简介
-
Vue 是一套构建用户界面的渐进式前端框架。
-
只关注视图层,可以很方便的与其它库或已有项目整合。
-
特点:
-
易用:在有 HTML CSS JavaScript 的基础上,快速上手。
-
灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
-
性能:20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
-
-
Vue 的程序包含视图和脚本两个核心部分
视图:负责页面渲染,主要由 HTML+CSS 构成。
脚本:负责业务数据模型(Model)以及数据的处理逻辑。
2.Vue核心对象
-
Vue核心对象: let v = new Vue({ 选项列表})
-
选项列表:
-
el 选项:用于接收获取到页面中的元素。(根据常用选择器获取)。
-
data 选项:用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。
-
methods 选项:用于定义方法。方法可以直接通过对象名调用,this 代表当前 Vue 对象。
-
-
在视图部分获取脚本部分的数据。
- 语法:{{变量名}}
3.常用指令
- 指令:是带有 v- 前缀的特殊属性,不同指令具有不同含义
- 使用指令时,通常编写在标签的属性上,值可以使用 JS 的表达式。
常用指令语法
文本插值
v-html:把文本解析为 HTML 代码。
绑定属性
v-bind:为 HTML 标签绑定属性值。
条件渲染
v-if:条件性的渲染某元素,判定为真时渲染,否则不渲染。
v-else:条件性的渲染。
v-else-if:条件性的渲染。
v-show:根据条件展示某元素,区别在于切换的是 display 属性的值。
列表渲染
v-for:列表渲染,遍历容器的元素或者对象的属性。
事件绑定
v-on:为 HTML 标签绑定事件。
表单绑定
v-model:在表单元素上创建双向数据绑定。
文本插值:v-html
把文本解析为 HTML 代码
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-html</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
<!-- 定义变量,不会解析标签 -->
{{msg}}
<!-- 会解析标签 -->
<div v-html="msg"></div>
</div>
</body>
<!-- 导入Vue框架 -->
<script src="js/vue.js"></script>
<script>
//Vue核心对象
new Vue({
//获得id为div的元素
el:"#div",
//为msg变量赋值。在视图中声明的变量需要在此处赋值
data:{msg:"<b>hahaha</b>"}
})
</script>
</html>
绑定属性:v-bind
为 HTML 标签绑定属性值
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind</title>
<style>
/* 定义类样式aa */
.aa{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="div">
<!-- 绑定href属性 -->
<a v-bind:href="msg">baidu</a>
<br>
<!-- v-bind可以省略,绑定class属性,直接写冒号接属性 -->
<div :class="cls">yangshi</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
//为变量msg和cls赋值
msg:"https://www.baidu.com",
cls:"aa"
}
})
</script>
</html>
条件渲染:v-if、v-else、v-else-if、v-show
v-show:根据条件展示某元素,区别在于切换的是 display 属性的值
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if</title>
</head>
<body>
<div id="div">
<!-- islogin如果为真就显示这个标签内容 -->
<div v-if="islogin">gerenzhognxin</div>
<!-- islogin如果为假就显示这个标签内容 -->
<div v-else="!islogin">
<div>zhuce</div>
<div>denglu</div>
</div>
<!-- islogin为false时,<div style="display: none;">v-show</div>-->
<div v-show="islogin">
v-show
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
//设置变量为false
islogin:false
}
})
</script>
</html>
列表渲染: v-for
列表渲染,遍历容器的元素或者对象的属性
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for</title>
</head>
<body>
<div id="div">
<!-- 遍历names数组,生成多个div,name是数组中的元素 -->
<div v-for="name in names">
{{name}}
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
//定义数组
names:["张三","李四","王五"]
}
})
</script>
</html>
事件绑定:v-on
为 HTML 标签绑定事件
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on</title>
</head>
<body>
<div id="div">
<!-- 定义name变量 -->
<div>{{name}}</div>
<!-- 绑定单击事件change() -->
<button v-on:click="change()">div1</button>
<!-- 绑定双击事件change2() -->
<button v-on:dblclick="change2()">div2</button>
<!-- 绑定单击事件change3() -->
<button @click="change3()">div3</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
//为name变量赋值
name:"我是一名程序猿"
},
methods:{
change(){
//this代表所在的Vue对象,为name变量赋值
this.name="我是程序猿div1"
},
change2(){
this.name="我是程序猿div2"
},
change3(){
this.name="我是程序猿div3"
}
}
})
</script>
</html>
表单绑定 v-model
在表单元素上创建双向数据绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model</title>
</head>
<body>
<div id="div">
姓名:<input type="text" v-model="username">
<br>
密码:<input type="password" v-model="password">
<br>
<!-- 绑定单击事件 -->
<button @click="getUsername()">点我打印姓名</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
//为username和pasword赋值,打开网页时输入框会输出这两个值
username:"张三",
password:"123456"
},
methods:{
//定义getUsername方法,在控制台输出username的值
getUsername(){
//打印出输入框中的文本,
console.log(this.username)
}
}
})
</script>
</html>