vue使用方案的抽取过程

第一步：是将vue挂载到index.js中的id为app的dom中

main.js:

import Vue from 'vue';

new Vue({
  el: "#app",
})

index.html

 （一般这个文件不再改变）

第二步：是了解一个编译规则，tremplate中的内容会替换el中dom的所有东西

import Vue from 'vue';

new Vue({
  el: "#app",
  template:`
我是template,我会替换你
`,
})

第三步：在外部编写一个组件，在Vue实例中注册一个子组件，使用到template中

import Vue from 'vue';

const App ={
  template:`
{{message}}
`,
  data(){
    return{
      message:'我是template,我会替换你'
    }
  }
}
new Vue({
  el: "#app",
  template:"",
  components:{
    App
  }
})

 第四步：把子组件对象app抽离出去，到app.js中，并用export default导出，在main.js中导入

import Vue from 'vue';
import App from './vue/app';

new Vue({
  el: "#app",
  template:"",
  components:{
    App
  }
})

export default  {
  template: `
{{message}}
`,
  data() {
    return {
      message: '我是template,我会替换你'
    }
  }
}

 第五步：将template与script分离，即引入.vue文件

<

import Vue from 'vue';
import App from './vue/app.vue';

new Vue({
  el: "#app",
  template:"",
  components:{
    App
  }
})

 

大家可以进群交流学习，老师讲的十分仔细！

 

vue学习链接

https://www.bilibili.com/video/av59594689/?p=86

转载于:https://www.cnblogs.com/carry-2017/p/11303291.html