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 ...
随机推荐
- 解决浏览器点击button出现边框问题
发现问题 本人不懂浏览器的HTML代码 不知道怎么在chrome浏览器的F12之后点到了哪里 点击button的时候就会出现黑色边框 解决 终于发现不是因为动了调试页面,而是动了谷歌浏览器的高级选项, ...
- AXU2CGB开发板验证Vitis加速基本平台创建
Vitis 加速基本平台创建 1.Vivado 工程创建,硬件平台bd 图如下所示 1.1.双击Block图中ZYNQ核,配置相关参数 1.1.1.Low Speed 配置,在 I/O Configu ...
- Get和Post请求方式
Get和Post是两种不同的类型的请求. 它们主要有3点不同. 1.get请求通过浏览器地址栏传递表单数据.post请求通过form data 传递数据,不会通过地址栏. 2.get请求安全性较低,p ...
- 剑指 Offer 20. 表示数值的字符串 + 有限状态自动机
剑指 Offer 20. 表示数值的字符串 Offer 20 常规解法: 题目解题思路:需要注意几种情况: 输入的字符串前后可能有任意多个空格,这是合法的. 正负号: (1)正负号只能出现一次. (2 ...
- CVE-2018-2628-WLS Core Components 反序列化
漏洞参考 https://blog.csdn.net/csacs/article/details/87122472 漏洞概述:在 WebLogic 里,攻击者利用其他rmi绕过weblogic黑名单限 ...
- TripleDES对称加密解密 -[C#-JAVA]
C#代码段 先MD5 再TripleDES加密 using System;using System.Collections.Generic;using System.Linq;using System ...
- Java split 根据指定字符串分隔成list数组的用法
String str="Java string split test"; String[] strarray=str.split(" ");//得到一 ...
- locust工具使用详解
今年负责部门的人员培养工作,最近在部门内部分享和讲解了locust这个工具,今天再博客园记录下培训细节 一.简介 1.优势 locust是python语言开发的一款的开源的的性能测试框架,他比jmet ...
- 字符串匹配-BF算法和KMP算法
声明:图片及内容基于https://www.bilibili.com/video/av95949609 BF算法 原理分析 Brute Force 暴力算法 用来在主串中查找模式串是否存以及出现位置 ...
- 混合编程：如何用python11调用C++
摘要:在实际开发过程中,免不了涉及到混合编程,比如,对于python这种脚本语言,性能还是有限的,在一些对性能要求高的情景下面,还是需要使用c/c++来完成. 那怎样做呢?我们能使用pybind11作 ...