vue快速复习手册
1.基本使用
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Vue的基本使用</title>
<!-- 01.导包 -->
<script src="./js/vue.js"></script>
<script>
// 03. 监听
window.onload = function () {
// 04:创建vue
var vm = new Vue({
// 绑定操作对象
el:'.box',
data: {
content: 'Vue的基本使用'
}
});
}
</script>
</head>
<body>
<!-- 02:div标签(设置模板变量)-->
<div class="box">{{content}}</div> </body>
</html>
2.基本语法
2.1.操作数据
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>操作数据</title>
<script src="./js/vue.js"></script>
<script>
window.onload = function () {
// uve对象
var vm = new Vue({
el:'.box',
data:{
content:'操作数据'
}
});
}
</script>
</head>
<body> <div class="box">
<p>{{content}}</p>
</div>
</body>
</html>
2.2.修改属性
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>02-操作数据</title>
<script src="./js/vue.js"></script>
<script>
window.onload = function () {
// uve对象
var vm = new Vue({
el:'.box',
data:{
content:'操作数据',
linkdata:'百度链接',
url:'http://www.baidu.com'
}
});
}
</script>
</head>
<body>
<div class="box">
<!-- 第一种. v-bind: -->
<!-- <a v-bind:href="url" target="_blank">{{linkdata}}</a> -->
<!-- 第二种. : -->
<a :href="url" target="_blank">{{linkdata}}</a>
<p>{{content}}</p>
</div>
</body>
</html>
2.3.调用方法
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>操作数据</title>
<script src="./js/vue.js"></script>
<script>
window.onload = function () {
// uve对象
var vm = new Vue({
// 标签对象
el:'.box',
// 数据和属性
data:{
content:'操作数据',
linkdata:'百度链接',
url:'http://www.baidu.com',
count:0
},
// 方法
methods: {
fnAddClick:function () {
// 跨域
this.count += 1;
}
} });
}
</script>
</head>
<body>
<div class="box">
<!-- 第一种.v-on: -->
<!-- <button v-on:click='fnAddClick'>计数器:{{count}}</button> -->
<!-- 第二种.@ -->
<button @click='fnAddClick'>计数器:{{count}}</button>
<a v-bind:href="url" target="_blank">{{linkdata}}</a>
<p>{{content}}</p>
</div>
</body>
</html>
小结：v-bind:简写: v-on: 简写@
3.条件渲染
关键字：v-if，v-else-if，v-else，v-show
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script src="./js/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:'.box',
data:{
flag:4
}
});
}
</script>
</head>
<body>
<div class="box">
<!-- 01:v-if -->
<!-- <p v-if='flag==1'>01:v-if</p> -->
<!-- 02:v-else-if -->
<!-- <p v-else-if='flag==2'>02:v-else-if</p> -->
<!-- 03:v-else-if -->
<!-- <p v-else-if='flag==3'>03:v-else-if</p> -->
<!-- 04:v-else -->
<!-- <p v-else>04:v-else</p> -->
<!-- 05:v-show -->
<!-- <p v-show='flag==3'>05:v-show</p> -->
</div>
</body>
</html>
小结：
1.v-show用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的。
2.注意在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突
4.列表渲染
关键字：普通列表，列表下标，有且只有一个对象，对象列表
<script>
window.onload = function () {
var vm = new Vue({
el:'.box',
data:{
// 01: 普通列表
itemList:[1, 2, 3, 4, 5],
// 02: 列表下标
indexList:['a','b','c','d'],
// 03: 有且只有一个对象
objData:{
name:'小明',
age:19
},
// 04: 对象列表
objList:[
{
name:'小明',
age:20
},
{
name:'小红',
age:21
}
]
}
});
}
</script>
普通列表
<li v-for='item in itemList'>{{item}}</li>
列表下标
<li v-for='(item,index) in indexList'>角标{{index}}==数值{{item}}</li>
有且只有一个对象
<li v-for='item in objData'>{{item}}</li>
<li v-for='(obj,key) in objData'>属性值{{obj}}-----属性名{{key}}</li>
对象列表
<li v-for='obj in objList'>属性值1:{{obj.name}}==属性值2:{{obj.age}}</li>
小结：该指令适用于任何html标签
5.表单输入绑定（双向数据绑定）
关键字：单行文本框、多行文本框、单选框、多选框、下拉框
<!-- 01.单行文本框 -->
<input type="text" v-model='content'>
<p>{{content}}</p> <!-- 02.多行文本框 -->
<textarea v-model='content'></textarea>
<p>{{content}}</p> <!-- 03.单选框 -->
<input type="radio" name="sex" value="男" v-model='content'>男
<input type="radio" name="sex" value="女" v-model='content'>女
<p>{{content}}</p> <!-- 04.多选框 -->
<input type="checkbox" name="lk" value="吃饭" v-model='like'>吃饭
<input type="checkbox" name="lk" value="睡觉" v-model='like'>睡觉
<input type="checkbox" name="lk" value="打豆豆" v-model='like'>打豆豆
<p>{{like}}</p> <!-- 05.下拉框 -->
<select name="addr" v-model='address'>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
<p>{{address}}</p>
小结：可以用 v-model 指令在表单<input><textarea><select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
6.ES6语法
关键字：语法介绍、变量声明、对象的简写、箭头函数
6.1.变量声明
let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关键字和var的区别是，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const申明的常量，不可修改。
var
console.log(iNum1);
// 在ES5中 声明变量使用var
var iNum1 = 10;
// 结果为:undefined, 因为使用 var 声明的变量, 有预解析
let
console.log(iNum1);
// 在ES6中 声明变量可以使用let
let iNum1 = 10;
// 查看后会发现报错:iNum1 is not defined, 因为使用let 声明的变量, 没有了预解析
const
const iNum1 = 10;
iNum1 = 20;
// 查看后会发现报错:Assignment to constant variable, 因为使用const声明的变量, 不允许重新赋值
6.2.ES6的对象的简写
ES5的写法
// ES5的对象写法
var oObj = {
name:'小明',
age:20,
fnGetName: function () {
alert(this.name);
}
}
// 调用
oObj.fnGetName();
或者
// 创建一个空对象
var oObj = {};
// 添加属性
oObj.name = '小明';
oObj.age = 20;
// 添加方法
oObj.fnGetName = function () {
alert(this.name);
}
// 调用
oObj.fnGetName();
ES6的写法（需要注意的是, 实现简写,有一个前提,必须变量名属性名一致）
// 定义两个变量
var name = '小明';
var age = 20;
// 创建对象
var oObj = {
name,
age,
fnGetName: function () {
alert(this.name);
}
};
// 调用
oObj.fnGetName();
6.3.ES6的箭头函数
1.定义函数新的方式：
// 无参数无返回值
var fnTest = ()=> {
alert('无参数无返回值');
}
// 一个参数无返回值
var fnTest = a => {
alert(a + b);
}
// 有参数有返回值
var fnTest = (a,b)=> {
return a + b;
}
2.改变this的指向
如果层级比较深的时候, this的指向就变成了window, 这时候就可以通过箭头函数解决这个指向的问题
// 定义一个对象
var oObj = {
name:'小明',
fnAlert: function () {
setTimeout(()=>{
alert(this.name);
}, 1000);
}
}
// 调用方法
oObj.fnAlert();
7.Vue对象实例生命周期
- beforeCreate
- vm对象实例化之前
- created
- vm对象实例化之后
- beforeMount
- vm将作用标签之前
- mounted(重要时机初始化数据使用)
- vm将作用标签之后
- beforeUpdate
- 数据或者属性更新之前
- updated
- 数据或者属性更新之后
完
vue快速复习手册的更多相关文章
- Unity 游戏框架搭建 2019 (十八~二十) 概率函数 & GameObject 显示、隐藏简化 & 第二章 小结与快速复习
在笔者刚做项目的时候,遇到了一个需求.第一个项目是一个跑酷游戏,而跑酷游戏是需要一条一条跑道拼接成的.每个跑道的长度是固定的,而怪物的出现位置也是在跑道上固定好的.那么怪物出现的概率决定一部分关卡的难 ...
- Github快速入门手册
最近在试用Github,开源的思想也让人觉得把一些经验分享出来是非常好的事情.附件是doc文件,如有需要请注意查收.希望能对你有帮助. GITHUB基于互联网的版本控制快速入门手册 如有不妥,欢迎指正 ...
- H3 BPM J.V10.6.1 安装及快速使用手册
直接进入地址下载:http://bbs.h3bpm.com/read.php?tid=3103&fid=30,需要注册. 按照文档"H3 BPM J.V10.6.1 安装及快速使用手 ...
- 2. Apache Axis2 快速学习手册之概览
这篇博文和大家一起学习下Apache Axis2 官方文档的快速指南篇 英文原文:http://axis.apache.org/axis2/java/core/docs/quickstartguide ...
- （私人收藏）[开发必备]最全JQuery离线快速查找手册（可查询可学习，带实例）
[开发必备]最全JQuery离线快速查找手册(可查询可学习,带实例) https://pan.baidu.com/s/16bUd4iA3p0c5RHbzaC60IQe4zh
- （私人收藏）[开发必备]最全Java离线快速查找手册（可查询可学习，带实例）
(私人收藏)[开发必备]最全Java离线快速查找手册(可查询可学习,带实例) https://pan.baidu.com/s/1L54VuFwCdKVnQGVc8vD1TQnwmj java手册 Ja ...
- vue 快速入门 系列 —— 虚拟 DOM
其他章节请看: vue 快速入门 系列 虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...
- vue 快速入门 系列
vue 快速入门(未完结,持续更新中...) 前言 为什么要学习 vue 现在主流的框架 vue.angular 和 react 都是声明式操作 DOM 的框架.所谓声明式,就是我们只需要描述状态与 ...
- vue 快速入门 系列 —— 初步认识 vue
其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...
随机推荐
- 痞子衡嵌入式：飞思卡尔i.MX RTyyyy系列MCU特性那些事（1）- 概览
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RTyyyy系列MCU的基本特性. ARM Cortex-M微控制器芯片厂商向来竞争激烈,具体可参看我的另一篇文章&l ...
- Linux 解压xz格式文件及安装xz
1.安装xz命令 # yum install epel-release -y # yum install xz -y 2.将xz文件解压为tar文件 # xz -d test.tar.xz 3.将ta ...
- ASP.NET MVC Action向视图传值之匿名类型
在使用ASP.NET MVC过程中想必大家都有遇到过一个问题就是我们的Action如何向视图传递匿名类型的值呢,如果不做特殊处理则无法实现. 接下来我们来看一个示例: 在我们的控制中: using S ...
- Linux-打包压缩命令
内容总结自<鸟哥的Linux私房菜>http://cn.linux.vbird.org/linux_basic/0240tarcompress.php 一.打包/压缩文件常见扩展名 *.g ...
- Java 网络编程初探
Java 网络编程 网络编程 网络编程:进行服务器端与客户端编程的开发操作实现. java.net:网络操作包 B/S结构: 浏览器/服务器模式(Browser/Server) 不在开发客户端代码 开 ...
- 我的第一个CCS工程
直接用别人已经弄好的例程,学习创建属于自己的工程,就发现还是有很多问题的: 首先是:1. 想加载头文件到include工程文件夹中却发现总是在Document文件夹中,很是纳闷,在网上搜了搜,发现时路 ...
- fastadmin安装定时插件报错 ZipArchive::extractTo(): Permission denied
环境linux上直接安装 如果你是在win开发号直接部署的应该是没问题 我是直接在linux安装的 这几天研了下fastadmin 想用他的定时可是在使用的时候报错 ZipArchive::e ...
- 如何在mysql数据库生成百万条数据来测试页面加载速度
1.首先复制一条sql 在复制前,需要确定该记录是否有主键 若无,则代码非常简单, "; 复制的表名↑ 粘贴的表名↑ ...
- 简述FreeCAD在vs2017下的编译与dxf导入
最近发现 FreeCAD 官方在发布 0.19_pre 时已提供 vs2017 x64的LibPack,现在就再来测试一下. 编译 下载 FreeCADLibs_12.1.2_x64_VC15.7z ...
- Less（5）
考查点:双查询报错注入 1.先判断注入类型 (1)首先看到要求,要求传一个ID参数,并且要求是数字型的:?id=1 (2)再输入?id=1' 显示报错,报错多了一个单引号 (3)再输入?id=1'' ...