vue2.0

简介:

mian.js

复制代码
import Vue from 'vue'
import App11 from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app2',          //对应index.html的id,<div id="app2"></div>
  template: '<App11/>', //import App11 from './App'  ,  components: { App11 }  , template: '<App11/>' : 3个一样。
  components: { App11 }
})
复制代码

App.vue

复制代码
<template>
  <div id="aaa">   <!-- 这个id没有,用于写样式 -->
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  components: {
    Hello
  }
}
</script>

<style>
#aaa {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
复制代码

index,html

复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>t1</title>
  </head>
  <body>
    <div id="app2"></div>    <!-- new Vue({ el: '#app2' }) -->
  </body>
</html>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/7091164.html,如需转载请自行联系原作者

相关文章
|
1月前
|
JavaScript
|
3月前
|
JavaScript 前端开发 编译器
Vue3 究竟好在哪里?
Vue3 究竟好在哪里?
47 0
|
5月前
|
资源调度 JavaScript Linux
VUE使用总结
VUE使用总结
29 0
|
6月前
|
监控 JavaScript 前端开发
vue v-for
vue v-for
31 0
|
6月前
|
JavaScript 前端开发 算法
Vue3详细讲解
Vue3详细讲解
58 0
|
8月前
|
JavaScript API
Vue 3.0中的Treeshaking?
Vue 3.0中的Treeshaking?
75 0
|
8月前
|
存储 数据处理
Vue3中shallowRef和shallowReactive的使用?
Vue3中shallowRef和shallowReactive的使用?
|
9月前
|
移动开发 前端开发 JavaScript
认识并了解Vue
认识并了解Vue
77 0
认识并了解Vue
|
JavaScript 容器
初识Vue
初识Vue
67 0