Vue版本

Vue完整版

  1. 有编译器compiler,体积大功能多,可以直接把html字符串变成DOM节点
  2. 视图,此处为html字符串,写在index.html里或者写在new Vue构造选项template里
  3. 引入方法
  • cdn引入:在index.html里用script标签引入,bootcdn:vue.min.js(无注释的完整版)
  • webpack引入:需要配置alias(详见官方文档)
  • @vue/cli引入:需要额外配置(详见官方文档)

Vue非完整版

  1. 无编译器compiler,体积小功能少了点
  2. 视图,只能自己在new Vue里写构造选项render函数里,用h来创建标签
  3. 引入方法
  • cdn引入:在index.html里用script标签引入,bootcdn:vue.runtime.min.js(无注释的非完整版)
  • webpack引入:默认使用非完整版的
  • @vue/cli引入:默认使用非完整版的
Vue单文件组件
  • 在webpack打包时,vue-loader可以把vue文件翻译成带有render函数的一个对象,这样在main.js里引用就行了,就不用我们自己去写render函数了
  • 整个vue文件被翻译成一个对象
  • vue文件里的template里的html字符串被翻译成非完整版需要的render函数。
非完整版好处
  1. 保证用户体验,用户下载的JS文件体积更小,但只支持render函数
  2. 开发者可直接在vue文件里写HTML标签,而不需要写render函数
  3. 因为可以用vue-loader 把vue文件里的HTML转为render函数

template

在index.html里引入run.runtime.min.js
新建vue文件Demo.vue

//在Demo.vue里
<template> //在vue文件Demo.vue里的template里写html字符串
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
</template> <script>
import HelloWorld from "./components/HelloWorld.vue"; export default {
name: "App",
data() {
return { n: 0 };
},
methods: {
add() {
this.n += 1;
}
}
};
</script> <style>
</style>

render

//在main.js里
import Vue from "vue";
import Demo from "./Demo.vue";//引入vue文件Demo.vue
import { render } from "sass"; Vue.config.productionTip = false; new Vue({
el: "#app",
render(h) {
return h(Demo); //这样用
}
});

之后预览时,vue-loader就可以进行转换了

codesandbox.io

进入网站,选Vue,然后就可以正常使用了

Hello,Vue的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  6. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  7. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  8. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. 初探Vue

    Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...

随机推荐

  1. Oracle Dataguard故障转移(failover)操作

    注意:故障转移会破坏DG的主从关系,使其变为互不相关的2个数据库,谨慎使用. (一)故障转移操作流程图 (二)故障转移操作流程 备注:以下操作步骤与上面流程图步骤一一对应 STEP1:刷新所有未发送到 ...

  2. 学习JavaScript数据结构与算法 2/15

    第一章 JavaScript简介 js不同于C/C++,C#,JAVA,不是强类型语言. 通常,代码质量可以用全局变量和函数的数量来考量(数量越多越糟).因此,尽可能避免使用全局变量. JS数据类型 ...

  3. Python元组运算符

    Python元组运算符: len(元组名): 返回元组对象的长度 # len(元组名): # 返回元组对象的长度 tuple_1 = (1,4,5,2,3,6) print(len(tuple_1)) ...

  4. luogu P6087 [JSOI2015]送礼物 二分 单调队列 决策单调性

    LINK:送礼物 原本想了一个 \(nlog^2\)的做法 然后由于线段树常数过大 T到30. 以为这道题卡\(log^2\)没想到真的有神仙写\(log^2\)的过了 是我常数大了 抱歉. 能过的\ ...

  5. C++中unordered_map几种按键查询比较

    unorder_map有3种常见按键查值方法. 使用头文件<unordered_map>和<iostream>,以及命名空间std. 第一种是按键访问.如果键存在,则返回键对应 ...

  6. ABP使用Nginx代理导致租户ID(Abp.TenantId)丢失

    描述:ABP使用Nginx代理导致租户ID(Abp.TenantId)丢失,自定义header无效无法传递,导致租户选择认证失败.原因是因为 Nginx 过滤是“.”这符号. 解决: 1,先从代码人手 ...

  7. 【NOIP2016】组合数问题 题解(组合数学+递推)

    题目链接 题目大意:给定$n,m,k$,求满足$k|C_i^j$的$C_i^j$的个数.$(0\leq i\leq n,1\leq j\leq \min(i,m))$. --------------- ...

  8. Windows-快速预览文件-QuickLook

    开源.免费的文件快速预览工具, 支持图片.文档.音视频.代码文本.压缩包等多种格式. 获得 Mac OS 空格键快速预览文件相同的体验 效果图 文件夹 音视频 浏览 压缩包,文本 支持的格式: 图片: ...

  9. Python爬虫教程:验证码的爬取和识别详解

    今天要给大家介绍的是验证码的爬取和识别,不过只涉及到最简单的图形验证码,也是现在比较常见的一种类型. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻 ...

  10. C语言基础printf()和scanf()函数

    在程序的运行中,我们经常会进行一些输入输出的操作,用来实现交互.为此, C语言便给出了 printf() 函数和 scanf() 函数用来实现输入和输出两个动作. 其中,printf()函数用于向控制 ...