Vue入门前置

入门Vue的必要前置知识

  • HTML + CSS + JavaScript.
  • 有一点Webpack使用经验,理解Module和Plugin.
  • 对MVC,MVP,MVVM有一定理解.

我是如何入门使用Vue的?

跟着Vue.js官网的起步教程, 在首页中点击起步按钮即可阅读相关文档.

另:
Vue作者尤雨溪 : 新手向：Vue 2.0 的建议学习顺序

Vue不同版本的区别?

大体分为两种，完整版和运行时版。
含有runtime的就是仅含运行时的版，完整版则包含编译器(compiler)和运行时(runtime).

例:
vue.js对应完整版(编译器+运行时)
vue.runtime.js对于仅包含运行时版

该使用啥?

个人建议:
入门阶段的基本语法学习,部分小demo,验证语法时可以使用完整版.
有一定规模的项目,结合打包工具,提前编译后使用仅含运行时的min版本.

完整版和运行时版编码时的差异

差异主要体现在template和render的使用上.

  • template 特指Vue提供的模板语法
  • render 特指Vue实例上的函数

完整版，可以在HTML页面上直接引入并使用, 且可以在HTML标签上直接使用Vue指令和模板语法，完整版Vue会自动解析语法。

runtime版，不支持直接在HTML标签上直接使用Vue指令和模板语法，非完整版Vue不支持解析对应的语法。但可以通过render函数构建所需DOM(极为繁琐，一般不这么做)

示例代码-1：
引入runtime版Vue后通过render构建页面DOM并展示组件数据.注意不使用render无法展示数据.

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>  
<html lang="zh">  
  <head>    
      <meta charset="utf-8">  
      <title>Runtime Vue.js</title>  
  </head>  
  <body>   
          <div id="app">{{ n }}</div>  
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.runtime.min.js"></script>  
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
new Vue({  
  el:'#app',  
  data:{  
    n: 10  
  },  
  render(createElement){  
    return createElement('div', this.n)  
  }  
  
})

示例代码-2：
引入完整版Vue后通过模板语法构建页面DOM并展示组件数据.

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>  
<html lang="zh">  
  <head>    
      <meta charset="utf-8">  
      <title>Complete Vue.js</title>  
  </head>  
  <body>   
          <div id="app">{{ n }}</div>  
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
  </body>
</html>
1
2
3
4
5
6
new Vue({  
  el:'#app',  
  data:{  
    n: 10  
  }
})
Vue
#JavaScript #Vue
Vue入门前置
http://example.com/2023/01/08/Vue入门前置/
作者
Ray
发布于
2023年1月8日
许可协议