Vue保姆级入门教程
Posted 芝士就是Power
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue保姆级入门教程相关的知识，希望对你有一定的参考价值。
提示：以下是本篇文章正文内容，下面案例可供参考
一、Vue
1.1 Vue介绍
- Vue官网
- 动态构建用户界面的渐进式 javascript 框架
- 作者: 尤雨溪
1.2 Vue特点
- 遵循 MVVM 模式
- 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
- 它本身只关注 UI, 也可以引入其它第三方库开发项目
1.3 Vue周边库
- vue-cli: vue 脚手架
- vue-resource
- axios
- vue-router: 路由
- vuex: 状态管理
- element-ui: 基于 vue 的 UI 组件库(PC 端)
二、初始Vue
2.1 插值语法
- 功能: 用于解析标签体内容
- 语法: {{xxx}} ，xxxx 会作为 js 表达式解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 创建一个存放vue数据的容器 -->
<div id="root">
<!-- {{xxx}} 可以直接获取vue实例中data里相对应的数据 -->
{{name}}
</div>
<script>
// 创建一个vue实例对象
let x=new Vue({
//对应的容器id,也可以是类选择器
el:"#root",
//存放的数据
data:{
name:"zhangsan",
url:"www.baidu.com",
}
});
</script>
</body>
</html>
2.2 指令语法
2.2.1 v:bind / 简写 : 指令 单向数据绑定
- 功能: 解析标签属性、解析标签体内容、绑定事件
- 举例：v-bind:href = ‘xxxx’ ，xxxx 会作为 js 表达式被解析 xxx为数字时,不会被当做String类型解析
- 说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 创建一个存放vue数据的容器 -->
<div id="root">
<a v-bind:href="url">跳转页面(会获取实例中data里面的url数据)</a>
</div>
<script>
// 创建一个vue实例对象
let x=new Vue({
//对应的容器id,也可以是类选择器
el:"#root",
//存放的数据
data:{
name:"zhangsan",
url:"www.baidu.com",
}
});
</script>
</body>
</html>
2.2.2 v-model 双向数据绑定
- 语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”
- 特点：数据不仅能从 data 流向页面，还能从页面流向 data
- 备注：v-model:value可以简写为v-model,因为v-model默认收集的就是value值
- 注意：v-model只能应用在表单类元素(输入类元素 input,select 等)
<input type="text" v-model:value="name">
2.3 事件处理
语法：v-on:xxx 或 @xxx 绑定事件,十中xxx是事件名 例： v-on:click 单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 创建一个存放vue数据的容器 -->
<!-- 事件绑定的两种方法 -->
<span id="cli" v-on:click="showInfo">点我</span>
<span @click="showInfo($event,66)">点我</span>
</div>
<script>
// 创建一个vue实例对象
let x=new Vue({
//对应的容器id,也可以是类选择器
el:"#root",
//存放的数据
data:{
name:"zhangsan",
url:"www.baidu.com",
},
methods: {
showInfo(){
alert(1);
},
showInfo(event,number){
console.log(event,number);
}
},
});
</script>
</body>
</html>
2.4 事件修饰符
- 加在事件处理的后面 以 . 开始 加
1. prevent：阻止默认事件(常用)
<a href="www.baidu.com" @click.prevent="showInfo($event,66)">点我阻止默认事件</a>
2. stop：阻止事件冒泡(常用)
3. once：事件只触发一次(常用)
2.5 键盘事件
- Vue中常用的按键别名 @keyup.xxx=“方法名”/@keydown.xxx=“方法名” xxx代表下面的按键别名
1. 回车=> enter
2. 删除=> delete(捕获“删除”和“退格”键)
3. 退出=> esc
4. 空格=> space
5. 换行=> tab(特殊,必须配合@keydown使用)
6. 上=> up
7. 下=> down
8. 左=> left
9. 右=>right
- 使用按键别名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 创建一个存放vue数据的容器 -->
<div id="root" v-bind:href="url">
键盘事件：<input type="text" @keyup.enter="keycode">
</div>
<script>
// 创建一个vue实例对象
let x=new Vue({
//对应的容器id,也可以是类选择器
el:"#root",
//存放的数据
data:{
name:"zhangsan",
url:"www.baidu.com",
},
methods: {
keycode(e){
//打印文本的值
console.log(e.target.value);
}
},
});
</script>
</body>
</html>
2.6 计算属性
计算属性：
1. 定义：要用的属性不存在，要通过已有属性计算得来
2. 原理：底层借助了Object.defineproperty方法提供的getter和setter
3. get函数什么时候执行？
(1). 初次读取时会执行一次
(2). 当依赖的数据发生改变时会被再次调用。
4. 优势：与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5. 备注：
(1). 计算属性最终会出现在vm上,直接读取使用即可。
(2). 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">
firstName：<input type="text" v-model="firstName"><br>
lastName：<input type="text" v-model="lastName"><br>
全名：<span> {{fullName}} </span>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:"张",
lastName:"三",
},
computed: {
// 直接当做普通属性调用不加括号
// 任何data中数据变化立即重新计算
// 计算属性会缓存
fullName:{
//get有什么用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候用？ 1.初次读取fullName时候。 2.所依赖的数据发生变化时。
get(){
return this.firstName+"-"+this.lastName;
}
set(value){
console.log(属性被修改);
const arr=value.split["-"];
this.firstName=arr[0];
this.lastName=arr[1];
}
}
},
})
</script>
</body>
</html>
- 计算属性简写：只考虑展示数据,不考虑修改数据时,可以使用
<body>
<div id="root">
firstName：<input type="text" v-model="firstName"><br>
lastName：<input type="text" v-model="lastName"><br>
全名：<span> {{fullName}} </span>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:"张",
lastName:"三",
},
computed: {
// 直接当做普通属性调用不加括号
// 任何data中数据变化立即重新计算
// 计算属性会缓存
// fullName:{
// //get有什么用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
// //get什么时候用？ 1.初次读取fullName时候。 2.所依赖的数据发生变化时。
// get(){
// return this.firstName+"-"+this.lastName;
// },
// set(value){
// console.log(属性被修改);
// const arr=value.split["-"];
// this.firstName=arr[0];
// this.lastName=arr[1];
// }
// },
//上面fullName的简写 可以直接写要展示的方法即可
fullName(){
return this.firstName+"-"+this.lastName;
}
},
})
</script>
</body>
2.7 监听属性
<script>
new Vue({
el: "#root",
data: {
firstName: "张",
lastName: "三",
},
watch: {
//语法
/** 1.
* 要监视的对象:{
* handler(newVal,oldVal){
*
* }
* }
* 2.
* 要监视的对象:(newVal,oldVal)->{
* 业务
* }
**/
firstName: (newVal, oldVal) => {
console.log(newVal, oldVal);
},
lastName: {
immediate:true, //初始化时让handler调用一下
handler(newVal, oldVal) {
console.log(newVal, oldVal);
}
},
//监测属性 简写
firstName(newVal, oldVal){
console.log(newVal, oldVal);
}
},
})
</script>
2.8 计算属性与监听属性之间的区别
- computed和watch的区别
1. computed能完成的功能,watch都可以完成。
2. watch能完成的功能,computed不一定能完成,例如：watch可以进行异步操作。
- 两个重要的小原则：
1. 所被Vue管理的函数,最好写成普通函数,这样this的指向才是 vm 或 组件实例对象
2. 所有不被Vue管理的函数(定时器回调函数,ajax的回调函数,Promise的回调函数),最好写成箭头函数,这样this的指向才是 vm 或 组件实例对象
2.9 条件渲染
<!-- v-show做条件渲染：true显示标签，false给标签加上display:none隐藏标签 -->
<a href="#" v-show="true">超链接</a>
<a href="#" v-show="false">超链接</a>
<!-- v-if做条件渲染：true显示标签，false给标签删除 -->
<a href="#" v-if="true">超链接</a>
<a href="#" v-if="false">超链接</a>
2.10 条件渲染
<body>
<div id="root">
<ul>
<!-- 需要遍历哪个标签,v-for遍历就加在哪个标签身上 -->
<!-- key放在虚拟DOM中进行diff算法运行时用到,key最好使用数据中的唯一表示,防止出现意想不到的BUG）-->
<!-- 若不写key,默认是采用index索引值当做key-->
<li v-for="(person,index) in persons" :key="person.id">
{{person.name}}--{{person.age}}-{{index}}--{{person.id}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
persons:[
{id:"001",name:"张三",age:16},
{id:"002",name:"李四",age:17},
{id:"003",name:"王五",age:18},
]
}
})
</script>
</body>
2.11 收集表单数据的细节
<!--
收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
-->
<body>
<!--
收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
-->
<!-- 准备好一个容器-->
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码：<input type="password" v-model="userInfo.password"> <br/><br/>
年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
爱好：
学习<input typeVue保姆级入门教程