Vue入门学习笔记2 Vue内部指令整理
上一篇整理总结了Vue的准备知识和运行环境、IDE的介绍以及以一个hello world介绍了Vue的基础语法及应用,这篇将介绍Vue的内部指令。
上一篇的链接:vue.js 入门学习笔记一
参考学习视频链接:Vue2.x从入门到实战
1、Vue内部指令概览
指令 | 描述 |
---|---|
v-if | 条件渲染 ,就像平常写的if语句一样的道理 |
v-else | 必须与v-if搭配使用,如同普通的else语句,意为 否则 |
v-show | 与if类似,如果布尔值为true就显示 |
v-for | 循环遍历渲染 |
v-text | 绑定文本 |
v-html | 绑定HTML标签 |
v-on | 绑定事件,如点击事件、鼠标键盘事件等 |
v-model | 数据源绑定 |
v-bind | 用于绑定标签属性 |
v-pre | 原样输出 |
v-cloak | 渲染完成后才显示 |
v-once | 第一次渲染的时候渲染,既仅渲染一次 |
2、v-if & v-else & v-show 实例
v-if和v-else通常是组合使用的,就像我们平常在js中写的if-else一样的作用。
v-show同样通过boolean修改标签的css的display属性来进行显示或异常
v-if与v-show的区别:v-if判断真假,如果为真继续加载执行后面的内容,如果为假则不再加载后面的内容,大大减少服务器压力。而v-show则不一样,不管真假都会加载全部内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if & v-else & v-show</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-if & v-else & v-show</h1>
<hr>
<div id="app">
<div v-if="isLogin">你好主人,欢迎回来~</div>
<div v-else>不好意思,请您先登录!</div>
<!-- v-if判断是否加载,true加载,false不加载,简轻服务器压力 -->
<div v-show="isLogin">v-show怎样都会加载,修改的是display属性</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
isLogin:true
}
})
</script>
</body>
</html>
3、v-for 实例
v-for循环遍历,通常用在遍历数组渲染页面。下面这个例子介绍了便利数组和对象的使用,以及排序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>hello world!</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in sortItmes">
{
{
item}}
</li>
</ul>
<hr>
<ul>
<li v-for="(item,index) in sortStudents">
{
{
index}}_{
{
item.naem}}-{
{
item.age}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
itmes:[35,25,8,56,61,10,63],
students:[
{
naem:"panruihe",age:"24"},
{
naem:"ruihe",age:"15"},
{