模板引擎－vue中的模板如何被解析，指令如何处理
<div id='app'>
<div>
<input v-model="title"/>
<button v-on:click="add">submit</button>
</div>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
</div>
这是模板，那么模板是什么呢？
var obj = {
name: 'zhangsan',
age: 20,
getAddress: function(){
alert('beijing');
}
}
// 不用with
function fn(){
alert(obj.name);
alert(obj.age);
obj.getAddress();
}
fn();
// 使用width
function fn1(){
with(obj){
alert(name);
alert(age);
getAddress();
}
}
fn1();
在实际开发中，尽量不要使用with。fn是我们正常的使用。fn1使用with的情况。两是同样的效果，用with的里面，都不写是谁的属性，是谁统一的用with包起来。这个可读性可能没那么强。
<div id="app">
<p>{{price}}</p>
</div>
这个模板最终生成的函数是下面这个
/**
* _c : 创建dom标签
* _v : 创建文本节点
* _s : toString
*/
function render(){
with(this){ // this 就是 vm
return _c(
'<div>',
{
attrs:{"id":"app"}
},
[
_c('p',[_v(_s(price))])
]
)
}
}
这个this就是vm这个实例，这个_c就是vm._c，用来创建dom标签的。第一个参数是个div。第二个参数是个对象，对象里面有属性。第三个参数是个数组，数组里面只有一个元素，这个_c肯定也是vm._c。这个_c第一个参数是p，第二个参数是个数组，里面也是一个数组，_v(_s(price))，这里面的price肯定是vm.price，就是data.price。然后前面的_s就是vm._s，就是toString函数。_v也是vm._v，用来创建文本节点的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 模板 -->
<div id="app">
<input v-model='title'/>
<button v-on:click='add'>submit</button>
<ul v-for='item in list'>
{{item}}
</ul>
</div>
<!-- 源码 -->
<script src="./vue-2.6.10.js"></script>
<script>
var data = {
title: '',
list: []
}
// 初始化 vue 实例
var vm = new Vue({
el: '#app',
data: data,
methods: {
add: function(){
this.list.push(this.title);
this.title = ''
}
}
})
</script>
</body>
</html>
with(this) {
return _c('div',
{
attrs: {
"id": "app"
}
},
[
_c('input',
{
directives: [{ // 当title发生变化，会赋值给value，从而响应到input
name: "model",
rawName: "v-model",
value: (title),
expression: "title"
}],
domProps: {
"value": (title)
},
on: { // input里面的数据改变，事件监听到，会赋值给 title
"input": function($event) {
if ($event.target.composing) return;
title = $event.target.value
}
}
}),
_v(" "),
_c('button',
{
on: {
"click": add
}
},
[_v("submit")]
),
_v(" "),
_l(
(list),
function(item) {
return _c('ul', [_v("\n " + _s(item) + "\n ")])
}
)
], 2)
}
是这个样子的。这就是这个demo所对应的render函数。在创建input的时候第二个参数有个directives。叫做指令，指令名字是model。value是title，也就是vm.title。后面_v('')，_v表示创建文本节点，主要是input和button有个换行，如果不换行，就不会有_v去创建一个空的文本节点。_l就是一个数组，针对list返回li的标签。
模板引擎－vue中的模板如何被解析，指令如何处理的更多相关文章
- Laravel 模板引擎Blade中标签详细介绍
这篇文章主要介绍了Laravel模板引擎Blade中section的一些标签的区别介绍,需要的朋友可以来看看. Laravel 框架中的Blade模板引擎很好用,但是官方文档介绍的并不详细,我接下来将 ...
- 写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）
前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
- Laravel模板引擎Blade中section的一些标签的区别介绍
Laravel 框架中的 Blade 模板引擎,很好用,但是在官方文档中有关 Blade 的介绍并不详细,有些东西没有写出来,而有些则是没有说清楚.比如,使用中可能会遇到这样的问题: 1.@yield ...
- day94:flask:Jinjia2模板引擎&flask中的CSRF攻击&Flask-SQLAlchemy的创建模型类和基本的增删改查
目录 1.Jinjia2模板引擎 1.Jinjia2加载模板并传递数据到模板中 2.Jinjia2的模板语句 3.模板中特有的变量和函数 4.模板中内置的过滤器 5.自定义过滤器 6.模板继承 2.在 ...
- Java 前端模板引擎学习：thymeleaf 模板引擎
模板引擎接口 ITemplateEngine 一.后台数据与外部数据 1.处理后台数据 $表达式是个变量表达式,用于处理在 request parameters and the request, s ...
- 【转链接】Handlebars模板引擎以及浅谈模板引擎的实现原理
什么叫做“模板引擎“?我是这么理解的:就是对一些待填入数据的占位符的解析.如果你使用过Python的django框架,那你肯定是模板一点也不陌生.模板引擎就是解析模板的,把后端数据塞到前端页面模板. ...
- Django模板-在视图中使用模板
之前我们已经有了自己的视图mysite.views.py中,应该是这样子的 from django.http import HttpResponse import datetime def curre ...
- 使用不同模板引擎beetl、FreeMarker、Velocity动态解析sql的方法
1. String sql = null;if(null == renderType || renderType.equals(ConstantRender.sql_renderType_beetl) ...
- 后台模板引擎ejs与前台模板引擎artTemplate的简单介绍
动态网页是指前端页面当中的数据内容来源于后台数据库,前端的html代码会随着后台数据的变化而变化,是动态生成的.制作动态网页有两种方式,一种方式是在后台拿到前端的html模板,利用后台模板引擎(如ej ...
随机推荐
- 【linux】查看TensorRT版本
查看TensorRT版本: dpkg -l | grep TensorRT echo nvidia@tegra-ubuntu:~$ dpkg -l | grep TensorRT ii libnvin ...
- ubuntu18.10 安装nodejs
进入官网下载页面 下载对应版本 2.解压tar.xz文件在linux下,大部分情况下不能直接解压tar.xz的文件. 需要用 xz -d xxx.tar.xz 将 xxx.tar.xz解压成 xxx. ...
- Deepin安装JavaFX
1.环境:JDK1.8(目前国内好用的版本里比较流行的是这个版本),deepin 15.11(linux内核是5.2.9,安装了大黄蜂驱动): 2.由于是用的JDK1.8,所以没法用最新的openjf ...
- 【转帖】IP地址总数
http://blog.sina.com.cn/s/blog_ac1d70a40102xn8z.html 计算规则挺有意思的 私有IP地址段: A类:10.0.0.0到10.255.255.255 1 ...
- 剑指offer31：整数中1出现的次数（从1到n整数中1出现的次数）
1 题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙 ...
- django使用pyecharts(3)----django加入echarts_定时全量更新
三.Django 前后端分离_定时全量更新图表 1.安装 djangorestframework linux pip3 install djangorestframework windows pip ...
- IDEA使用技巧--将本地项目和git远程项目关联
之前开发没有从头儿搭建过新项目,都是从IDEA配置下项目的git地址,pull代码之后进行开发,提交.这次需要将本地新建的项目push到在git上同样是新建的空项目上去(git上的项目只有工程名和re ...
- entity-framework-core – 实体框架核心RC2表名称复数
参考地址:https://docs.microsoft.com/zh-cn/ef/core/modeling/relational/tables http://www.voidcn.com/artic ...
- 前端开发 Vue -4promise解读2
https://www.runoob.com/vue2/vue-tutorial.html promise promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执 ...
- mysql database和schema区别
在MySQL的语法操作中(MySQL5.0.2之后),可以使用CREATE DATABASE和CREATE SCHEMA来创建数据库,两者在功能上是一致的.在使用MySQL官方的MySQL管理工具My ...