新人刚开始学习vue，报错Cannot find element: .technologyChinese

Question

新人刚开始学习vue，想让technology_Chinese变量显示 技术，technology_English变量 显示 develop，报错，怎么解决？

import Vue from 'vue/dist/vue.common.js';

<template>
  <div class="title_div">
    <div class="space_div">

    </div>
    <div class="technologyChinese">
      {{technology_Chinese}}
    </div>
    <div class="technologyEnglish">
      {{technology_English}}
    </div>
  </div>

</template>

<script>
  let technologyChinese = new Vue({
    el: '.technologyChinese',
    data: function(){
      return { technology_Chinese: '技术'}
    },
    beforeMount: () => {
      //
    },
    mounted: function () {
      //console.log(li.length)  // 输出5
    },
    methods: {
      getList: function () {
        const _self = this;
        let data = [
          { name: '1', age: '21' },
          { name: '2', age: '22' },
          { name: '3', age: '23' },
          { name: '4', age: '24' },
          { name: '5', age: '25' }
        ];
        _self.$set(_self, 'abc', data);
      }
    }
  })


  let technologyEnglish = new Vue({
    el: '.technologyChinese',
    data: function(){
      return { technology_English: 'develop'}
    },
    beforeMount: () => {
      //
    },
    mounted: function () {
      //console.log(li.length)  // 输出5
    }
  })

</script>


<style src="./assets/styles/index.scss"></style>

<template>
  <div class="title_div">
    <div class="space_div">

    </div>
    <div class="technologyChinese">
      {{technology_Chinese}}
    </div>
    <div class="technologyEnglish">
      {{technology_English}}
    </div>
  </div>

</template>

<script>
  import Vue from 'vue/dist/vue.common.js';
  let technologyChinese = new Vue({
    el: '.technologyChinese',
    data: function(){
      return { technology_Chinese: '技术'}
    },
    beforeMount: () => {
      //
    },
    mounted: function () {
      //console.log(li.length)  // 输出5
    },
    methods: {
      getList: function () {
        const _self = this;
        let data = [
          { name: '1', age: '21' },
          { name: '2', age: '22' },
          { name: '3', age: '23' },
          { name: '4', age: '24' },
          { name: '5', age: '25' }
        ];
        _self.$set(_self, 'abc', data);
      }
    }
  })


  let technologyEnglish = new Vue({
    el: '.technologyEnglish',
    data: function(){
      return { technology_English: 'develop'}
    },
    beforeMount: () => {
      //
    },
    mounted: function () {
      //console.log(li.length)  // 输出5
    }
  })
</script>



<style src="./assets/styles/index.scss"></style>

Answer 1

import 不放在script里么？？

Answer 2

请一步一步的按照官方教程来进行学习，vue的文档已经是少见的清晰了。

https://cn.vuejs.org/v2/guide/

欢迎关注我的微信公众号：前端指南，希望我的回答能帮助到您