Vue-cli中怎么用JS代码来实现动态生成样式和标签?

• 为什么要在Vue-cli中使用JS语法?
• Vue-cli的功能不够全面吗?
• Vue-cli的不足之处有哪些?
• Vue-cli框架中怎么使用JS语法?

  ---

  下面我来一一解答上面的问题(由于中午休息时间比较短, 我会尽可能的描述详细一点)

• (1) 因为Vue-cli是一个模型或者说前端框架, 他的使用要求是对HTML和JS语法有一定的了解, 并且在这之上还要了解Vue的标签和语法的相关知识. 而且Vue-cli安装的问题一大堆, bug解决起来也是相当复杂, 随着官方的一次次升级而变化无穷. 如果你想在Vue-cli基础上增加框架的灵活性, 建议使用HTML标签和JS来弥补Vue-cli的不足.

• (2) Vue-cli的功能其实很全面, 但是应用场景有限,一般只适合OA系统的开发, 对于博客,新闻等网站的开发似乎有些撇脚. 就比如设计一个菜单, 官方提供的菜单模板样式比较单调,且语法规则一大堆, 如果要设计一个个性十足,具有动态效果的菜单, Vue-cli恐怕就很难满足, 至少对于前端新手而言会面临技术瓶颈的.

• (3) VUE-CLI的不足之处就是通用性差、对前端技术要求高、安装和升级麻烦、灵活性较差。（当然优点也很多）

• (4) VUE-CLI中怎么使用JS语法？

<template>
   <div id = "main">
   </div>
</template>

<script>

export default {

   components: {},

   data () {

      return {
         totalNo: 0
   },
    update () { 
let _this = this
_this.initPage() 
},
    create () {},
    methods: {
      initPage () {
       let mainEle = document.getElementById('main')
       let htmlText = ''
       htmlText += '<button id = 'clickButton'>点我测试</button>'
       mainEle.innerHtml = htmlText
       let clickButtonEle = document.getElementById('clickButton')
       clickButtonEle.onclick = function () {
         console.log('测试成功')
       }
     }
   }

 }

}
</script>
  #main{
   text-align: center
}
<style></style>

illustration: 如果在VUE-CLI中使用原生js语法, 会失效. 按照上面的方式来操作就可以了.