深圳全飞鸿

标题: Vue一个空项目的目录结构和内容 [打印本页]
作者: syant    时间: 2024-7-27 19:42
标题: Vue一个空项目的目录结构和内容
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>

  8. <script>
  9. import HelloWorld from './components/HelloWorld.vue'

  11. export default {
  12.   name: 'App',
  13.   components: {
  14.     HelloWorld
  15.   }
  16. }
  17. </script>

  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    时间: 2024-7-27 19:43
main.js
  1. import Vue from 'vue'
  2. import App from './App.vue'

  4. Vue.config.productionTip = false

  6. //h是createElement的别名
  7. new Vue({
  8.   render: h => h(App),
  9. }).$mount('#app')
复制代码
作者: syant    时间: 2024-7-27 19:44
components/HelloWorld.vue
  1. <template>
  2.   <div class="hello">
  3.     <h1>{{ msg }}</h1>
  4.   </div>
  5. </template>

  7. <script>
  8. export default {
  9.   name: 'HelloWorld',
  10.   props: {
  11.     msg: String
  12.   }
  13. }
  14. </script>

  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    时间: 2024-7-27 20:16
①        内容渲染指令        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    时间: 2024-7-27 20:16
①        内容渲染指令        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"




欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) Powered by Discuz! X3.2