Vue入门学习笔记2 Vue内部指令整理
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"},
{naem:"潘总",age:"35"},
{naem:"小老弟",age:"18"},
{naem:"会左勾拳的螳螂",age:"22"},
]
},
computed:{
sortItmes:function(){
return this.itmes.sort(sortNunber);
},
sortStudents:function(){
return sortByKey(this.students,'age')
}
}
});
// sort() 默认是按照首位进行排序的，所以需要写一个sortNunber函数传进去才能正常进行排序
function sortNunber(a,b){
return a-b;
}
//数组对象排序的方法
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}
</script>
</body>
</html>
4、v-text & v-html 实例
v-text通常用于绑定文本信息，而v-html用于绑定HTML标签。
Tip: 实际开发中尽量不使用v-html , 这有可能导致网站遭到xss攻击，尤其在表单里绝对不能使用。除非你们这个部分不重要，或者绝对安全。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-text & v-html</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-text & v-html 实例</h1>
<hr>
<div id="app">
<span>{{mes}}</span> >> <span v-text="mes"></span> <br>
<!-- 实际开发中尽量不使用v-html , 这有可能导致网站遭到xss攻击，尤其在表单里绝对不能使用 -->
<span>{{tip}}</span>>> <span v-html="tip"></span>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
mes:"hello world",
tip:"hello world"
}
})
</script>
</body>
</html>
5、v-on 实例
v-on用于绑定事件，如click、keyup等。下面这个例子用v-on指令做了一个简易计分器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-on实例</h1>
<hr>
<div id="app">
<p>本场得分：{{fenshu}}</p>
<p>
<button v-on:click="jiafen">加分</button>
<button v-on:click="jianfen">减分</button> <br>
<input v-on:Keyup.enter="onEnter" v-model="fenshu2">
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
fenshu:0,
fenshu2:0
},
methods:{
jiafen:function(){
this.fenshu++
},
jianfen:function(){
this.fenshu--
},
onEnter:function(){
this.fenshu=this.fenshu+parseInt(this.fenshu2)
}
}
})
</script>
</body>
</html>
6、v-model 数据源绑定实例
v-model应用数据源的绑定情景。其中它的属性有以下几个：
lazy 懒加载
number 数字判断
trim 去空格
这3个属性在下面的例子中都有应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-model实例 双向数据绑定</h1>
<hr>
<div id="app">
<p>原始文本信息：{{mes}}</p>
<hr>
<h3>文本框</h3>
<p>
v-model：<input type="text" v-model="mes"> <br> <br>
v-lazy(懒加载)：<input type="text" v-model.lazy="mes"><br> <br>
v-number(只有是数字才起作用)：<input type="text" v-model.number="mes"><br> <br>
v-trim(去首尾空格)：<input type="text" v-model.trim="mes"><br> <br>
</p>
<hr>
<h3>文本域</h3>
<textarea cols="30" rows="10" v-model="mes"></textarea>
<hr>
<h3>多选框绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for="isTrue">{{isTrue}}</label>
<hr>
<h3>多选框绑定多个值</h3>
<p>
<input type="checkbox" id="ruihe" value="ruihe" v-model="web_name" >
<label for="ruihe">ruihe</label>
<input type="checkbox" id="panruihe" value="panruihe" v-model="web_name" >
<label for="panruihe">panruihe</label>
<input type="checkbox" id="panzong" value="潘总" v-model="web_name" >
<label for="panzong">潘总</label>
<input type="checkbox" id="panboss" value="潘老板" v-model="web_name" >
<label for="panboss">潘老板</label>
</p>
<p>
<label>{{web_name}}</label>
</p>
<hr>
<h3>单选框绑定一个值</h3>
<p>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="two">女</label>
</p>
<p>你选择的是：{{sex}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
mes:"hello world",
isTrue:true,
web_name:[],
sex:"男"
}
})
</script>
</body>
</html>
7、v-bind 实例
v-bind是用于绑定标签属性的，如我们经常要在前端绑定一个class属性或者style属性对象等，以及三目运算动态调整页面样式等。更多内容可以参照下面的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-bind 实例</h1>
<!-- v-bind用于绑定标签的属性 -->
<hr>
<div id="app">
<p><img v-bind:src="imgSrc" alt="青蛙"></p>
<!-- v-bind可以简写成 :（冒号） -->
<p><a :href="webUrl" target="_blank">新开始博客网</a></p>
<hr>
<div :class="calssName">1、绑定class</div>
<div :class="{calssA:isOK}">2、绑定class中的判断</div>
<div :class="[classA,classB]">3、绑定class中的数组</div>
<div :class="isOK?classA:classB">4、绑定class中的数组</div>
<hr>
<div>
<input type="checkbox" id="isOK" v-model="isOK">
<label for="isOK">isOK={{isOK}}</label>
</div>
<hr>
<!-- vue的坑1 font-size 凡是横杆（-）隔开的都有大写字母代表如下fontSize -->
<div :style="{color:red,fontSize:font}">5、绑定style</div>
<div :style="styleObject">6、绑定style对象</div>
</div>
<style>
.calssA{
color: red;
}
.classB{
font-size: 150%;
}
</style>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
imgSrc:'http://img5.imgtn.bdimg.com/it/u=1089874897,1268118658&fm=26&gp=0.jpg',
webUrl:'http://www.fivewalking.cn/',
calssName:'calssA',
isOK:true,
classA:'calssA',
classB:'classB',
red:'red',
font:'20px',
styleObject:{
color:'green',
fontSize:'24px%'
}
}
})
</script>
</body>
</html>
8、v-pre & v-cloak & v-once 实例
v-pre 原样输出
v-cloak 渲染完成后显示
v-once 页面第一次渲染时渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-pre & v-cloak & v-once 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-pre & v-cloak & v-once 实例</h1>
<hr>
<div id="app">
<!-- v-pre 原样输出 -->
<div v-pre>{{mes}}</div>
<div v-cloak>渲染完成后，才显示！</div>
<!-- v-once 只在第一次渲染的时候渲染 -->
<div v-once>{{mes}}</div>
<div><input type="text" v-model="mes"></div>
<div>{{mes}}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
mes :'hell world!'
}
})
</script>
</body>
</html>
到这里就结束了，祝大家周末愉快。