Vue.js入门及其常用指令
- Angular诞生于2009年，是由谷歌公司创建出来的框架；
- React诞生于2013年，是由facebook公司创建出来的框架；
- Vue诞生与2014年，是由中国在校学生尤雨溪创建出来的框架， 是一套用于构建用户界面的渐进式框架；
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id = "app">
<h1>赵亚军今年{{age}}岁了！</h1>
</div>
</body>
</html>
<script language="JavaScript">
//当引入vue的程序包后，Vue框架会对外暴露一个vue的构造函数
//通过vue的构造函数可以创建vue的实例
var vm = new Vue({
//el 挂载点，将vue实例与结构层中的标签相联系
el:"#app",
//vue实例的数据来源
data: {
age: 28
}
});
//修改属性age的值
vm.age=18;
</script>
效果图
v-text:可以修改标签的文本内容；
v-html:可以修改标签的文本内容；
v-text和v-html的区别：当vue的data中有标签时，v-text不会对标签进行解析，而v-html会对标签进行解析；
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>vue指令v-text</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>v-text指令是修改标签文本的！！！</h1>
//v-text指令不会解析data中的标签，而是直接输出
<p v-text="msg">123456789</p>
<hr/>
<p>{{msg}}</p>
<hr/>
//v-html指令会将vue的data中的标签进行解析
<p v-html="msg"></p>
</div>
</body>
</html>
<script>
var vm = new Vue({
//挂载
el:"#app",
//数据
data:{
msg:"<a href='https://www.baidu.com'>百度</a>"
}
});
</script>
效果图：
2.v-show指令：控制标签的显示与隐藏，其底层原理是使用的css的display属性进行控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show指令</title>
<!--引包-->
<script src = "vue.min.js" ></script>
</head>
<body>
<div id="app">
<ul>
<li>吃饭</li>
<li v-show="false">睡觉</li>
<li>打豆豆</li>
</ul>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#app"
});
</script>
效果图
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>选项卡练习</title>
6 <script src="vue.min.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <button @click="select('军事')">军事</button>
11 <button @click="select('新闻')">新闻</button>
12 <button @click="select('政治')">政治</button>
13 <ul v-show="'军事'==info">
14 <li>军事信息军事信息</li>
15 <li>军事信息军事信息</li>
16 <li>军事信息军事信息</li>
17 <li>军事信息军事信息</li>
18 <li>军事信息军事信息</li>
19 </ul>
20 <ul v-show="'新闻'==info">
21 <li>新闻信息新闻信息</li>
22 <li>新闻信息新闻信息</li>
23 <li>新闻信息新闻信息</li>
24 <li>新闻信息新闻信息</li>
25 <li>新闻信息新闻信息</li>
26 </ul>
27 <ul v-show="'政治'==info">
28 <li>政治信息政治信息</li>
29 <li>政治信息政治信息</li>
30 <li>政治信息政治信息</li>
31 <li>政治信息政治信息</li>
32 <li>政治信息政治信息</li>
33 </ul>
34 </div>
35 </body>
36 </html>
37 <script>
38 var vm = new Vue({
39 el:"#app",
40 data:{
41 info:"新闻"
42 },
43 //编写函数的地方
44 methods:{
45 select(param){
46 vm.info = param;
47 }
48 }
49 })
50 </script>
效果图
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>v-if指令的使用</title>
6 <script src="vue.min.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <ul>
11 <p>性别:</p>
12 <li v-if="'男'==info">男</li>
13 <li v-else-if="'女'==info">女</li>
14 <li v-else>未知</li>
15 </ul>
16 </div>
17 </body>
18 </html>
19 <script>
20 var vm = new Vue({
21 //挂载点
22 el:"#app",
23 data:{
24 info:"123"
25 }
26 });
27 </script>
效果图
4.v-for指令
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>v-for指令</title>
6 <script src="./vue.min.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <h1>常用指令v-for</h1>
11 <!--v-for循环n次，输出文本内容-->
12 <h2 v-for="item in 3">我是二级标题</h2>
13 <hr/>
14 <!--v-for便利输出数组的值和下标-->
15 <ul>
16 <li v-for="(item,index) in arr">{{index}}-----{{item}}</li>
17 </ul>
18 <hr/>
19 <!--九九乘法表-->
20 <table border="1">
21 <tr v-for="row in 9">
22 <td v-for="col in 9" v-show="row >= col">{{col}}*{{row}} = {{row * col}} </td>
23 </tr>
24 </table>
25 </div>
26 </body>
27 </html>
28 <script>
29 var vm = new Vue({
30 el:"#app",
31 data:{
32 arr:['吃饭','睡觉','打豆豆']
33 }
34 });
35 </script>
效果图
5.v-for指令练习，单击按钮可添加爱好，并在下面显示出来
1 <html lang="en">
2 <head>
3 <meta charset="UTF-8">
4 <title>v-for指令练习</title>
5 <script src="./vue.min.js"></script>
6 </head>
7 <body>
8 <div id="app">
9 爱好：
10 <p>
11 <input type="text" v-model="hobby"><button @click="add()">添加一个爱好</button>
12 </p>
13 <ul>
14 <li v-for="item in arr">{{item}}</li>
15 </ul>
16 </div>
17 </body>
18 </html>
19 <script>
20 var vm = new Vue({
21 el:"#app",
22 data:{
23 arr:['吃饭','睡觉','打豆豆'],
24 hobby:'',
25 },
26 methods:{
27 add(){
28 vm.arr.push(this.hobby);
29 em.hobby = '';
30 }
31 }
32 });
33 </script>
效果图
6.v-on指令：vue给标签绑定事件的指令，其简写方式为“@”
1 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta charset="UTF-8">
4 <title>v-on指令</title>
5 <script src="./vue.min.js"></script>
6 </head>
7 <body>
8 <div id="app">
9 <p>我的小计数器{{count}}</p>
10 <button v-on:click="add">单击我+1</button>
11 <button @click="minus">单击我-1</button>
12 <hr/>
13 <button v-on:mouseenter="mytest">鼠标移上来触发</button>
14 </div>
15 </body>
16 </html>
17 <script>
18 var vm = new Vue({
19 el:"#app",
20 data:{
21 count:"1"
22 },
23 methods:{
24 add(){
25 this.count++;
26 this.count = this.count>= 10 ? 10 : this.count;
27 },
28 minus(){
29 this.count--;
30 this.count = this.count <= -5 ? -1000000 : this.count;
31 },
32 mytest(){
33 alert("鼠标移到我上面啦。。。。。");
34 }
35 }
36 });
37 </script>
效果图
7.v-model指令：v-model指令是双向绑定指令
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model指令</title>
<script src="./vue.min.js"></script>
</head>
<body>
<div id="app">
<p>输入的内容：{{msg}}</p>
<input type="text" v-model="msg"/>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"么么哒么么哒..."
}
});
</script>
效果图
Vue.js入门及其常用指令的更多相关文章
- vue 快速入门、常用指令（1）
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站 中文:https://cn.vuejs. ...
- vue.js介绍，常用指令，事件，以及制作简易留言版
一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...
- Vue.js学习（常用指令）
Vue.js的指令是以v-开头,它们用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性. 本文参考:htt ...
- Vue.js入门
之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱 ...
- Vue.js入门指南（一）
前 言 JRedu 之前用过一段时间的AnglarJS 1.X,在低版本的AngularJS中,脏值检查在变量增多的情况下会影响程序的响应速度.后期的2.X和更高版本在脏值检查等问题上做了优化, ...
- Vue.js 入门：从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- Vue.js入门（一）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...
随机推荐
- Python3.x 基础练习题100例（01-10）
练习01: 题目: 有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 分析: 可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. ...
- iOS之CoreBluetooth
思路 手机与设备间的通讯方式CoreBluetooth是比较常见且通用的.在iOS开发中需明晰以下几点 蓝牙4.0最多可联机7个设备,iPhone6以上都是蓝牙4.0 两台iPhone并不直接通过蓝牙 ...
- CentOS安装libxml2报undefined reference to `gzopen64'
主要是记录一下安装时候踩的坑 CentOS在make libxml2的时候,会报这个错误 ./.libs/libxml2.so: undefined reference to `gzopen64' c ...
- FreeBSD 12.2 vmware 虚拟机镜像 bt 种子
安装了 KDE5 火狐浏览器 Fcitx 输入法 并进行了中文设置 替换软件源为国内可用. VirtualBox虚拟机也可以用 magnet:?xt=urn:btih:E88885631B57426 ...
- 【odoo14】第十四章、CMS网站开发
第十四章.CMS网站开发** Odoo有一个功能齐全的内容管理系统(CMS).通过拖放功能,你的最终用户可以在几分钟内设计一个页面,但是在Odoo CMS中开发一个新功能或构建块就不是那么简单了.在本 ...
- Java学习历程记录(一)
一.类与对象 1.创建类 创建一个学生类.并且创造成员变量和方法 public class student{ String name: int age: public void study(参数列表) ...
- MD摘要算法
import static org.junit.Assert.*; import java.security.MessageDigest; //消息摘要 public class MDCoder { ...
- 利用eigen库简单实现矩阵功能
eigen是目前运行速度较快的C++矩阵运算库,而且其轻便小巧安装方便的特点简直是吸引人啊!特做此笔记,记录一下这个安装简单.体积轻巧.功能强大的C++库. 1. Download and Insta ...
- CSS行内元素盒模型
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- PaddleOCR详解
@ 目录 PaddleOCR简介 环境配置 PaddleOCR2.0的配置环境 Docker 数据集 文本检测 使用自己的数据集 文本识别 使用自己的数据集 字典 自定义字典 添加空格类别 文本角度分 ...