Ⅳ vue2.0 项目中的组件

来源：互联网发布：淘宝网店开店要多少钱编辑：程序博客网时间：2024/06/02 03:47

一、组件的创建

1、创建vue组件
　　　example.vue: template、scripts、css
　　在当前组件中 export default 导出　example.vue　的属性、方法…..
2、example.vue的使用
引用: import example.vue组件
注册：export default{
　　　　　components: {example}
　　　}
此时，在template中该组件即可作为标签使用
eg:
1、创建vue组件 App.vue
2、App.vue的使用
main.js:
　实例化一个new　vue对象，引用import App from ‘./App’，注册 components: { App }
index.html:
　挂载main.js中的vue对象

    <div id="app"></div> --><app></app>

二、组件的基本使用

<!DOCTYPE html><html>  <head>    <meta charset='UTF-8'>    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>    <title>vue_component</title>  </head>  <style>    *{margin:0; padding:0;}    div{margin-top:10px;}    p{margin-left: 10px; font-weight: 500; font-size: 16px;}  </style>  <body>    <div id="app">      <!--1、全局注册组件-->      <global-component></global-component>      <!--2、局部注册组件-->      <local-component></local-component>      <!--3、DOM模板解析组件(<ul>,<ol>,<table>,<select>)限制了能被它包裹的元素-->      <div><ul><li is="my-row"></li></ul></div>      <!--4、父组件向子组件传输数据-->      <div>        {{explain4}}         <input v-model="msg"/>        <parent-tochild v-bind:parent-msg="msg"></parent-tochild>      </div>      <!--5、子组件向父组件传输数据              v-on: 监听子组件increment事件,然后触发父组件incrementTotal事件-->      <div>        {{explain5}}        <div style="padding: 0 20px;">          1)子组件自定义事件<br/>          2)this.$emit('increment') 触发事件<br/>          3)在子组件上监听事件 v-on:increment<br/>          4)监听到子组件自定义事件,调用父组件事件(父组件事件改变父组件的值)        </div>        <span>total: {{total}}</span>        <child-toparent v-on:increment="incrementTotal"></child-toparent>        <child-toparent v-on:increment="incrementTotal"></child-toparent>      </div>     </div>  </body>  <script src="vue.js"></script>  <script>    /*1、全局注册组件*/    Vue.component('global-component',{      template: '<div>1、全局注册组件: global custom component！</div>'    });    /*2、局部注册组件*/    var local = {      template: "<div>2、局部注册组件：local custom component!</div>",    }    /*3、DOM模板解析组件(<ul>,<ol>,<table>,<select>)限制了能被它包裹的元素*/    var domPars ={template: "<tr>3、DOM模板解析组件(ul,ol,table,select)限制了能被它包裹的元素</tr>"};    /*4、父组件向子组件传输数据*/    var parentTochild = {      props:['parentMsg'],      template: '<div style="padding-left: 224px;">{{parentMsg}}</div>',    };    /*5、子组件向父组件传输数据*/    var childToparent = {      /*在组件中,data必须是一个函数*/      data: function(){        return {counter:0}      },      template: '<button v-on:click="increment">{{counter}}</button>',      methods:{        //子组件自定义事件        increment: function(){          this.counter += 1;          this.$emit('increment',"子组件向父组件传输的具体数据");//触发increment事件        }      }    };    /*创建根实例：确保在初始化根实例之前注册组件*/    new Vue({      el: "#app",      data:{        explain4: "4、父组件向子组件传输数据：",        msg: "Message from parent",        explain5: "5、子组件向父组件传输数据：",        total: 0       },      components:{        'local-component': local,        'my-row': domPars,        'parent-tochild': parentTochild,        'child-toparent': childToparent      },      methods:{        incrementTotal:function(msg){          this.total += 1;          this.explain5 = msg;//子组件向父组件传输的具体数据        }      }    });  </script></html>

三、计算属性

<!DOCTYPE html><html>  <head>    <meta charset='UTF-8'>    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>    <title>vue_computed</title>  </head>  <style>    *{margin:0; padding:0;}    div{margin-top:10px;}    p{margin-left: 10px; font-weight: 500; font-size: 16px;}  </style>  <body>    <div id="app">      <h3>1.计算属性: Computed</h3>      <p>Original message: "{{ message }}"</p>      <p>Reversed message: "{{reversedMessage}}"</p>    </div>    <div id=app2>      <h3>2.Computed VS methods</h3>      <p>computed运行时间: "{{computedTime}}"</p>      <p >methods运行时间: "{{methodsTime()}}"</p>    </div>  </body>  <script src="vue.js"></script>  <script>    // var app = new Vue({    //   el: '#app',    //   data: {message:"计算属性: Computed!"},    //   computed:{    //     reversedMessage: function(){    //       return this.message.split('').reverse().join('');    //     }    //   }     // });    var app2 = new Vue({      el: "#app2",      computed:{        computedTime: function(){          var start = new Date().getTime();//起始时间          var sum = 0;          for(var i=0; i<1000000; i++){               sum += i;          }          var end = new Date().getTime();//结束时间          return (end - start) + "ms";        }      },      methods: {        methodsTime: function(){          var start = new Date().getTime();//起始时间          var sum = 0;          for(var i=0; i<1000000; i++){               sum += i;          }          var end = new Date().getTime();//结束时间          return (end - start) + "ms";        }      }    });  </script></html>

阅读全文

0 0