开始使用 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.新建扫描,选择“常规扫描”,如下图: (常规.快速.综合 ...
随机推荐
- Solr相似度算法一：DefaultSimilarity(基于TF-IDF的默认相似度算法)
默认的similarity是基于TF/IDF 模块. 该 similarity有以下配置选项: discount_overlaps –确定是否重叠的标识(标记位置增量为0)都将被忽略在正常计算的时候. ...
- #测试框架推荐# test4j，数据库测试
# 背景 后端都是操作DB的,这块的自动化测试校验的话,是需要数据库操作的,当然可以直接封装方法来操作数据,那么有没有开源框架支持数据操作,让我们关注写sql语句?或者帮我们做mysql的断言呢? # ...
- win32拖拽编程
本文由作者邹启文授权网易云社区发布. 在邮箱大师PC版中,我们需要实现一个功能:账号和邮件夹拖拽排序. 准备 封装win32 API.我们使用到的API有, ImageList_Create.Imag ...
- windows下简单验证码识别——完美验证码识别系统
此文已由作者徐迪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 讲到验证码识别,大家第一个可能想到tesseract.诚然,对于OCR而言,tesseract确实很强大,自带 ...
- iOS 界面布局
1. auto layout http://www.devtalking.com/articles/adaptive-layout-for-iphone6-1/ http://blog.sina.co ...
- Android 文件读写高级
往设备里写文件有几种选择,写在内存中,或SD卡中. 往内存里写好处是,可以写在 data/data/包名 文件夹里,而此文件是不可访问的(除非 root).这样可以增加文件的安全性,避免被误删.缺点也 ...
- Spring框架注解
这四个注解,功能都是一样的,都是用来创建对象的. 但是为什么有这么四个吗?Spring中提供了三个@Component的衍生注解:(功能目前来讲是一样的) @Controller :WEB层 ...
- jmeter5.1.1启动提示not able to find java executable or version的解决办法
安装jmeter5.1.1完成后,启动报错not able to find java executable or version,如下图所示 解决办法: 1.在环境变量PATH的最后添加如下内容:%S ...
- MysqliDb 库的一些使用简单技巧（php）
一.分页功能 假设接口要接受输入:page, page_limit,key,value,table 来查询 table 中 key like value 的元组中以 page_limit 为 page ...
- Jmeter分布式测试实战
一.Jmeter分布式测试基础 1.Jmeter分布式测试原因: 在使用Jmeter进行接口的性能测试时,由于Jmeter 是JAVA应用,对负载机的CPU和内存消耗比较大.所以当需要模拟数以万计的并 ...