ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

分析vue脚手架

2021-10-23 11:01:11  阅读:249  来源: 互联网

标签:分析 School vue schoolName App Vue 脚手架 12


main.js

 1 <!--该文件是整个项目的入口文件-->
 2 <!--引入Vue-->
 3 import Vue from 'vue'
 4 
 5  <!--引入App组件,它是所有组件的父组件-->
 6 import App from './App.vue'
 7 
 8 <!--关闭vue的生产提示-->
 9  Vue.config.productionTip = false
10   
11 <!--创建Vue实例对象-------vm-->
12 new Vue({
13         <!--将App组件放入容器【引入的Vue并非完整的,缺少模板解析器。所以用render】-->
14         <!--.$mount('#app')相当于el:'#app'-->
15         render: h => h(App),
16 }).$mount('#app')

 

App.vue

 1 <!--App组件结构-->
 2 <template>
 3       <div>
 4 <!--静态资源放assets文件夹-->
 5       <img alt="Vue logo" scr="./assets/logo.png">
 6       <School></School>
 7 </template>
 8 
 9 <!--App组件交互-->
10 <script>
11 <!--引入School组件,新建的组件放components文件夹-->
12 import HelloWorld from './components/School.vue'
13 
14 export default{
15        name:'App',
16        components:{
17           School
18         }
19 }
20 </script>
21 
22 /*App组件样式。根据需求写或不写样式
23 <style>
24 </style>
25 */

 

School.vue

 1 <!--template导入之后就没了,所以需要div包住里面的-->
 2 <template>     
 3       <div class="demo">
 4             <h2>学校名称:{{schoolName}}</h2>
 5             <h2>学校地址:{{address}}</h2>
 6             <button @click="showName">点我提示学校名</button>
 7       </div>
 8 </template>
 9 
10 <!-- name:'School'命名组件名为School。<script>中包含可以交互的。比如datamethodswatchcomputed-->
11 <script>
12 <!--暴露结构以便导入-->
13       export default{      
14             name:'School',   
15             data(){
16                  return{
17                     schoolName:'尚硅谷',
18                     address:'北京'
19                   }
20               }
21          },
22          methods:{
23               showName(){
24                  alert(this.schoolName)
25                }
26            }
27          }
28 </script>
29 
30 <!--可以没有style。如果不需要样式-->
31 <style>
32     .demo{
33         background-color:orange;}

 

标签:分析,School,vue,schoolName,App,Vue,脚手架,12
来源: https://www.cnblogs.com/ning-cli/p/15441494.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有