Vue一个空项目的目录结构和内容

syant

App.vue

1. <template>
   
2.   <div id="app">
   
3.     <img alt="Vue logo" src="./assets/logo.png">
   
4.     <HelloWorld msg="Welcome to Your Vue.js App"/>
   
5.   </div>
   
6. </template>
   
7. 
   
8. <script>
   
9. import HelloWorld from './components/HelloWorld.vue'
   
10. 
    
11. export default {
    
12.   name: 'App',
    
13.   components: {
    
14.     HelloWorld
    
15.   }
    
16. }
    
17. </script>
    
18. 
    
19. <style>
    
20. #app {
    
21.   font-family: Avenir, Helvetica, Arial, sans-serif;
    
22.   -webkit-font-smoothing: antialiased;
    
23.   -moz-osx-font-smoothing: grayscale;
    
24.   text-align: center;
    
25.   color: #2c3e50;
    
26.   margin-top: 60px;
    
27. }
    
28. </style>

复制代码

syant

main.js

1. import Vue from 'vue'
   
2. import App from './App.vue'
   
3. 
   
4. Vue.config.productionTip = false
   
5. 
   
6. //h是createElement的别名
   
7. new Vue({
   
8.   render: h => h(App),
   
9. }).$mount('#app')
   

复制代码

syant

components/HelloWorld.vue

1. <template>
   
2.   <div class="hello">
   
3.     <h1>{{ msg }}</h1>
   
4.   </div>
   
5. </template>
   
6. 
   
7. <script>
   
8. export default {
   
9.   name: 'HelloWorld',
   
10.   props: {
    
11.     msg: String
    
12.   }
    
13. }
    
14. </script>
    
15. 
    
16. <!-- Add "scoped" attribute to limit CSS to this component only -->
    
17. <style scoped>
    
18. h1 {
    
19.   margin: 40px 0 0;
    
20. }
    
21. </style>

复制代码

syant

①        内容渲染指令        v-text="message"、{{ message }}、v-html="message"
②        属性绑定指令        v-bind:value="message" 简写用冒号:value="message"
③        事件绑定属性        v-on:click 简写用@click
④        双向绑定指令        v-model="message"
⑤        条件渲染指令        v-if="true"移除元素 v-show="false"修改display:none
⑥        列表渲染指令        v-for="(item,index) in list"

syant

①        内容渲染指令        v-text="message"、{{ message }}、v-html="message"
②        属性绑定指令        v-bind:value="message" 简写用冒号:value="message"
③        事件绑定属性        v-on:click 简写用@click
④        双向绑定指令        v-model="message"
⑤        条件渲染指令        v-if="true"移除元素 v-show="false"修改display:none
⑥        列表渲染指令        v-for="(item,index) in list"