码迷,mamicode.com
首页 > 其他好文 > 详细

vue 初识组件

时间:2018-08-11 15:39:47      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:pre   sheet   ref   isp   改名   eth   otc   spl   组件   

技术分享图片
 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 初识组件

标签:pre   sheet   ref   isp   改名   eth   otc   spl   组件   

原文地址:https://www.cnblogs.com/yanxiatingyu/p/9459629.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!