源码时代Java干货分享|vue 指令基本使用大全，学完让你的工作效率提升百倍！...

于 2019-08-30 13:02:31 发布
阅读量142 收藏
点赞数
文章标签： java xhtml javascript ViewUI
原文链接：http://blog.51cto.com/14497209/2433889
版权

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.
指令名称 指令作用 备注
v-html 显示与解析HTML代码
v-text 原封不动的展示
v-for 遍历与循环功能 遍历数字，字符串,对象,数组
v-bind 绑定属性 简单形式 :属性名="值"
v-model 双向绑定 只支持input,select,textarea
v-show 显示与隐藏 隐藏只是样式:style="display=none"
v-if 判断 v-if/v-else-if/v-else
v-on 绑定事件 简写 @事件名=方法名()
v-html与v-text
html会解析HTML标签(相当:innerHTML)
text不会解析HTML标签(相当:innerText)
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vuejs/vue.js"></script></head><body>
<div id="app">
<span id="myspan">{{msg}}</span>
<!--
使用指令写法来设置数据
注:指令中获取数据，不需要写表达式{{}}
-->
<span v-html="msg"></span>
<span v-text="msg"></span></div>
<!--
指令:vue设计的一种特殊的标签，v-指令名称
--><script>

//原生的js代表为这个myspan加数据
/**
 * innerText:会把加上的内容原样输出(不会当作html标签进行识别与编译)
 * innerHTML：会去识别与编译咱们的html标签
 */
/*
document.getElementById("myspan").innerHTML = "<h1>喔为...</h1>";
document.getElementById("myspan2").innerText = "<h1>喔为...</h1>";
*/
new Vue({
    el:"#app",
    data:{
        msg:"<h1>喔为...</h1>"
    }
})

</script>
</body></html>

v-for
遍历咱们的数据(数字,字符串,对象,集合)
数字就是普通的循环 for(var i=1;i<=数字;i++)
字符串是拿到每一个字母
对象循环 <span v-for="(v,k,i) in 对象"></span>
ov:代表对象的属性值
ok:代表对象的属性名
oi:代表索引
数组循环 <span v-for="(v,i) in 数组"></span>
ov:代表对象的属性值
oi:代表索引
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vuejs/vue.js"></script></head><body>
<div id="app">

<!--遍历数字 for(var i=1;i<=5;i++)-->
<ul>
    <li v-for="v in num">{{v}}</li>
</ul>
<!--遍历字符串:拿到字符串中的每一个值-->
<ul>
    <li v-for="v in name">{{v}}</li>
</ul>
<!--
    遍历对象
        (v) 如果只写一个值,只获取value的值
        (v,k) v:是value的值，k:是key(属性)
        (v,k,i) v:是value的值，k:是key(属性) ,i：索引
-->
<ul>
    <li v-for="(v,k,i) in smalltxt">{{k}} - {{v}} -{{i}}</li>
</ul>

<!--遍历数组
    (v,i) ： v:当前的数据值  i:当前遍历索引
-->
<ul>
    <li v-for="(v,i) in hobbys">{{v}}==={{i}}</li>
</ul></div>

<script>

/**
 * v-for:进行相应的循环(数字,字符串,对象,数组)
 */
new Vue({
    el:"#app",
    data:{
        num:5,
        name:"zhang",
        smalltxt:{
            name:"斗罗大罗",
            author:"杨哥",
            sn:"34325Nfe"
        },
        hobbys:["吃饭","睡觉","打豆豆","垃圾"]
    }
})

</script>
</body></html>

v-bind的使用
bind主要是用于绑定相应的属性 <标签 v-bind:属性名="属性值">
bind有一种简写形式 <标签 :属性名="属性值">
如果直接把整个对象进行属性绑定 <标签 v-bind="对象">
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head&gt;
<meta charset="UTF-8">
<title>Title</title>
<script src="vuejs/vue.js"></script></head><body>
<div id="app">

<!--
    标准写法-> v-bind:属性名
        v-bind:src -> 绑定相应的属性(里面的值可以从data中获取)
    简写形式-> :属性名
    多个属性绑定
        v-bind="对象"
-->
<img v-bind:src="imgUrl"  v-bind:height="height" />

<img :src="imgUrl" :height="height" />

<img v-bind="img" />

</div>
<script>

/**
 */
new Vue({
    el:"#app",
    data:{
        imgUrl:"imgs/1.jpg",
        height:120,
        //这个对象中有多个属性
        img:{
            src:"imgs/1.jpg",
            height:240,
            mei:"haha"
        }
    }
})

