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

来源：互联网发布：c语言二维数组输出编辑：程序博客网时间：2024/06/05 17:31

其实，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模板，实现代码重用功能，

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',//属性headingprops:['heading','color'],/*不能写为*//*data:{：count:0}*/data:function(){return{count:0};}});new Vue({el:'#app'})</script></body></html>

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

阅读全文

0 0