1vue模板语法
<body>
<div id="app1">
<div>{{msg}}</div>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app1',
data: {
msg:'Hello vue'
}
})
</script>
</body>
<!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>
<style type="text/css">
[v-clock] {
display:none
}
</style>
</head>
<body>
<div id="app1">
<div v-colck>{{msg}}</div>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app1',
data: {
msg:'Hello vue'
}
})
</script>
</body>
</html>
上面是v-clock指令，解决插值表达式闪动问题
下面是v-text
<!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>
<style type="text/css">
[v-clock] {
display:none
}
</style>
</head>
<body>
<div id="app1">
<div v-text="msg"></div>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app1',
data: {
msg:'Hello vue'
}
})
</script>
</body>
</html>
v-html解析html的标签
<!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>
<style type="text/css">
[v-clock] {
display:none
}
</style>
</head>
<body>
<div id="app1">
<div v-html="msg1"></div>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app1',
data: {
msg1:'<h1>html</h1>'
}
})
</script>
</body>
</html>
v-pre跳过插值表达式的编译，显示原始内容
<!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>
<style type="text/css">
[v-clock] {
display:none
}
</style>
</head>
<body>
<div id="app1">
<div v-pre=>{{msg1}}</div>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app1',
data: {
msg1:'<h1>html</h1>'
}
})
</script>
</body>
</html>
v-once可以提高性能
v-model 用在input标签中，数据双向绑定
<!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="app1">
<div v-text='msg1'></div>
<div>
<input type="text" v-model='msg1'>
</div>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app1',
data: {
msg1:'Hello world'
}
})
</script>
</body>
</html>
1vue模板语法的更多相关文章
- angular2系列教程（二）模板语法
今天我们要讲的是angualr2的模板语法,官网写的很清楚,但我也用通俗易懂的讲法再罗列一下吧! 例子
- Angular2 模板语法
1. 说明 Angular2的模板用来显示组件外观,作为视图所用,用法和html语法基本一致,最简单的Angular2的模板就是一段html代码.Angular模板语法主要包括以下几个部分: l 直接 ...
- FreeMarker模板语法
四.FreeMarker模板语法 要编写复杂的模板需要熟悉FreeMarker语法规则,官网有详细说明,中文帮助也比较详细了,下面这些内容是从网上收罗来的,感谢网友的分享,经过整理与修改的内容如下.建 ...
- PHPCMS标签:PC标签模板语法规则
模板语法规则1.变量表示{$name} 被解析成 <?=$name?>,表示显示变量$name的值,其中的“name”由英文字母.数字和下划线组成首字母必须是英文字母或者下划线. 2.常量 ...
- 【Vue】浅谈Vue(一)：从模板语法数据绑定、指令到计算属性
写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...
- Django——模板层(template)（模板语法、自定义模板过滤器及标签、模板继承）
前言:当我们想在页面上给客户端返回一个当前时间,一些初学者可能会很自然的想到用占位符,字符串拼接来达到我们想要的效果,但是这样做会有一个问题,HTML被直接硬编码在 Python代码之中. 1 2 3 ...
- 【每天半小时学框架】——React.js的模板语法与组件概念
[重点提前说:组件化与虚拟DOM是React.js的核心理念!] 先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...
- 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Django学习笔记（3）——表单，测试和模板语法的学习
一,表单form 为了接收用户的投票选择,我们需要在前段页面显示一个投票界面,让我们重写之前的polls/detail.html文件,代码如下: <h1>{{ question.quest ...
- Django（四）框架之第三篇模板语法
https://www.cnblogs.com/yuanchenqi/articles/6083427.htm https://www.cnblogs.com/haiyan123/p/7725568. ...
随机推荐
- 从零搭建hadoop集群之hadoop集群安装
1.集群规划 HDSF YARN hadoop01 NanemNode(主机点),DataNode NodeManager hadoop02 DataNode, SecondaryNamenode ...
- POWER BI - 根据条件，改变数值的颜色Conditional formatting
在visual块,右键Column选择Conditional formatting 举例,比如difference > 0 显示红色,否则<0显示绿色 如何根据 measure 写特定条件 ...
- matlab画图之plot画折线图
Matlab绘制折线图 使用plot(x,y)函数创建折线图时,x,y有以下要求: ①如果 X 和 Y 都是向量,则它们的长度必须相同.plot 函数绘制 Y 对 X 的图. ②如果 X 和 Y 均为 ...
- 吴恩达老师机器学习课程chapter09——异常检测
吴恩达老师机器学习课程chapter09--异常检测 本文是非计算机专业新手的自学笔记,高手勿喷. 本文仅作速查备忘之用,对应吴恩达(AndrewNg)老师的机器学期课程第十五章. 目录 吴恩达老师机 ...
- intellij idea 用 Gradle新建 spring boot
intellij idea用的是ideaIU-2017.1.4 .spring boot用的是2.10 出现错误 ERROR StatusLogger Log4j2 could not find a ...
- 给定一个包括 n 个整数的数组 nums 和 一个目标值 target。找出 nums 中的三个整数，使得它们的和与 target 最接近。返回这三个数的和。假定每组输入只存在唯一答案
var threeSumClosest = function(nums, target) { let ans = nums[0] + nums[1] + nums[2]; const len = nu ...
- 开发谷歌插件--web3钱包（一）
之前开发了一款谷歌插件,因为很简单没有什么好记录的. 这次记录下一款新的钱包功能的插件,其中遇到的问题,以及解决方案. 首先遇到的问题就是唤醒: 小狐狸钱包应该都用过,点击图标就会唤起登录页面(pop ...
- get 和 post 请求在缓存方面的区别
get 请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以可以 使用缓存. post 不同,post 做的一般是修改和删除的工作,所以必须与数据库交互,所以不能使用 缓存.因此 ge ...
- 更改NX TITLE为路径
#include<iostream>#include <conio.h>#include <math.h>#include <stdio.h>#incl ...
- python菜鸟学习： 5.字符串的基本用法,进度条显示
# -*- coding: utf-8 -*-import sys,timestr1 = "my name is liyuzhoupan"# 首字母大写print(str1.cap ...