</script>
</body></html>

v-model
主要是用于完成双向的绑定
只能用于:input,select,textarea
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head&gt;
<meta charset="UTF-8">
<title>Title</title>
<script src="vuejs/vue.js"></script></head><body>
<div id="app">

名称:<input type="text" v-model="inputVal"> <br>
{{inputVal}}
<hr>
    爱好:
    <input v-model="checkboxVal" value="1" type="checkbox">看电影
    <input v-model="checkboxVal" value="2" type="checkbox">看小说
    <input v-model="checkboxVal" value="3" type="checkbox">看漫画
    <input v-model="checkboxVal" value="4" type="checkbox">垃圾
    <br>
    {{checkboxVal}}
<hr>
    性别:
    <input v-model="radioVal" value="1" type="radio">男
    <input v-model="radioVal" value="2" type="radio">女
    <input v-model="radioVal" value="3" type="radio">叨客
    <br>
    {{radioVal}}
<hr>
    <select v-model="selectVal">
        <option value="1">中国</option>
        <option value="2">日本</option>
        <option value="3">美国</option>
    </select>
    <br>
    {{selectVal}}
<hr>
    <textarea v-model="textareaVal"></textarea>
    <br>
    {{textareaVal}}</div>

<script>

/**
 * v-model:只能在表单标签中使用(input,select,textarea)
 */
new Vue({
    el: "#app",
    data: {
        inputVal:"我是杨杨我怕谁!",
        checkboxVal:["1","3"],
        radioVal:2,
        selectVal:2,
        textareaVal:"sdfsfd"
    }
})

</script>
</body></html>

v-show&v-if
v-show用于展示和隐藏 <标签 v-show="true/false">
v-if <标签 v-if="条件">...
show只是隐藏标签,if直接就不会出现不满足条件的标签
v-show的案例代表
最后的效果是有一个按钮，点一下显示图片，再点一下隐藏图片
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head&gt;
<meta charset="UTF-8">
<title>Title</title>
<script src="vuejs/vue.js"></script></head><body>
<div id="app">

<button onclick="showyishow()" >点我啊</button> <br />
<!--
    v-show:true(显示)/fales(不显示)
        注:不显示（style="display: none;"）
-->
<img src="imgs/1.jpg" v-show="isShow" />

</div>
<script>

/**
 * v-model:只能在表单标签中使用(input,select,textarea)
 */
var vue = new Vue({
    el: "#app",
    data: {
        isShow:false
    }
})

function showyishow() {
    vue.isShow = !vue.isShow;
}

</script>
</body></html>
v-if的案例
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head&gt;
<meta charset="UTF-8">
<title>Title</title>
<script src="vuejs/vue.js"></script></head><body>
<div id="app">

<!--
    if：如果未满足条件，页面就直接 没有这元素
        show:元素存在，只在隐藏起来了
-->
<div v-if="age<18">
    未成年人禁止入内
</div>
<div v-else-if="age>=18 && age<60">
    客观请进，这里欢迎您
</div>
<div v-else>
    老神仙，不食人间烟火
</div>

</div>
<script>

/**
 * v-model:只能在表单标签中使用(input,select,textarea)
 */
var vue = new Vue({
    el: "#app",
    data: {
        age:10
    }
})
// alert(0)
// vue.age = 89;

</script>
</body></html>
v-on 事件绑定
事件绑定可以直接使用v-on <标签 v-on:事件名=方法名>
调用的方法可以不加()
v-on有一种简写形式 <标签 @事件名=方法名>
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"><head&gt;
<meta charset="UTF-8">
<title>Title</title>
<script src="vuejs/vue.js"></script></head><body>
<div id="app">

<!--
    这里的方法加不加括号都可以执行
    v-on:事件名="方法名()"
    @事件名="方法名()"
-->
<button v-on:click="say()">点我有惊喜...</button>

<button @click="hello('风语咒')">再点我啊！！！</button>

<button @click="age++">{{age}}</button>

</div>
<script>

var vue = new Vue({
    el: "#app",
    data: {
        name:"xxx",
        age:12
    },
    methods:{
        say(){
            alert("点啊，你个瓜娃子！")
        },
        hello(msg){
            console.debug(this.name+"出来看:"+msg);
        }
    }
})

</script>
</body></html>
（本文由源码时代技术老师撰写，转载请注明出处）

baoshao1235
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值