vue学习之三常用命令
一、插值
1.1 +号运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">{{ greeting + greeting }}</div> <script>
new Vue({
el: "#app",
data: {
greeting: "Hello world"
}
})
</script> </body>
</html>
二、v-text
类似双大括号语法渲染数据的另一种方式是使用v-text。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app" v-text="greeting"></div> <script>
new Vue({
el: "#app",
data: {
greeting: "Hello world"
}
})
</script> </body>
</html>
三、v-html
双大括号语法无法渲染HTML标签，我们需要使用v-html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app" v-html="greeting"></div> <script>
new Vue({
el: "#app",
data: {
greeting: "<h1>Hello world</h1>"
}
})
</script> </body>
</html>
四、v-for
接下来，我们看看数组和对象的渲染方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app" >
<ul>
<li v-for="item in guniang">{{ item }}</li>
</ul> <ul>
<li v-for="item in students">{{ item.name }}的爱好是{{ item.hobby }}</li>
</ul>
<ul>
<li v-for="item in student">{{ item }}</li>
</ul>
</div> <script>
new Vue({
el: "#app",
data: {
guniang: ['逛街', '美甲', '吃'],
students: [
{
name: "jiaxiaoliang",
hobby: 'girls'
},
{
name: "zhaofengfeng",
hobby: 'girls'
},
{
name: 'xiaohe',
hobby: 'boys'
}
],
student: {
name: 'alex',
age: 87
}
}
})
</script> </body>
</html>
五、v-if
渲染数据的时候，同样也可以使用条件判断，我们来看看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app" >
<div v-if="name == 'guniang'">
欢迎美女光临~~
</div>
<div v-else-if="name == 'pizza'">
欢迎帅哥光临
</div>
<div v-else>
滚~~
</div>
</div> <script>
new Vue({
el: "#app",
data: {
name: "guniang"
}
})
</script> </body>
</html>
通过上面的代码我们可以看出，v-if的作用是控制标签的显示，它通过判断添加标签，底层采用的是appendChild来实现的，下面我们来看一个同样也是控制标签显示的另一个指令v-show。
六、v-show
与v-if不同的是，v-show通过样式的display控制标签的显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.box {
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app" >
<div v-show="isShow" class="box">xxxx</div>
</div> <script>
new Vue({
el: "#app",
data: {
isShow: true
}
})
</script> </body>
</html>
与v-if不同的是，v-show通过样式的display控制标签的显示。
v-if和v-show的性能比较
我们简单比较一下二者的区别：
实现方式：v-if底层采用的是appendChild来实现的，v-show通过样式的display控制标签的显示，正因为实现方式上面有差异，导致了他们的加载速度方面产生了差异；
加载性能：v-if加载速度更快，v-show加载速度慢
切换开销：v-if切换开销大，v-show切换开销小
v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。
七、v-bind
绑定属性，不多说了，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.active {
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app" >
<!--<div v-bind:class="{active: isActive}">xxxx</div>-->
<!--<div v-bind:class="[isActive]">Hello World!</div>-->
<div :class="[isActive]">Hello World!</div>
</div> <script>
new Vue({
el: "#app",
data: {
isActive: 'active',
}
})
</script> </body>
</html>
八、v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.active {
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app" >
<input type="text" v-model="name"/> <input type="checkbox" value="男" v-model="gender"/>
<input type="checkbox" value="女" v-model="gender"/> <p>请选择你的女朋友</p>
<select id="" name="" v-model="girlFriends">
<option>alex</option>
<option>peiqi</option>
<option>egon</option>
</select> <hr>
{{ name }}
{{ gender }}
{{ girlFriends}}
</div> <script>
new Vue({
el: "#app",
data: {
name: 'pizza',
gender: [],
girlFriends: []
}
})
</script> </body>
</html>
九、v-on
另一个非常重要的指令是v-on，使用v-on我们可以在标签上面绑定事件，注意我们新建的vue实例app01中多了一个属性，methods，在methods中，是我们具体事件的实现方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.box {
color: green;
}
</style>
</head>
<body>
<div id="app" >
<p v-bind:class="{box: isShow}">alex</p> <button v-on:click="doAlex">点击让Alex变绿</button>
</div> <script>
new Vue({
el: "#app",
data: {
name: 'pizza',
gender: [],
girlFriends: [],
isShow: false
},
methods: {
doAlex: function () {
this.isShow = true;
},
doPeiqi: function () {
}
}
})
</script> </body>
</html>
十、指令修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.box {
color: green;
}
</style>
</head>
<body>
<div id="app" >
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python</td>
<td><input type="text" v-model.number="python"/></td>
</tr>
<tr>
<td>Linux</td>
<td><input type="text" v-model.lazy="linux"/></td>
</tr>
<tr>
<td>Vue</td>
<td><input type="text" v-model.trim="vue"/></td>
</tr> </tbody>
</table> <hr>
{{ python }}
{{ linux }}
{{ vue }}
</div> <script>
const vm = new Vue({
el: "#app",
data: {
python: 60,
linux: 60,
vue: 60
}
})
</script> </body>
</html>
十一、计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.box {
color: green;
}
</style>
</head>
<body>
<div id="app" >
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python</td>
<td><input type="text" v-model.number="python"/></td>
</tr>
<tr>
<td>Linux</td>
<td><input type="text" v-model.lazy="linux"/></td>
</tr>
<tr>
<td>Vue</td>
<td><input type="text" v-model.trim="vue"/></td>
</tr>
<tr>
<td>总成绩</td>
<td>{{ sumScore }}</td>
</tr>
</tbody>
</table> <hr>
{{ python }}
{{ linux }}
{{ vue }}
{{ sumScore }} <h1>{{ greeting }}</h1>
<h1>{{ reversedGreeting }}</h1> <input type="text" v-model="name"/>
</div> <script>
const vm = new Vue({
el: "#app",
data: {
python: 60,
linux: 60,
vue: 60,
greeting: "hello vue!",
name: 'alex',
},
methods: { },
computed: {
sumScore: function () {
console.log(1);
return this.python + this.linux + this.vue;
},
reversedGreeting: function () {
return this.greeting.split('').reverse().join('');
},
},
watch: {
name: function () {
console.log(2);
console.log("hahahah");
}
}
})
</script> </body>
</html>
十二、自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.box {
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app" > <div v-pos.bottom.right="post" v-bind:class="{ box: isBox }">alex is big sb.</div>
</div> <script>
Vue.directive("pos", function (el, bindding) {
console.log("el: ", el);
console.log("bindding: ", bindding);
if (bindding.value) {
el.style.position = 'fixed';
for (let key in bindding.modifiers) {
el.style[key] = 0;
}
}
}); const vm = new Vue({
el: "#app",
data: {
isBox: true,
post: false,
},
methods: { },
computed: { },
watch: { }
})
</script> </body>
</html>
十三、获取DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.box {
color: green;
}
</style>
</head>
<body>
<div id="app" >
<p ref="myAlex">alex</p> <button v-on:click="doAlex">点击让Alex变绿</button>
</div> <script>
const VM = new Vue({
el: "#app",
data: {
name: 'pizza',
gender: [],
girlFriends: [],
isShow: false
},
methods: {
doAlex: function () {
this.$refs.myAlex.style.color = 'green';
},
doPeiqi: function () {
}
}
})
</script> </body>
</html>
vue学习之三常用命令的更多相关文章
- 一张图学习vim常用命令
一张图学习vim常用命令
- goland学习-go常用命令使用
goland学习-go常用命令使用 1.跨平台编译:env GOOS=linux GOARCH=amd64 go build 2.获取go第三方包:go get -u github.com/go-sq ...
- Redis学习笔记--常用命令
以下为本人学习Redis的备忘录,记录了大部分常用命令 1.客户端连接redis服务端: ===启动Redis服务端 redis-server /yourpath/redis.conf ===启动Re ...
- Linux_学习_01_常用命令大全
一.文件目录 1.列出目录 ls -a #显示隐藏文件 -l #显示文件和目录的详细资料 -h -lrt tree #显示文件和目录由根目录开始的树形结构 lstree #显示文件和目录由根目录开始的 ...
- Git学习 --> 个人常用命令add,commit以及push
Git命令行配置1 安装Github2 安装msysgit3 要配置用户名和油箱 git config --global user.name <用户名> 我的命令就是:git confi ...
- Hexo学习笔记--常用命令及部署步骤
参考资料: Hexo搭建Github静态博客:http://www.cnblogs.com/zhcncn/p/4097881.htmlHexo:独立博客新玩法:http://www.aips.me/h ...
- SQL学习笔记---常用命令
常用命令 变量 1.声明 declare @变量名 类型,… 2.赋值 1.同时赋值多个变量(可以结合查询) select @变量名=表达式1,表达式2 2.单个赋值(推荐) set @变量名=表达式 ...
- Redis 学习之常用命令及安全机制
该文使用centos6.5 64位 redis3.2.8 一.redis常用命令 键值常用命令: 1. keys 返回满足pattern的所有key. 127.0.0.1:6379> ke ...
- ionic学习笔记—常用命令
Ionic CLI介绍 Ionic CLI是开发Ionic应用程序过程中使用的主要工具.它就像一个瑞士军刀:它在一个界面下汇集了大量工具. CLI包含许多对Ionic开发至关重要的命令,例如start ...
随机推荐
- IOS多线程之线程的创建
版权声明:原创作品,谢绝转载!否则将追究法律责任. 之前也说过线程是消耗资源的.多线程会占用你应用程序(和系统的)的内存使用和性能方面的资源.我们创建一个线程后可以对他的一些部分进行配置例如可以对 ...
- PhpDocumentor
phpDocument是一个通用的生成PHP文档的工具,他本身也是用PHP写的,跟JAVADoc有些相似,但他有不同于PHPDoc,他比PHPDOC要快,而且能够解析的PHP范围更广,他本身包含了11 ...
- 硬件RDMA的驱动配置和测试
author:headsen chen date: 2019-01-18 10:22:20 notice:created by headsen chen himself and not allow ...
- 【BZOJ3774】最优选择 最小割
[BZOJ3774]最优选择 Description 小N手上有一个N*M的方格图,控制某一个点要付出Aij的代价,然后某个点如果被控制了,或者他周围的所有点(上下左右)都被控制了,那么他就算是被选择 ...
- iOS - 音乐播放器之怎么获取音乐列表
方法一: 这个方法是通过获取到沙盒路径,来得到音乐的路径(使用这个方法需要把音乐放进沙盒) NSFileManager *manager = [NSFileManager defaultManager ...
- Java clone克隆方法 --深拷贝--浅拷贝 --原型模型
什么是深拷贝? 什么是浅拷贝? 创建一个对象的方法有几种? 默认的Object方法中的clone是深拷贝还是浅拷贝? 为什么说很多深拷贝都是不彻底的深拷贝? 什么是原型模型,什么是原型模式? 原型模型 ...
- [分布式系统学习] 6.824 LEC3 GFS 笔记
Google File System 第三课的准备是阅读论文GFS.该论文是分布式系统中经典论文之一. 读完做一点小总结. GFS的feature 1. 非POXIS接口API,支持对文件和文件夹的创 ...
- Nginx 安装 --编译模块参数
公司空出来一些服务器,很久没有来练手了,于是便开始有了这篇博客,记录下过程. Nginx 这个不多说了,名声在外,人们喜爱使用这款软件,主要还是因为它的高并发特性,公司也在用效果还不错,也用了它的一些 ...
- [EF]vs15+ef6+mysql code first方式
写在前面 前面有篇文章,尝试了db first方式,但不知道是什么原因一直没有成功,到最后也没解决,今天就尝试下code first的方式. [EF]vs15+ef6+mysql这个问题,你遇到过么? ...
- Numpy基础学习与总结
Numpy类型学习 1.数组的表示 import numpy as np In [2]: #numpy核心是高维数组,库中的ndarray支持多维数组,同时提供了数值运算,可对向量矩阵进行运算 In ...