Vue是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
vue的文档简洁易懂,推荐直接看文档Vue2和Vue3。注意Vue文档中提到了“虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。”这一点,在网上冲浪的时候经常看到有人在问“Vue是不是MVVM”的问题,所以Vue可以说像MVVM,但它不完全是。
Vue的两个版本
当我们根据文档安装Vue(这里介绍的都是vue2.x版本)的时候,我们可以看见三种安装方式。
-
利用
<script>标签引入CDN -
用
NPM或YARN来安装到本地 -
安装
vue/cli工具,可以做到开箱即用的效果
不管是引入CDN还是安装到本地,你都可以在文件夹中发现很多种Vue.js的版本,它们可以被分成两类:vue.js(完整版)和vue.runtime.js(运行时版)。下面我们来看一下这两种版本的不同之处:
-
完整版
- 同时包含编译器(compiler)和运行时
-
运行时
- 没有编译器,因此体积比完整小很多
编译器它的功能顾名思义就是可以把某些东西编译成某些规则下的代码,在vue中就是可以把模板字符串编译JS渲染函数的代码。 完整版因为有编译器,所以可以直接在html或者template选项中写代码,但是在运行时中只能使用render函数里用h来创建新的标签。
template 和 render
上面提到了template和render,接下来我们分别了解一下。
template可以说是一个模板占位符,有三种使用方法:
可以写到vue构造器中
let app = new Vue({
el:'#app',
template:`<div>{{占位}}</div>`
})
可以作为标签写在html中
<template id='test'>
<div>我是个占位的</div>
</template>
可以写到script标签中
<script type='x-template' id='test'>
<div>我来占位</div>
</script>
render函数的话,通过学习文档,可以知道Vue会通过建立一个虚拟DOM来改变真实的DOM。
render(h) {
return h('h1', {}, this.blogTitle)
}
h()参数可以创建一个虚拟DOM节点,h(标签名/组件/必填,属性、prop、事件对应的对象/可选,子虚拟节点/可选)
目前了解的还不够深入,之后再努力学习回来补充。
最后,推荐几个可以在线写代码的网站:
Glitch: The friendly community where everyone builds the web
StackBlitz | Instant Dev Environments | Click. Code. Done. - StackBlitz
CodeSandbox: Online Code Editor and IDE for Rapid Web Development
朋友们大家好,一下子更新了很多篇文章(因为把之前在简书写的东西都转过来了,以后主要就在掘金更新了,初学者,如果有错误的话希望大家指正出来帮助我更快进步,谢谢大家!)