您的位置：首页 > 产品设计 > UI/UE

Vue中集成的指令以及其用法

2018-03-21 15:31 411 查看

下面介绍Vue中集成的指令以及用法和作用
1、声明式渲染有两种方法
A、文本插值，用两个花括号：{{内容}}
html如下：<div id="app"> //挂载元el，指定的节点，用id表示
{{ message }} //vue实例对象中data对象中某个属性名
</div>js如下：var app = new Vue({
el: '#app', //挂载到DOM节点上，节点的id=app
data: { //给data对象定义属性message，与html中某个文本对象变量名一致
message: 'Hello Vue!'
}
})输出结果：

B、v-bind（可以简化为：），动态绑定数据，及时对页面的数据进行变更，如V-bind:标签属性="变量名"
html如下：<div id="app-2">
<span v-bind:title="message"> //或者简写：<span :title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>js如下：var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})显示效果如下：

2、v-bind:class，三种绑定方法---

A、对象型 "{red:isred}"
B、三目型"isred?'red':'blue'"
C、数组型"[{red:'isred'},{blue:'isblue'}]"
A、对象型：<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style>
.red {
background: red;
}

.blue {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="box">
<div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
 

</div>

<script type="text/javascript">
new Vue({
el: "#box",
data:{
isred:true
}
})

</script>
</body>
</html>显示结果：

B、三目型：<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style>
.red {

background: red;
}

.blue {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="box">

<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div> 

</div>

<script type="text/javascript">
new Vue({
el: "#box",
data:{
isred:false
}
})

</script>
</body>
</html>显示效果：

C、数组型 <!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style>
.red { background: red;}
.blue { width: 100px; height: 100px; background: blue;}
</style>
</head>
<body>
<div id="box">

 
<div style="width: 100px
f1bd
;height: 100px;" v-bind:class='[{red:"isred"}]'></div>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data:{
isred:true
}
})
</script>
</body>
</html>显示效果：

3、v-bind:style，绑定内联样式
A、内联样式，对象型<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id='box'>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">{{message}}</div>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data: {
activeColor: 'red',
fontSize: 30,
message:'hello',
}
})
</script>
</body>
</html>显示效果：

B、直接绑定到一个对象上
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id='box'>
<div v-bind:style="styleObj">{{message}}</div>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data: {
styleObj:{
color:'red',
fontSize:'30px'
},
message:'hello',
}
})
</script>
</body>
</html>显示效果同上
C、数组语法，将多个样式对象应用到同一个元素上<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id='box'>
<div v-bind:style="[style1,style2]">{{message}}</div>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data: {
style1:{
color:'red',
fontSize:'30px'
},
style2:{
color:'black'
},
message:'hello',
}
})
</script>
</body>
</html>显示效果：

4、条件 v-if ，显示与隐藏（DOM元素的删除与添加），v-if = "变量名"，在data中用true或false来控制显示和隐藏
html如下：<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>js如下：var app3 = new Vue({
el: '#app-3',
data: {
seen: true //用true、false来控制能否看见内容
}
})显示结果:

5、条件 v-else-if 必须和v-if连用，格式 v-else-if="变量名"
html如下： <div style="width: 100px;height: 100px;background: black;"v-if="show"></div>
<div style="width: 100px;height: 100px;background: aqua;"v-else-if="hide"></div>
<div style="width: 300px;height: 300px;background: blue"v-else=""></div>js如下： var appp = new Vue({ el:"#box", data:{ show:true, hide:false} });
显示效果如下：

6、条件 v-else 必须和v-if连用，不能单独使用，否则报错：模板编译错误，格式 v-else=""

html如下：<div style="width: 100px;height: 100px;background: black;"v-if="show"></div>
<div style="width: 300px;height: 300px;background: blue"v-else=""></div>
js如下： var appp = new Vue({
el:"#box",
data:{
show:true,
hide:false
}
}); 显示效果如下：

7、v-show，显示与隐藏，传递的值为布尔值，默认为false，格式v-show=“变量名”，只是设置display属性，元素还存在DOM中
html如下：

<div id="box">
<div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>

js如下： new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
显示效果如下：

