开始使用 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.新建扫描,选择“常规扫描”,如下图: (常规.快速.综合 ...
随机推荐
- 深入CSS属性(九)：z-index
如果你不是一名csser新手,想必你对z-index的用法应该有个大致的了解了吧,z-index可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序,本文不去讲述基本的API如何使用,而是去更深入 ...
- 使用 Build Pipeline View 插件图表展示Jenkins job依赖关系
使用 Build Pipeline View 查看Jenkins的Job的依赖关系图表 安装 Build Pipeline View 插件下载地址 下载后再jenkins的"插件管理&quo ...
- CSS鼠标手势
属性名:cursor 属性值(手势状态): auto : 默认值.浏览器根据当前情况自动确定鼠标光标类型. all-scroll : IE6.0 有上下左右四个箭头,中间有一个圆点的光标.用于 ...
- 使用NPOI时ICSharpCode.SharpZipLib版本冲突问题解决
系统原来引用的ICSharpCode.SharpZipLib是0.84版本的, 添加了2.3版本的NPOI引用后,报版本冲突错误,因为NPOI用的ICSharpCode.SharpZipLib是0.8 ...
- connect db2 by tools
- JPA之@GeneratedValue注解
JPA的@GeneratedValue注解,在JPA中,@GeneratedValue注解存在的意义主要就是为一个实体生成一个唯一标识的主键(JPA要求每一个实体Entity,必须有且只有一个主键), ...
- java学习笔记—第三方操作数据库包专门接收DataSource-dbutils （30）
Dbutils 操作数据第三方包.依赖数据源DataSource(DBCP|C3p0). QueryRunner – 接收DataSource|Connection,查询数据删除修改操作.返回结果. ...
- “全栈2019”Java第一百一十一章：内部类可以被覆盖吗？
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 3分钟解决MySQL 1032 主从错误（转）
转自 https://blog.51cto.com/suifu/1845457 3分钟解决MySQL 1032主从错误 Part1:写在最前 1032错误----现在生产库中好多数据,在从库误删了, ...
- centos7安装配置sql server 2017 linux教程
一.安装教程 https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-docker https://docs.mic ...