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 ...
随机推荐
- Python和JavaScript在使用上有什么区别？
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://www.freecodecamp.org/news/python-vs-javas ...
- JAVA基础（零）—— 踩坑与错误（常更）
JAVA基础(零)-- 踩坑与错误(常更) 1 坑 考虑输入为null的情况 自动转换 x/Math.pow(10,i)*Math.pow(10,i) //由于math.pow()返回double类型 ...
- js 前端MD5加密
1.引入 <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script& ...
- sap2000v21安装教程（附详细安装步骤+中文安装包）
sap2000 v21是sap2000系列软件的全新版本,也是目前行业中的一款用于结构分析和设计的集成软件,该软件保持了原有产品的传统,具有完善.直观和灵活的界面,能够在交通运输.工业.公共事业.体育 ...
- 华为OD机试题
"""最长回文字符串问题"""# 说明:方法很多,这个是最简单,也是最容易理解的一个,利用了动态规化.# 先确定回文串的右边界i,然后以右边 ...
- P3387 【模板】缩点 题解 （Tarjan）
题目链接 P3387 [模板]缩点 解题思路 这几天搞图论,好有趣hhh,多写几篇博客. 上次学\(Tarjan\)求割点,这次缩点. 思路大概是多一个栈和染色的步骤,每次\(Tarjan\)的时候把 ...
- python plt画图横纵坐标0点重合
# -*- coding: utf-8 -*- import numpy as np import matplotlib.mlab as mlab import matplotlib.pyplot a ...
- teprunner测试平台用例前置模块开发
本文开发内容 现在正式进入测试相关功能开发.teprunner测试平台底层是pytest,中间层是tep,还没了解的朋友可以先看看tep的文章,整个平台的设计思路和后面用例的执行都会基于这个工具.te ...
- Vulkan移植GpuImage(二)Harris角点检测与导向滤波
Harris角点检测 UI还是用的上次扣像的,只有前后置可以用,别的没有效果,只看实现就好. 相应源码 在实现之前,我先重新整理编译glsl的生成工具,如Harris角点检测中间计算过程需要针对rgb ...
- java连接sql server--关于登录验证及对数据库增删改查应用
一:步骤## 1.sql server建立数据库和相关表 2.建立数据源 (1).打开控制面板找到管理,打开ODBC选项或直接搜索数据源 (2).打开数据源配置后点击添加,选择sql server ...