(Vue)vue模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
插值
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
{{message}}
</div>
<script>
//vue实例化
//el 绑定html对象,选择器
//data:绑定html对象数据,双向绑定。可以用v-model
var vm = new Vue({
el:"#box",
data:{
message:"hello,vue"
}
}); </script>
</body>
</html>
HTML
使用v-html绑定html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box" v-html="message"> </div>
<script>
new Vue({
el:"#box",
data:{
message:"<p>我的家</p>"
}
})
</script>
</body>
</html>
属性
html属性中的值使用 v-bind指令。比如v-bind:class,v-bind:style等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<style>
.myclass{
background: green;
}
</style>
</head>
<body>
<div id="box">
<input type="checkbox" v-model="activeClass" id="mcheckbox" /><label for="mcheckbox">改变颜色</label>
<input type="checkbox" v-model="activeStyle" id="stylecheckbox" /><label for="stylecheckbox">改变字体大小</label>
<div v-bind:class="activeClass?'myclass':''" v-bind:style="activeStyle?'font-size:20px':''">请看颜色的变化</div>
</div>
<script>
new Vue({
el:"#box",
data:{
activeClass:false,
activeStyle:false
}
})
</script>
</body>
</html>
上面的代码,我们通过v-bind:class和v-bind:style为元素绑定了style和class。并在v-bind中使用了表达式。当activeClass和activeStyle为true的时候,div的class和style都将发生改变。
参数
参数在指数后,用冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
<div id="box">
<input type="checkbox" v-model="activeClass" id="mcheckbox" /><label for="mcheckbox">改变颜色</label>
<input type="checkbox" v-model="activeStyle" id="stylecheckbox" /><label for="stylecheckbox">改变字体大小</label>
<div v-bind:class="activeClass?'myclass':''" v-bind:style="activeStyle?'font-size:20px':''">请看颜色的变化</div>
<pre><a v-bind:href="url">百度</a></pre>
</div>
<script>
new Vue({
el:"#box",
data:{
activeClass:false,
activeStyle:false,
url:'http://www.baidu.com'
}
})
</script>
上面的代码就是通过v-bind:href,绑定了href属性。
事件绑定
通过使用v-on:参数,可以绑定事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
{{message}}
<!--
作者:offline
时间:2018-08-28
描述:v-on:click,点击事件
-->
<button v-on:click="reverseMessage">反转字符串</button>
<!--
作者:offline
时间:2018-08-28
描述:v-on:mouseover,鼠标进入事件,v-on:mouseout,鼠标移出事件
-->
<button v-on:mouseover="overColor" v-on:mouseout="outColor" v-bind:style="color">鼠标经过</button>
</div>
<script>
new Vue({
el:"#box",
data:{
message:"hello,vue",
color:'color:blue;'
},
methods:{
reverseMessage:function(){
this.message=this.message.split('').reverse().join('');
},
overColor:function(){
this.color="color:green";
},
outColor:function(){
this.color="color:blue";
}
}
})
</script>
</body>
</html>
上面的代码,通过v-on:click,绑定了click事件。vue中的methods可以定义方法。v-on:mouseover和v-on:mouseout监听了鼠标移入和移出事件。鼠标移入的时候,style的color为green,鼠标移出的时,style的color颜色为blue。
格式化
通过vue的filters属性,能够格式化data属性。下面的代码展示了时间格式化。通过在filters中定义一方法,该方法对属性进行格式化操作,并返回。使用格式化的时候,{{message|format|format2}}。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
<!--
作者:offline
时间:2018-08-28
描述:日期格式化
-->
{{time|formatTime}}
</div>
<script>
new Vue({
el:"#box",
data:{
time:"2018-10-11 08:20:11"
},
filters:{
formatTime:function(value){
var time = new Date(value);
var rtime=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
return rtime;
}
}
})
</script>
</body>
</html>
实例化时间对象,并指定时间。然后将时间格式为年月日格式。
缩写
Vue.js 为两个最为常用的指令提供了特别的缩写:v-bind:class,可以缩写为:class,v-on:click可以缩写为@click。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
.class1{
color: aquamarine;
}
</style>
</head>
<body>
<div id="box">
<!--
作者:offline
时间:2018-08-28
描述:日期格式化
-->
{{time|formatTime}}
<div :class="myclass">看我字体的颜色</div>
<div @click="clickFunc" :style="style">单击我</div>
</div>
<script>
new Vue({
el:"#box",
data:{
time:"2018-10-11 08:20:11",
myclass:'class1',
style:'cursor:pointer;border:1px solid gray;width:50px'
},
methods:{
clickFunc:function(){
console.log("单击了我");
}
},
filters:{
formatTime:function(value){
var time = new Date(value);
var rtime=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
return rtime;
}
}
})
</script>
</body>
</html>
(Vue)vue模板语法的更多相关文章
- vue基础---模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue.js 模板语法
本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...
- VUE:模板语法(小白自学)
VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- Vue基础之Vue的模板语法
Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...
- 前端框架之Vue(2)-模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue常用模板语法
常用模板语法 本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只 ...
- vue基础——模板语法
模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...
- 一起学Vue之模板语法
概述 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTM ...
- Vue小白篇 -Vue 的模板语法
可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替 <div id="box"> <!--模板语法--> <h2> ...
随机推荐
- Java NIO系列教程(三-十二) Buffer
原文链接 作者:Jakob Jenkov 译者:airu 校对:丁一 Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到 ...
- phpMyAdmin操作之改管理员密码
1.登录phpMyAdmin 默认地址:http://localhost/phpmyadmin 2.点击用户按钮 3.往下拉找到修改密码 点执行就修改了 注意: 如果再次登录时报错提示: #1045 ...
- vue当中设置全局变量的方法
import fn from 'fn' Vue.prototype.fn = fn; 调用的时候 this.fn.way
- 我要好offer之 链表大总结
单链表是一种递归结构,可以将单链表看作特殊的二叉树(我把它叫做一叉树) 单链表的定义: /** * Definition for singly-linked list. * struct ListNo ...
- 选择员工要有3S能力
企业的核心竞争力依托于高素质的员工.不断地对员工进行培训.提升并管理好员工,是让企业持续散发活力的一剂良药. 在企业里,有个说法叫三个房子有一个柱子,第一个是以人为本,怎么样吸引最优秀的员工:第二个是 ...
- HDU 6231 (二分+双指针)
题意:给一个长度为n的数组,问在由这个数组的所有的区间第k小组成B数组中,第m大元素是多少 解法:这题较难的地方在于转化思维.如果去求所有区间的第k小,最坏复杂度是O(n*n)肯定超时. 这题正确的解 ...
- 转 整理 Linux服务器部署系列之一—Apache篇2
http://www.jb51.net/article/46148.htm 如何查看Apache的连接数和当前连接数 查看了连接数和当前的连接数 netstat -ant | grep $ip:80 ...
- GridControl CardView ShowCardExpandButton or GridCardExpandButton
关于DevExpress.XtraGrid.v13.1.dll和DevExpress.XtraGrid.v12.2.dll中ShowCardExpandButton 或者 GridCardExpan ...
- configure: error: C++ preprocessor "/lib/cpp" fails sanity check
configure: error: C++ preprocessor "/lib/cpp" fails sanity check 参考链接: error: C++ preproce ...
- spring+jpa+HiKariCP+P6spy SSH HiKariCP P6spy
=============p6spy准备https://www.cnblogs.com/qgc88===================== 1.简单介绍p6spy,p6spy是一个开源项目,通常使用 ...