v-show和v-if都是隐藏和显示DOM节点，区别是v-show是给DOM节点设置display属性，而v-if则是在DOM中增加/删除节点。
v-if：<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="box">
<div style="width: 100px;height: 100px;background: black;display: none" v-if="show"></div>
</div>

<script type="text/javascript">
new Vue({
el: "#box",
data(){
return {
show: false
}
}
})
</script>
</body>
</html>在浏览器的DOM渲染效果：

v-show:<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="box">
<div style="width: 100px;height: 100px;background: black;display: none" v-if="show"></div>
</div>

<script type="text/javascript">
new Vue({
el: "#box",
data(){
return {
show: false
}
}
})
</script>
</body>
</html>在浏览器的DOM渲染效果：

8、v-for，循环，绑定数组的数据来渲染一个项目列表，格式 v-for="字段名 in(of) 数组json"
html如下：<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>js如下：

var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})

显示效果如下：

9、v-on 绑定事件（处理用户输入）函数必须写在methods里面，格式v-on:事件名="函数名"，简写@事件名="函数名"
html如下：<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>js如下：var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})显示效果：左图是点击按钮签的样式右图是点击按钮之后的样式

10、v-model，双向绑定数据，格式 v-model="变量名"
html如下：<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>js如下：var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})显示效果：左图是页面初始化结果，右图是在页面直接修改输入框的值的结果

11、v-text，解析文本，能读取文本，但不能解析html标签（就是如果变量值是html的形式给出，那么读出的值也包含html标签）
v-text 属性值为字符串文本<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="box">
<div v-text="msg"></div>
</div>

<script type="text/javascript">
new Vue({
el: "#box",
data:{
msg:" 11111"
},
methods: {
say() {
alert(111);
}
}
})
</script>
</body>
</html>显示结果：11111v-text，属性值为字符串html语句

<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="box">
<div v-text="msg"></div>
</div>

<script type="text/javascript">
new Vue({
el: "#box",
data:{
msg:"<p1>11111</p1>"
},
methods: {
    say() {
alert(111);
    }
}
})
</script>
</body>
</html>

显示结果：
<p1>11111</p1>12、v-html，能解析html语句，也能读取文本值
[b]v-html，属性值为字符串html语句[/b]<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="box">
<div v-html="msg"></div>
</div>

<script type="text/javascript">
new Vue({
el: "#box",
data:{
msg:"<p1>11111</p1>"
},
methods: {
say() {
alert(111);
}
}
})
</script>
</body>
</html>显示结果：11111v-html，属性值为字符串文本语句<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="box">
<div v-html="msg"></div>
</div>

<script type="text/javascript">
new Vue({
el: "#box",
data:{
msg:"11111"
},
methods: {
say() {
alert(111);
}
}
})
</script>
</body>
</html>显示效果：11111v-text和v-html两者都能读取文本，但是v-html能解析字符串html语句13、v-once，进入页面时只能渲染一次，以后不再渲染。如果用到事件中也只执行一次（@click.once="show"）<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="box">
<div v-once>{{msg}}</div>
</div>

<script type="text/javascript">
new Vue({
el:"#box",
data:{
msg:"qwdqwdqwd"
}
})
</script>
</body>
</html>显示效果：qwdqwdqwd事件也只响应一次<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="box">
<div @click.once="change">{{msg}}</div>
</div>

<script type="text/javascript">
new Vue({
el:"#box",
data:{
msg:"false",
flag:1
},
methods:{
change:function(){
if(this.flag == 1){
this.flag = 0;
this.msg = "true";
}else{
this.flag = 1;
this.msg = "false";
}
}
}
})
</script>
</body>
</html>页面初始化效果：

点击false，页面效果

当再次点击的时候，页面没有任何反应
14、v-pre，把标签内的元素原样输出<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="box">
<div v-pre>欢迎---{{msg}}</div>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
msg:"111111"
}
})
</script>
</body>
</html>显示效果：

15、v-cloak，防止闪烁<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="box">
<div v-cloak=''>欢迎---{{msg}}</div>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
msg:"111111"
}
})
</script>
</body>
</html>显示效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航