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

Vue.js——v-指令详解，component组件

2017-09-27 09:06 1066 查看

其实，2016年至今，Vue发展逐渐占据主体，其“vue”为法语名，实则中文名为“view”，它主要是基于“MVVM”进行设计并开发的。

M——Model 模型，用于数据保存

V——View 视图，用于用户界面设置

VM——ViewModel 视图模型，用于实现双向绑定

即view的变化，自动反映在了viewModel上边，反之亦然。

1、文本

（1）数据插值{{ message }}

<div id="app">
<p>{{ message }}</p>
</div>

（2）html v-html用于输出html代码

<div id="app">
<div v-html="message"></div>
</div>

<script>
new Vue({
el: '#app',			//el用于绑定某一数据，即id为“app”的元素
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>

注意，若设置html属性中的值应使用v-bind指令。

<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class1':class1}">
directiva v-bind:class
</div>
</div>

<script>
new Vue({
el:'#app',
data:{
class1:true
}
});
</script>

（3）指令

对于指令，多采用“v-”作为前缀进行设置，用于设置当表达式值改变时，将某些行为应用到DOM上。

<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>

<script>
new Vue({
el:'#app',
data:{
seeb:true
}
});
</script>

上述代码中，v-if指令将表达式seen的值true或false来判断是否插入p元素。

由于v-show可以实现与v-if相同的效果，即以下面的一个案例进行显示。

<div id="app">
<form>
<div class="error" v-show="!message">
You must enter a message to submit
</div>

<textarea v-model="message"></textarea>

<button v-show="message">send message</button>
</form>

<pre>{{ $data|json }}</pre>
</div>

<script type="text/javascript" src="js/vue.min.js" ></script>
<script>
new Vue({
el:'#app',
data:{
message:''
}
});
</script>

当前代码若在控制台console中，点击F12键审查元素，会发现，

（1）若是“v-show”指令，当我们在“textarea”中进行输入元素，其相邻元素div会出现“<div style="display:none">”，即表示相邻元素div依然存在。

（2）若改为“v-if”指令，相对应的“div style="display:none">”会随即消失。

2、事件处理event

注意：“v-on:”等价于“@”

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件处理event</title>
</head>
<style>
....
</style>
<body>
<div id="app">
<button type="button" @click="updateCount">Submit {{ count }} </button>
</div>

<script type="text/javascript" src="js/vue.min.js" ></script>
<script>
new Vue({
el:'#app',       //绑定元素对象；
data:{           //渲染数据；
count:0
},
methods:{         //绑定的方法；
updateCount:function(){
this.count ++;
}
}
});
</script>
</body>
</html>

上述代码运行后，初始化为“submit0”，每当点击一下按钮，submit0都会++，

在该实例中，用的“@”代替了“v-on:”，在该实例中，显示的event事件为“onClick()”，由于代替了“v-on:”，所以直接写为“@Click”。

3、组件化component

结合template模板，实现代码重用功能，

<counter></counter>

<script>

Vue.component('compoonent',template:{'<h1>Hello world!</h1>'});

</script>

等价于“<counter>

<h1>Hello world！</h1>

</counter>”

为什么采用组件化component呢，目的是为了实现代码重用操作。

案例：点赞喜欢Links or 不喜欢Dislikes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs</title>
</head>
<body>
<div id="app">
<!---自定义一个组件counter-->
<counter heading="Likes" color="green"></counter>
<counter heading="Dislikes" color="red"></counter>
</div>

<template id="counter-template">
<!--heading属性(props)用于设置counter属性绑定一个值-->
<h1>{{ heading }}</h1>
<button type="button" @click="count +=1">{{ count }}</button>
</template>

<script type="text/javascript" src="js/vue.min.js" ></script>

<script>
Vue.component('counter',{
template:'#counter-template',
//属性heading
props:['heading','color'],
/*不能写为*/
/*
data:{
：count:0
}
*/
data:function(){
return{count:0};
}
});

new Vue({
el:'#app'
})
</script>
</body>
</html>

代码不知道哪里有错误，一直显示不出来内容，求解？？？？

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

标签： vue.js v-指令 mvvm message component组件化

相关文章推荐

新的分享

章节导航