[Web 前端] 033 Vue 的简单使用
0. 方便起见，定个轮廓
- 不妨记下方的程序为
code1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-xxx</title>
<script src="./vue.js"></script>
<style>
/* d */
</style>
</head>
<body>
<div id="app">
<form>
<!-- a -->
</form>
<!-- c -->
</div>
<script>
// b
</script>
</body>
</html>
1. v-model
- 一般用于表单的指令
- 将表单的 value 和数据模型当中的变量进行绑定
- 通常用来实现数据的双向绑定
举例
- 把
code1的 a 用下方语句替换
<!-- 1. 对普通文本框的值的设置 -->
<input type="text" name="username" v-model="msg"> {{msg}} <br>
<!-- 2. 单选框与多选框 -->
<input type="radio" name="gender" v-model="gender" value="1">
<input type="radio" name="gender" v-model="gender" value="0">
{{gender}} <br>
<input type="checkbox" name="live" value="1" v-model="live">
<input type="checkbox" name="live" value="2" v-model="live">
{{live}} <br>
<input type="checkbox" name="change" value="1" v-model="change">
<input type="checkbox" name="change" value="2" v-model="change">
<input type="checkbox" name="change" value="3" v-model="change">
{{change}} <br>
<select v-model="select">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select> {{select}}
- 把
code1的 b 用下方语句替换
new Vue({
el: "#app",
data: {
msg: "123",
gender: "1",
live: "",
change: ["2", "3"],
select: ""
}
});
2. v-for
- 循环
举例
- 把
code1的 c 用下方语句替换
<ul>
<!-- 1. v-for=""
此处一定要使用 "" -->
<li v-for="i in arr">{{i}}</li>
</ul>
<ul>
<!-- 2.
2.1 v,i 加不加括号均可
2.2 v,i 可以用别的变量替换
2.3 可以做简单的运算
2.4 :key="idx" 加与不加，影响不大，但是推荐加上 -->
<li v-for="v,idx in arr" :key="idx">{{v}} -> {{idx+1}}</li>
</ul>
<ul>
<!-- 3. 此处与 Python 的字典有所不同
3.1 key 与 value 顺序相反
3.2 有索引值，排在第三位 -->
<li v-for="v,k,idx in obj">{{k}} -> {{v}} -> {{idx}}</li>
</ul>
- 把
code1的 b 用下方语句替换
new Vue({
el: "#app",
data: {
arr: ["铅笔", "橡皮", "尺子", "圆规"],
obj: {
name: "张三",
gender: "1", // 一般地，男：1，女：0
length: "180cm"
}
}
});
3. v-if
- 显示和隐藏
- v-if
- v-else-if
- v-else
- 使用时，中间不能穿插别的元素
举例
- 把
code1的 c 用下方语句替换
<div class="box1" v-if="1<0">1</div>
<div class="box2" v-else-if="1==0">2</div>
<div class="box3" v-else>3</div>
<!-- 穿插一些 v-show
若判断一次即确定显示或隐藏，推荐使用 v-if
若频繁地显示与隐藏，推荐使用 v-show
-->
<div class="box2" v-show="true">4</div>
<div class="box2" v-show="false">5</div>
- 把
code1的 b 用下方语句替换
new Vue({
el: "#app",
data: {
}
});
- 把
code1的 d 用下方语句替换
div{
width: 200px;
height: 200px;
}
.box1{
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
4. 事件绑定
- v-on: 事件类型
- 简写：@事件类型
- 鼠标事件
- mouseout
- mouseover
- mousemove
- click
- dblclick
- 键盘事件
- keydown
- keyup
举例
- 把
code1的 c 用下方语句替换
<button v-on:click="al">单击</button> <br>
<button v-on:dblclick="al">双击</button> <br>
<button v-on:mouseover="al">鼠标移入</button> <br>
<button v-on:mouseout="al">鼠标移出</button> <br>
<input @keydown="down1"> <br>
<input @keydown.50="down2">
- 把
code1的 b 用下方语句替换
new Vue({
el: "#app",
data: {
msg: "ok",
},
// 主要用来写函数
methods: {
al: function(){
alert(this.msg);
},
down1: function(e){
// alert("你按下了键盘");
// console.log(e);
console.log(e.keyCode);
},
down2: function(e){
console.log("你按下了 2");
}
}
});
5. v-show
- 与元素的 display 属性有紧密的关联
举例
- 把
code1的 c 用下方语句替换
<button @click="show">show</button>
<div class="box1" v-show="flag"></div>
- 把
code1的 b 用下方语句替换
new Vue({
el: "#app",
data: {
flag: false,
},
methods: {
show: function(){
// this.flag = true;
this.flag = ~this.flag; // this.flag = !this.flag; 也行
}
}
});
- 把
code1的 d 用下方语句替换
.box1{
width: 200px;
height: 200px;
background: red;
}
[Web 前端] 033 Vue 的简单使用的更多相关文章
- EasyDSS RTMP流媒体服务器web前端：vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端：vue组件之间的传值，父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- [Web 前端] 032 vue 初识
目录 0. 先下载 1. 先写个轮廓 2. 牛刀小试 2.1 例子 1 2.2 例子 2 3. 模板语法 上例子 4. 文本指令 上例子 5. 属性操作 上例子 6. 样式操作 上例子 类名的操作 s ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- web前端网页开发一般过程
看见很多新手同学前端开发,效率比较慢.总是拿起代码就敲,不分析,没有逻辑,反而使效率变慢.所谓磨刀不误砍柴工,有一个良好的过程,才是最主要的: 1.分析平面效果图,在草稿纸上画出基本结构图 2.建立项 ...
- Web前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
- （转）web前端知识精简
Web前端技术由 html.css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学 ...
- web 前端安全问题
转载自:https://segmentfault.com/a/1190000006672214?utm_source=weekly&utm_medium=email&utm_campa ...
- Web前端知识体系
看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...
随机推荐
- java课堂动手测试2
测试一 编写一个方法,使用以上算法生成指定数目(比如1000个)的随机整数. 程序源代码 import java.util.Random;import java.util.Scanner; publi ...
- LAMP网站架构方案解剖
LAMP网站架构方案解剖 2011-03-18 10:46 月光 网络转载 字号:T | T 网站架构是比较考研技术的一件事,所以要对一种好用的工具,那么网站架构就会事半功倍,LAMP具有通用.跨平台 ...
- Hibernate方法save、update、merge、saveOrUpdate及get和load的区别
在看这几个方法区别之前,有必要了解hibernate实体对象的三种状态,点击查看 http://www.cnblogs.com/Y-S-X/p/8345754.html 一.update 和 merg ...
- Vue3.0 Function API---------引用
1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...
- Shell-07数组与字符串
Shell-07数组与字符串 数组 数组说白了就是一段连续的变量,一段连续的内存存储空间 解决:变量过多的问题:在同类的变量中,我们不需要去定义多个名字,而是以数组的方式来定义:(列表) 数组名 索引 ...
- Springboot 构建http服务，返回的http行是'HTTP/1.1 200' 无状态码描述 客户端解析错误
————————————————————————————————————————— *** 响应的数据格式 HTTP/1.1 200 OK Server: Apache-Coyote/1.1 A ...
- Redis、Nginx加入启动命令
1.redis加入系统启动命令 vim /etc/init.d/redis #!/bin/sh #chkconfig: 2345 80 90 # Simple Redis init.d script ...
- 微服务SpringCloud系列
https://my.oschina.net/hmilyylimh?tab=newest&catalogId=5703366
- Oracle JET Model 数据获取与使用
Oracle JET 应用程序数据可以来自生成 JSON 数据的任何 Web 数据源,例如 REST 服务,服务器发送事件(SSE)或 WebSocket .此外,Oracle JET 还提供了基于 ...
- nodejs 文件操作
前言: nodejs 自带的文件操作的模块 fs 就是对文件的增删查改: 就像我们用的服务器,我们没有办法在运行的文件上进行一直的修改,因为他不向浏览器,刷新后我们的文件会自己修改: 如果想要更改我 ...