Vue笔记-1

Vue笔记-1

1.两个版本名

• 完整版 vue.js
• 非完整版（运行时版）vue.runtime.js

2.版本引用

// 都可以直接从HTML里通过script标签引入
// 引入非完整版（版本仅举例）
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.runtime.min.js"></script>
// 引入完整版
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>

3.template和render的使用

• 完整版vue.js，视图写在HTML标签或template中：

  // 完整版需要编译器 compile
  new Vue({
    template: '<div>{{ hi }}</div>'
  })
  

• 非完整版，视图写在render函数里用h创建标签：

  // 不完整版不需要编译器
  new Vue({
    render (h) {
      return h('div', this.hi)
    }
  })
  // 函数参数h实为createElement，是创始者写好传给render的。（h可取名为任意字符）
  

• vue单文件组件，可将.vue文件翻译成 h 构建法

  // 引入视图
  <template>
  </template>
  
  <script>
  // 引入除了视图外的其他选项
      export default {
          data(){}, // 非完整版中data只能是函数
          methods：{}
      }
  </script>
  
  // 引入css样式
  <style scoped>
  </style>
  

  // 从JS中引入
  import Demo from './Demo.vue'
  new Vue ({
      el:'div id'
      render(h){
          return h(Demo)
      }
  })
  

4.完整版和非完整版的区别

默认使用非完整版，然后配合 vue-loader 和Vue文件来使用。vue-loader 会把vue文件里的HTML转为h函数，即在不写h函数的情况下使用h函数，做到和完整版一样的功能，并能缩减文件体积。

5.如何用 codesandbox.io 写 Vue 代码

• 第一步：打开codesandbox.io

• 第二步：点击右上角Create Sandbox

• 第三步：选择Vue即可创建并使用Vue了