最近刚自学了Vue,想动手试一试

项目结构如下

test.Vue和vue.config.js是自己添加的文件,其余都是新建项目时就有的。

test.Vue一开始如下:

<template>
  <div id="example">
    <p>Original message: "{{ message }}"</p>
  </div>
</template>

<script>
import Vue from 'vue';

new Vue({
   el: '#example',
   data: {
     message: 'Hello'
   }
})

export default {
  name: "test",
}
</script>

<style scoped>

</style>

 然后app.Vue如下

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <test></test>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue"
import test from './components/test.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    test
  }
}
</script>

<style>
#app {
  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>

运行之后,浏览器报错Can't find element #example

但我test.Vue里明明el:"#example"绑定了,

后来在网上找了很久也没有答案,就去github上搜寻了相关代码,然后将test.vue改成下面

<template>
  <div id="example">
    <p>Original message: "{{ message }}"</p>
  </div>
</template>

<script>
// import Vue from 'vue';
//
// new Vue({
//   el: '#example',
//   data: {
//     message: 'Hello'
//   }
// })

export default {
  name: "test",
  data(){
    return{
      message: 'Hello'
    }
  }
}
</script>

<style scoped>

</style>

再运行就成功了。这里我就不明白了,明明官方文档都是用new Vue({ })来创建实例的(也可能是我还没学完的原因),后来就去搜寻了new Vue({ })和export default{}的区别:

1、new vue({}) 只在入口文件 main.js里使用,而其余组件的里的属性和方法的使用,都要放在export default{}中。

2、export default 的是一个对象 Object,然后父组件通过 components 属性注册,其实是内部调用了 Vue.extend 方法,把这个 Object 传入,然后得到的也是一个 Vue 的实例(即还是用到了new Vue({ }),但多了一些功能),用 Vue.extend 而不是直接用new Vue,因为他们要建立父子关系,形成一个 Vue 的组件树。

3、data()中return的变量和方法只限于当前组件使用,起到了变量隔离的一种效果。

又看到有人说这两者没有什么联系

前者是ES6的module中的语法,后者是创建一个vue实例,

引起误解是因为你用了Webpack开发Vue同时用了vue-loader. 

其实这最终会通过vue-loader处理成原生js代码.即无论如何都要new Vue({ })

后来又深入研究了一下,new Vue({ })只有根组件才这么创建,根组件即App.vue中的app,然后在main.js中如此创建。

(类似微信小程序中里的APP?)

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