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 ...
随机推荐
- 解决QQ能正常上网但是网页无法打开的办法
最近网页老师稀里糊涂的打不开,在这里附上参考的行之有效的办法. https://baijiahao.baidu.com/s?id=1645363213803553998&wfr=spider& ...
- join为啥会阻塞主线程？
join使用 上篇我们介绍了CountDownLatch,顺便说到了Thread中的join方法! import java.util.concurrent.TimeUnit; /** * @autho ...
- 【HTB系列】靶机Netmon的渗透测试
出品|MS08067实验室(www.ms08067.com) 本文作者:是大方子(Ms08067实验室核心成员) 总结和反思: win中执行powershell的远程代码下载执行注意双引号转义 对po ...
- 详解JavaScript中的原型
前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...
- Java-for循环打印九九乘法表
Java打印九九乘法表 public class forDemo04 { public static void main(String[] args) { //练习3:打印九九乘法表 /* 1*1=1 ...
- Java 并发编程小册整理好了
Java 有并发,并发知识之大,一口吃不下 这曾是我不愿意触碰的知识角 多次一头扎进并发,无功而返 为应对面试,临时苦苦记忆,不成体系 这一次我决定从基础开始,攻克它 12,0000 字 68Mb 高 ...
- FreeBSD——艺术、科学、哲学概论
FreeBSD--艺术.科学.哲学概论→→→→→概论: 信息都有一定的时效性.那么现在是什么时间?现在已经发布了 FreeBSD 12.2,距离下一个版本 13.0 还有约 4 个月. 『约定』 使用 ...
- 【死磕JVM】一道面试题引发的“栈帧”！！！
前言 最近小农的朋友--小勇在找工作,开年来金三银四,都想跳一跳,找个踏(gao)实(xin)点的工作,这不小勇也去面试了,不得不说,现在面试,各种底层各种原理,层出不穷,小勇就遇上了这么一道面试题, ...
- IDApro 快捷键
https://www.hex-rays.com/wp-content/static/products/ida/idapro_cheatsheet.html File Operations Parse ...
- 依赖反转原则DIP 与使用了Repository模式的asp.net core项目结构
DIP 依赖反转原则 Dependency Inversion Principle 的定义如下: 高级别的模块不应该依赖于低级别的模块, 他们都应该依赖于抽象. 假设Controller依赖于Repo ...