开始使用 Vuejs 2.0 ---简单总结2
Vuejs的常用指令
v-htmlv-showv-ifv-forv-on
1 、v-html
v-html 更新元素或者变量的innerHTML，按普通html解析，和v-text的区别是在变量中的html标签会被浏览器解析，比如<br>会直接解析为换行
语法
<!--直接在html标签中使用vuejs中的变量msg,语法跟v-text相同-->
<div v-html="msg"></div>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Vuejs简单示例</title>
<!--引入开发版本vue.js，在开发版本中会有很多友好的提示-->
<script src='./vue.js'></script>
</head>
<body>
<!--定义一个id为demo的div-->
<div id="demo"> <!--此处的msg为在vuejs中定义的变量，放在两个花括号中-->
<div v-html="msg"></div>
<script>
<!--实例化vuejs-->
new Vue({
<!--el指定的id为css选择器-->
el:'#demo',
<!--我们的变量统统放到data中-->
data:{
<!--此处声明的变量msg内容为实验-->
msg:'第一行<br><hr>第二行'
}
})
</script>
</body>
</html>
2、 v-show
v-show 根据条件解析元素display的属性的真假，如果为真则display为block，假的话则为none在页面不显示。
语法
<!--Show和Hide需在vue中定义。-->
<span v-show="Show">你能看到我!</span>
<span v-show="Hide">你能看到我吗!</span>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Vuejs简单示例</title>
<!--引入开发版本vue.js，在开发版本中会有很多友好的提示-->
<script src='./vue.js'></script>
</head>
<body>
<!--定义一个id为demo的div-->
<div id="demo"> <!--此处的Show和Hide为在vuejs中定义的变量，放在两个花括号中-->
<span v-show="Show">你能看到我!</span>
<span v-show="Hide">你能看到我吗!</span>
<script>
<!--实例化vuejs-->
new Vue({
<!--el指定的id为css选择器-->
el:'#demo',
<!--我们的变量统统放到data中-->
data:{
<!--此处声明的变量msg内容为实验-->
Show:true,
Hide:false
}
})
</script>
</body>
</html>
3 、 v-if
v-if、v-else、v-else-if,if三兄弟，条件判断，这个跟我们平时见到的if语句类似，根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
注意
v-else不需要表达式，但是需要跟在v-if和v-else-if后面- 我们在实验中直接使用了
true和false在实际使用中可以使用表达式，例如v-if="1>3"
语法
//Show需在vue中定义
<span v-if="Show">你能看到我!</span>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Vuejs简单示例</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="demo">
<p>第一组</p>
<p>预期显示“你能看到我!”</p>
<span v-if="Show">你能看到我!</span>
<span v-else>你能看到我吗!</span>
<br>
<p>第二组</p>
<p>预期显示“你能看到我吗!”</p>
<span v-if="hide">你能看到我!</span>
<span v-else>你能看到我吗!</span>
<br>
<p>第三组</p>
<p>预期显示“你真的能看到我吗!”</p>
<span v-if="hide">你能看到我!</span>
<span v-else-if="hide">你能看到我吗!</span>
<span v-else>你真的能看到我吗!</span> </div>
</body>
</html>
<script>
new Vue({
el:'#demo',
data:{
Show:true,
hide:false
}
})
</script>
4 、v-for
v-for 循环遍历
语法
//items为数据，item为数据的元素，text为数据中的元素内容
<div v-for="item in items">
{{ item.text }}
</div>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js指令示例</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="demo">
<div v-for="item in items">
{{ item.text }}
</div>
<div v-for="item in items">
{{ item.name }}
</div>
<div v-for="item in items">
{{ item.text }}{{ item.name }}
</div> <div v-for="item in items">
{{ item }}
</div>
</div>
</body>
</html>
<script>
new Vue({
el:'#demo',
data:{
items:[
{text:'hello',name:'实验'},
{text:'hello',name:'vuejs'},
{text:'hello',name:'html'},
{text:'hello',name:'js'},
]
}
})
</script>
5、 v-on
v-on 绑定事件监听器
语法
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js指令示例</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="demo">
<button v-on:click="doThis">{{msg}}</button>
</div>
</div>
</body>
</html>
<script>
new Vue({
el:'#demo',
data:{
msg:'单击按钮',
name:'vuejs'
},
methods:{
doThis:function(e){
console.log(this);
//console.log(e.target.tagName);
console.log(e.target);
console.log('hello'+this.name+'!');
}
}
})
</script>
开始使用 Vuejs 2.0 ---简单总结2的更多相关文章
- 开始使用 Vuejs 2.0 ---简单总结1
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vuejs 采用自底向上增量开发的设计.Vuejs 的核心库只关注视图层,并且非常容 ...
- 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vue 2.0 + vuex 2.0 重写这个应用,其中最 ...
- 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用23
前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vuex 2.0 重写这个应用,其 ...
- struts2.0简单教程
Struts2.0简单配置教程: 在Eclipse中配置Struts2 步骤一:首先打开java ee并建立一个动态网站项目,我建立的项目名为TestDemo,如下图: 建立之后可在左侧发现工程,展开 ...
- HTTP/2.0 简单总结（转载）
HTTP/2.0 简单总结(转载于https://linjunzhu.github.io/blog/2016/03/10/http2-zongjie/) 如何使用上 HTTP/2.0 需要浏览器的支持 ...
- moloch1.8.0简单操作手册
moloch1.8.0简单操作手册 Sessions 页面:Sessions主要通过非常简单的查询语言来构建表达式追溯数据流量,以便分析. SPIView 页面: SPIGraph页面:SPIGrap ...
- Spark学习笔记0——简单了解和技术架构
目录 Spark学习笔记0--简单了解和技术架构 什么是Spark 技术架构和软件栈 Spark Core Spark SQL Spark Streaming MLlib GraphX 集群管理器 受 ...
- 学python2.7简单还是python3.0简单,两者区别
学python2.7简单还是python3.0简单,谈谈两者区别 1. 使用__future__模块 Python 3.X 引入了一些与Python 2 不兼容的关键字和特性.在Python 2中,可 ...
- AppScan8.0简单扫描
上篇文章介绍了如何在WindowsXP中安装AppScan8.0,接着本篇就来说说怎么进行一次简单的扫描吧. AppScan8.0开始扫描 1.新建扫描,选择“常规扫描”,如下图: (常规.快速.综合 ...
随机推荐
- 解决IE8不支持console
解决IE8不支持console,代码中包含console时会报错. //解决 IE8 不支持console window.console = window.console || (function ( ...
- C#基础知识入门概要（自我回顾用）
一,C#是什么? 人与人之间可以用语言进行交流,我们和计算机交流也是通过语言.我们可以通过语言让一个人做一件我们想让他做事情(他愿意的话~),我们能不能让计算机按照我们的意愿来做事情呢?比如我们让计算 ...
- .net core 自制错误日志
前言 之前.net framework用的ErrorLog帮助类,对于监控错误形成日志,内容非常清晰,想在.net core2.2中继续用,但是有很多不一样的地方,所以想总结一下. 首先需要HttpC ...
- 如何使用jQuery实现根据不同IP显示不同的内容
一些SEM的投放页会针对不同地域做针对性的内容推广,下面我把实现方法分享出来. 一.引用新浪提供的IP查询的js库 <script src="http://int.dpool.sina ...
- 域名通过infopath访问webservice出现401错误
解决办法: 跟服务器有关,需要再每台服务器进行以下配置 New-ItemProperty HKLM:\System\CurrentControlSet\Control\Lsa -Name " ...
- 加固apk的开发者最常面对的十种问题
欢迎访问网易云社区,了解更多网易技术产品运营经验. 因为工信部对移动App应用安全过检要求日益增多,不加固大都达不到工信部的要求,同时开发者加固App大都是为了防止以下10个检测项出现问题,影响App ...
- 流式处理框架storm浅析（下篇）
本文来自网易云社区 作者:汪建伟 举个栗子 1 实现的目标 设计一个系统,来实现对一个文本里面的单词出现的频率进行统计. 2 设计Topology结构: 这是一个简单的例子,topology也非常简单 ...
- 2018-2019-2 网络对抗技术 20165219 Exp3 免杀原理与实践
2018-2019-2 网络对抗技术 20165219 Exp3 免杀原理与实践 实验任务 1 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用sh ...
- “全栈2019”Java第九十三章：内部类应用场景（迭代器设计模式）
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- Codeforces Global Round 2部分题解
传送门 好难受啊掉\(rating\)了-- \(A\ Ilya\ and\ a\ Colorful\ Walk\) 找到最后一个与第一个颜色不同的,比一下距离,然后再找到最左边和最右边与第一个颜色不 ...