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 ...
随机推荐
- 04.从0实现一个JVM语言系列之语义分析器-Semantic
从0实现JVM语言之语义分析-Semantic 源码github, 如果这个系列文章对您有帮助, 希望获得您的一个star 本节相关语义分析package地址 致亲爱的读者: 个人的文字组织和写文章的 ...
- （三）MySQL锁机制 + 事务
转: (三)MySQL锁机制 + 事务 表锁(偏读) 偏向MyISAM存储引擎.开销小,加锁快,无死锁,锁定粒度大,发生锁冲突的概率最高,并发最低. 查看当前数据库中表的上锁情况,0表示未上锁. sh ...
- 解决 DatePickerDialog 在 Android7.0 API24 上使用 AlertDialog.THEME_TRADITIONAL、AlertDialog.THEME_HOLO_DARK、AlertDialog.THEME_HOLO_LIGHT等样式时无法显示为 Spinner 样式的问题
DatePickerDemoForAndroid24 解决 DatePickerDialog 在 Android7.0 API24 上使用AlertDialog.THEME_TRADITIONAL.A ...
- OpenGL中的简单坐标系初看+VAO/VBO/EBO
你好,三角形 一: 关于坐标的问题 标准化设备坐标:输入的顶点数据就应该在标准化设备坐标范围里面即:x,y,z的值都在(-1-1)之间.在这个区间之外的坐标都会被丢弃. 1.1一旦顶点数据传入顶点着色 ...
- HDOJ-2896(AC自动机+文本串中出现了哪几个模板串)
病毒侵袭 HDOJ-2896 主要使用AC自动机解决,其次在query函数中改变一下,用来记录每个模板串出现的次数,还有insert函数中记录模板串的编号 需要注意最好使用结构体,而且不能一次性使用m ...
- Mock 框架 Moq 的使用
Mock 框架 Moq 的使用 Intro Moq 是 .NET 中一个很流行的 Mock 框架,使用 Mock 框架我们可以只针对我们关注的代码进行测试,对于依赖项使用 Mock 对象配置预期的依赖 ...
- WPF 基础 - 在模板中找元素
1. 在 ControlTemplate 中寻找元素 <Window.Resources> <ControlTemplate x:Key="cTmp"> & ...
- External Libraries中没有Maven的jar包的原因（已解决）
**深坑!** ## External Libraries中没有Maven的jar包的原因(已解决) 2021年3月1日 --- 搭建一个新项目 IDEA 从 Git 上拉 拉去Maven项目然后 m ...
- sprintgboot+springsecurity的跨域问题，
整个项目是使用前后端分离的形式开发,登录接口部分出现了问题, 重写了security的登录接口,返回json数据 到这一步已经没有没有问题了,使用postman测试,也可以看到接口返回的结果,但是使用 ...
- SpringMVC请求映射handler源码解读
请求映射源码 首先看一张请求完整流转图(这里感谢博客园上这位大神的图,博客地址我忘记了): 前台发送给后台的访问请求是如何找到对应的控制器映射并执行后续的后台操作呢,其核心为DispatcherSer ...