开始使用 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.新建扫描,选择“常规扫描”,如下图: (常规.快速.综合 ...
随机推荐
- 使用python登录CNZZ访问量统计网站，然后获取相应的数据
思路: 第一步:使用pypeteer.launcher打开浏览器, 第二步:向CNZZ的登录(通过使用iframe嵌入的阿里巴巴单点登录页面),向iframe页面中自动输入用户名和密码,然后点击登录按 ...
- Load sharepoint envirement by powershell
#判断当前上下文环境中是否装在了SharePoint的Powershell环境,如果没有装载,则装载到当前运行环境.$Snapin = get-PSSnapin | Where-Object {$_. ...
- Promise之你看得懂的Promise
本文由作者陈旭锋(任职网易考拉)授权网易云社区发布. Promise源码详解 学习知识要善于思考,思考,再思考. -- 爱因斯坦 1.回调地狱 曾几何时,我们的代码是这样的,为了拿到回调的结果,不得不 ...
- 几种封装javaBean的方法
开发框架时,经常需要使用java对象(javaBean)的属性来封装程序的数据,封装javaBean的方法有很多,比如反射,内省,以及使用工具类.下面从反射开始介绍. 1.javaBean介绍: 简介 ...
- CentOS下安装Docker
简介:本篇文章介绍如何在CentOS系统下面安装docker系统. 官方文档:https://docs.docker.com/install/linux/docker-ce/centos/ Docke ...
- QuantLib 金融计算——数学工具之数值积分
目录 QuantLib 金融计算--数学工具之数值积分 概述 常见积分方法 高斯积分 如果未做特别说明,文中的程序都是 Python3 代码. QuantLib 金融计算--数学工具之数值积分 载入模 ...
- Eclipse中的创建maven项目，无法添加src/main/java等source folder
maven无法添加src/main/java 通过Eclipse创建Java Web项目,目录结构如下: 默认是只有src/main/resources 这个source folder 按照maven ...
- np.array()和np.mat()区别
1. 生成数组所需格式不同 mat可以从字符串或列表中生成:array只能从列表中生成 2. 生成的数组计算方式不同 array生成数组,用np.dot()表示矩阵乘积,(*)号或np.multipl ...
- 南昌网络赛 Distance on the tree 主席树+树剖 （给一颗树，m次查询ui->vi这条链中边权小于等于ki的边数。）
https://nanti.jisuanke.com/t/38229 题目: 给一颗树,m次查询ui->vi这条链中边权小于等于ki的边数. #include <bits/stdc++.h ...
- 洛谷 P2015 二叉苹果树 (树上背包)
洛谷 P2015 二叉苹果树 (树上背包) 一道树形DP,本来因为是二叉,其实不需要用树上背包来干(其实即使是多叉也可以多叉转二叉),但是最近都刷树上背包的题,所以用了树上背包. 首先,定义状态\(d ...