1、模板

一个最简答的模板:

<div id="app">
{{ message }}
</div>

v-for模板:

<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>

2、模板类似于html代码,又不是。因为模板中含有v-if,v-for,@click等不属于html的属性代码。

3、怎么解析?

(1)首选模板含有v-for等逻辑,因此必须使用js来进行解析。(html和css解析不了)

(2)js解析成什么?js会解析为一个js函数,即render函数,这个render函数返回vode对象,后面其他函数(update)将vnode渲染成html。

update中分为首次渲染和更新渲染。

说明:vue中的render函数使用了with语法。平时开发不建议使用with语法。

vue 模板如何解析的更多相关文章

  1. Vue模板内容

    前面的话 如果只使用Vue最基础的声明式渲染的功能,则完全可以把Vue当做一个模板引擎来使用.本文将详细介绍Vue模板内容 概述 Vue.js使用了基于HTML的模板语法,允许声明式地将DOM绑定至底 ...

  2. 【vuejs深入二】vue源码解析之一,基础源码结构和htmlParse解析器

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内 ...

  3. 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...

  4. Vue源码解析(一):入口文件

    在学习Vue源码之前,首先要做的一件事情,就是去GitHub上将Vue源码clone下来,目前我这里分析的Vue版本是V2.5.21,下面开始分析: 一.源码的目录结构: Vue的源码都在src目录下 ...

  5. webpack4.x加vue模板文件简单还原vue-cli

    1.首先 npm init -y 创建一个项目 2.安装vue npm install vue --save 3.然后安装webpack 注意如果全局没有还要安装全局的webpack和webpack- ...

  6. Vue基础系列(三)——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  7. 【VUE】Vue 源码解析

    Vue 源码解析 Vue 的工作机制 在 new vue() 之后,Vue 会调用进行初始化,会初始化生命周期.事件.props.methods.data.computed和watch等.其中最重要的 ...

  8. [Vue源码]一起来学Vue模板编译原理(一)-Template生成AST

    本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vu ...

  9. [Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串

    本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...

随机推荐

  1. 常见排序的JAVA实现和性能测试

    五种常见的排序算法实现 算法描述 1.插入排序 从第一个元素开始,该元素可以认为已经被排序 取出下一个元素,在已经排序的元素序列中从后向前扫描 如果该元素(已排序)大于新元素,将该元素移到下一位置 重 ...

  2. windows 下运行 UglifyJS

    Node 0.52版本支持windows,因此UglifyJS可以在windows上运行,下面简介他的方法: 1.下载node.exe,现在最新版本0.52,他的官网http://nodejs.org ...

  3. 通过path绘制点击区域

    通过path绘制点击区域 效果 源码 https://github.com/YouXianMing/Animations // // TapDrawImageView.h // TapDrawImag ...

  4. python显示多个图表

    plt.figure(figsize=(64,64)) 每次都有创建新的,否则会覆盖 plt.subplot(121) plt.imshow(img,'gray') plt.title('origin ...

  5. Eclipse 乱码 解决方案总结(UTF8 -- GBK)

    UTF8 --> GBK;   GBK --> UTF8 eclipse的中文乱码问题,一般不外乎是由操作系统平台编码的不一致导致,如Linux中默认的中文字体编码问UTF8, 而Wind ...

  6. javascript中使用new与不使用实例化对象的区别

    我们先来看个实例 function Me(name,age,job){ this.name = name; this.age = age; this.job = job; } 请问这以下两种实例化对象 ...

  7. 【BZOJ】【3211】花神游历各国

    线段树/暴力 线段树区间开方 唉,我傻逼了一下,TLE了一发,因为没考虑到0的情况…… 好吧简单来说一下,线段树动态查询区间和大家都会做……比较麻烦的是这次的修改变成开方了,然而这并没有什么好虚的,注 ...

  8. Chart:ECharts

    ylbtech-Chart:ECharts ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome, ...

  9. [转]使用HackCube-Special分析胎压传感器信号

    胎压无线传感器安全检测 我们团队之前也有用USRP和GNUradio对其他的胎压设备进行的安全检测,我不使用这套环境的原因是软件无线电的设备和笔记本已经算体积不小的一套设备,通常测试环境都在户外,在这 ...

  10. [leetcode]Remove Duplicates from Sorted List II @ Python

    原题地址:https://oj.leetcode.com/problems/remove-duplicates-from-sorted-list-ii/ 题意: Given a sorted link ...