下篇：初识Vue【中】
一、Vue入门
1.1 什么是Vue？
Vue ： 一套用于构建用户界面的 渐进式 JavaScript 框架
- Vue 的核心类库只关注视图层，也就是只处理页面。
- Vue 提供的一套 JS 框架，通常称为
vue全家桶。 渐进式: 就是说可以在已有的项目中部分使用vue，主键过渡到整个项目都使用Vue，最后完全使用Vue全家桶来完成整个项目。可以在HTML导入js当成jquery使用、也可以使用vue全家桶进行单页开发。
1.2 MVVM模式
MVVM：（Model-View-ViewModel）是对 MVC（Model-View-Control）和 MVP（Model-View-Presenter）的进一步改进。
- View ： 视图层（UI用户界面）。
- ViewModel：业务逻辑层（一切 js 可视为业务逻辑）。
- Model：数据层 （存储数据及对数据的处理如增删改查）。
MVVM 将数据双向绑定（data-binding）作为核心思想，View 和 Model 之间没有联系，它们通过 ViewModel 这个桥梁进行交互。
1.3 入门案例
代码：
<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>Document</title>
<!--1 引入vue核心库-->
<script src="./js/vue.js"></script>
</head>
<body>
<!--2 视图展示区域-->
<div class="app">
{{message}} <!--4.2 展示变量的值-->
</div>
</body>
</html>
<script>
//3 核心模板
new Vue({
el:'.app', //3.1 与视图展示区域的id相同
data:{ //4 数据区域
message: 'hello world' //4.1 定义变量
}
})
</script>
二、基本使用
2.1 插值表达式：{{}}
{{插值表达式}}
1.支持data区域数据的显示。例如：{{message}}
2.支持表达式的计算。例如：{{1+2+3}} 、 {{'Hello' + ' World'}}
3.支持函数的调用。例如：{{'Hello'.split('')}}
示例：
<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>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="aa">
{{username}} <br> <!--jack-->
{{'用户名：' + username}} <br> <!--用户名：jack-->
<!--
split() 切割
reverse() 反转
join() 拼接
-->
{{username.split('').reverse().join('-')}} <!--k-c-a-j-->
</div>
</body>
</html>
<script>
new Vue({
el: '.aa',
data: {
username: 'jack'
}
})
</script>
结果展示：
2.2 标签体操作：v-text & v-html
<!-- v-text 以【文本】方式处理标签体 -->
<标签 v-text=””></标签>
<!-- v-html 以【html标签】方式处理标签体 -->
<标签 v-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>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<!-- 以【文本】方式输出 -->
<div v-text="msg1"></div>
<div v-text="msg2"></div>
<!-- 以【html】方式输出 -->
<div v-html="msg1"></div>
<div v-html="msg2"></div>
</div>
</body>
</html>
<script>
new Vue({
el: '.app',
data: {
msg1: '普通文本',
msg2: '<a href="#">超链接</a>',
}
})
</script>
结果展示：
2.3 循环语句：v-for
<!--完整写法-->
<标签 v-for=”(变量,索引) in 数组|集合”>
{{变量}} , {{索引}}
</标签>
<!--简化写法-->
<标签 v-for=”变量in 数组|集合”>
</标签>
示例：
<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>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<!--遍历数组-->
<div v-for="(username,index) in arr">
第{{index+1}}个人是: {{username}}
</div>
<!--遍历数组对象-->
<table border="1">
<tr>
<td>编号</td>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr v-for="(user,index) in list">
<td>{{index+1}}</td>
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.age}}</td>
<td>
<!-- 访问路径 -->
<a :href="url + '?id=' + user.id">官网查看详情</a>
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: '.app',
data: {
arr: ['张三','李四','王五'],
list: [
{id: 'u001' , username: '张三' , age: 18},
{id: 'u002' , username: '李四' , age: 19},
{id: 'u003' , username: '王五' , age: 20}
],
url: 'http://www.czxy.com'
}
})
</script>
结果展示：
2.4 属性绑定 – 普通属性
<!--完整写法-->
<标签 v-bind:属性名=””></标签>
<!--省略写法, v-bind可以省略 -->
<标签 :属性名=””></标签>
1.如果需要显示data区域的数据,直接写. 例如: url
2.如果需要显示普通字符串,需要单引号. 例如: ‘?username=jack’
3.data区域的数据和普通字符串可以通过+连接
示例：
<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>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<a href="url">第一个传智专修学院官网</a> <br>
<a v-bind:href="url">第二个传智专修学院官网</a> <br>
<a :href="url">第三个传智专修学院官网</a> <br>
<a :href="url + '?uid=' + uid">第四个传智专修学院官网</a>
</div>
</body>
</html>
<script>
new Vue({
el: '.app',
data: {
url: 'http://www.czxy.com',
uid: 'u001'
}
})
</script>
结果展示：
2.5 属性绑定 – class属性 : v-bind:class
方式1: 字符串,必须使用单引号
<标签 v-bind:class=”’类名’”></标签>
方式2: 对象,key是类名; value是Boolean值,是否显示. (对象数据可以在data区域)
<标签 v-bind:class=”{’类名’:true , ’类名2’ : false}”></标签>
方式3: 数组,相当于’方法2’的简化版,所有都是true
<标签 v-bind:class=”[’类名’, ’类名2’]”></标签>
示例：
<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>Document</title>
<script src="./js/vue.js"></script>
<style>
.one{
border: 5px solid pink;
display: inline-block;/*将span转换成行内块，使宽width有范围*/
height: 200px;
width: 200px;
}
.two{
font-size: 40px;
color: red;
}
</style>
</head>
<body>
<div id="app">
<span class="one two">嗯嗯</span>
<span :class="c1">哦哦</span>
<!-- 控制属性 -->
<span :class="{'one':true,'two':false}">呵呵</span>
<!-- 数组 -->
<span :class="['one',false ? 'two' : '']">呃呃</span>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
c1: 'one two'
}
})
</script>
结果展示：
2.6 属性绑定 – style属性 ： v-bind:style
方式1: 对象, key样式名, value样式值 .
//key和value需要使用单引号
//key可以不使用单引号,需要将含-命名的属性进行驼峰命名 例如:abc-def 写成 abcDef
<标签 v-bind:style=”{’样式名’:’样式值’, ’样式名2’ : ’样式值2’}”></标签>
方式2: 数组, 运行绑定多个对象
<标签 v-bind:class=”[对象名, 对象名2]”></标签>
示例：
<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>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 传统 -->
<div style="height: 100px; border: 5px solid pink;">嗯嗯</div> <br>
<!-- key : value -->
<div :style="{'height':'100px','border': '5px solid pink'}">哦哦</div> <br>
<!-- 变量 -->
<div :style="{'height':'100px','border': s1}">呃呃</div> <br>
<!-- 对象 -->
<div :style="[obj]">呵呵</div>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
s1: '5px solid red',
obj: {
'height':'100px',
'border':'5px solid black'
}
}
})
</script>
结果展示：
2.7 控制语句：v-show & v-if
<!--控制标签是否显示, 通过display控制显示或隐藏 -->
<标签 v-show=”true|false”></标签>
<!--控制标签是否存在 -->
<标签 v-if=”true|false”></标签>
示例：
<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>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 控制标签是否显示, 通过display控制显示或隐藏 通过css样式控制，在浏览器的源码中可以看见-->
<div v-show="flag1">
v-show标签体内容
</div>
<!-- 控制标签是否存在 通过vue控制 如果不存在浏览器源码不可看-->
<div v-if="flag2">
v-if标签体内容
</div>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
flag1: true,
flag2: false
}
})
</script>
结果展示：
2.7.1案例： 点击隐藏显示切换
代码：
<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>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 控制标签是否显示, 通过display控制显示或隐藏 -->
<div v-show="flag1">
v-show标签体内容
</div>
<input type="button" @click="flag1 = !flag1" value="显示/隐藏">
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
flag1: true
}
})
</script>
结果展示：
2.8 表单数据绑定：v-model
- 通过 v-model 可以完成数据双向绑定.
- 数据data区域 绑定 视图区域, 如果data数据区域的数据发生改变, 自动更新表单标签的显示
- 视图区域 绑定 数据data区域 , 如果表单标签的数据发生改变,自动更新data区域存放的数据.
<表单元素标签 v-model=”data区域属性名”>
示例： 数据绑定--变量
<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>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model 用于数据双向绑定
数据data区域
视图区域： 展示区域 app
-->
内容： {{username}} <br> <!--单向绑定-->
输入: <input type="text" v-model="username"> <!--双向绑定 数据区域绑定到视图区域-->
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
username: 'jack'
}
})
</script>
结果展示：
示例： 数据绑定--对象
代码：
<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>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
用户名: <input type="text" v-model="user.username"> <br>
密码: <input type="password" v-model="user.password"> <br>
年龄: <input type="number" v-model="user.age"> <br>
性别: <input type="radio" value="男" v-model="user.sex">男
<input type="radio" value="女" v-model="user.sex">女 <br>
生日: <input type="datetime-local" v-model="user.birthday"><br>
爱好: <input type="checkbox" value="抽烟" v-model="user.hobby">抽烟
<input type="checkbox" value="喝酒" v-model="user.hobby">喝酒
<input type="checkbox" value="烫头" v-model="user.hobby">烫头 <br>
学历: <select v-model="user.edu">
<option value=" ">请选择</option>
<option value="高中">高中</option>
<option value="大学">大学</option>
<option value="博士">博士</option>
</select><br>
描述: <textarea cols="30" rows="10" v-model="user.desc"></textarea> <br>
内容展示: {{user}}
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
user: {
hobby: []
}
}
})
</script>
结果展示：
三、事件操作
3.1事件绑定: v-on:事件名
- vue 运行通过 v-on:xxx 给标签绑定指定的事件
<!--完整写法-->
<标签 v-on:事件名=”函数名”></标签>
<!--简化写法-->
<标签 @事件名=”函数”></标签>
<!--常见事件-->
<标签 v-on:click=”函数”> </标签> //点击事件
<标签 v-on:focus=”函数”> </标签> //获得焦点事件
<标签 v-on:blur=”函数”> </标签> //失去焦点事件
- 在绑定事件时,使用到了”函数”,需要在vue中通过methods 定义函数
<script>
new Vue({
el: '#app',
methods: {
函数名1 : function(){...}, //匿名函数
函数名2 : () => {...}, //箭头函数
函数名3(){...} //简写方式
},
})
</script>
示例：
<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>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-on:事件名="函数名" -->
<input type="button" v-on:click='show' value="点我" /> <br>
<!-- 简写方式： @事件名="函数名" -->
<input type="button" @click='show' value="点我" />
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
//show: function(){} //匿名函数
//show:()=>{} //箭头函数
show(){ //es6 对象简写
alert('嗯嗯')
}
}
})
</script>
结果展示：
3.2 综合案例-vue查询所有
代码：
<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>Document</title>
<script src="./js/axios.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="查询所有" @click="selectAll"> <br>
<table border="1">
<tr>
<td>编号</td>
<td>用户名</td>
<td>密码</td>
<td>昵称</td>
<td>邮箱</td>
<td>电话</td>
<td>生日</td>
<td>性别</td>
<td>状态</td>
<td>描述</td>
<td>操作</td>
</tr>
<tr v-for="(user,index) in userList">
<td>
<input type="text" name="uid" :value="user.uid">
</td>
<td>
<input type="text" name="username" :value="user.username">
</td>
<td>
<input type="password" name="password" :value="user.password">
</td>
<td>
<input type="text" name="name" :value="user.name">
</td>
<td>
<input type="email" name="email" :value="user.email">
</td>
<td>
<input type="number" name="telephone" :value="user.telephone">
</td>
<td>
<input type="datetime-local" name="birthday" :value="user.birthday">
</td>
<td>
<input type="text" name="sex" :value="user.sex">
</td>
<td>
<input type="number" name="state" :value="user.state">
</td>
<td>
<input type="text" name="code" :value="user.code">
</td>
<td>
<a href="#">删除</a>
<a href="#">详情</a>
<a href="#">修改</a>
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
userList:[]
},
methods: {
async selectAll(){
//发送ajax 查询所有
var url = 'http://localhost:8081/user'
//从response中解构 data
let {data} = await axios.get(url)
//将查询结果赋值给data区域的变量userList
this.userList = data
}
},
})
</script>
结果展示：
扫一扫
1833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
