vue 初识组件

Posted 2021-01-02 yanxiatingyu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 初识组件相关的知识，希望对你有一定的参考价值。

 1 Vue.component("greeting",{
 2     template:
 3     `<p>{{ name }}大家好
 4      <button v-on:click="changeName">改名</button></p>`,
 5     data:function(){
 6         return {
 7             name:‘檐下听雨‘
 8         }
 9     },
10     methods:{
11         changeName:function(){
12             this.name=‘yanxiatingyu‘;
13         }
14     }
15 });
16 
17 new Vue({
18     el:‘#vue-app-one‘
19 
20 });
21 
22 
23 new Vue({
24     el:‘#vue-app-two‘
25 
26 });

Vue.js

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="vue.css">
 7     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 8     <style type="text/css">
 9         .cr{
10             color:red;
11         }
12     </style>
13 </head>
14 <body>
15     <h3>初识Vue 组件</h3>
16     <div id="vue-app-one">
17         <greeting></greeting>
18 
19     </div>
20 
21     <div id="vue-app-two">
22         <greeting></greeting>
23     </div>
24 
25     <script src="app.js"></script>
26 </body>
27 </html>

HTML

以上是关于vue 初识组件的主要内容，如果未能解决你的问题，请参考以下文章

初识vue 2.0（13）：子组件使用watch监听父组件变化

Vue初识