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模板语法的更多相关文章

  1. vue基础---模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  2. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  3. VUE:模板语法(小白自学)

    VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...

  4. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  5. Vue基础之Vue的模板语法

    Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...

  6. 前端框架之Vue(2)-模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  7. Vue常用模板语法

    常用模板语法   本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只 ...

  8. vue基础——模板语法

    模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...

  9. 一起学Vue之模板语法

    概述 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTM ...

  10. Vue小白篇 -Vue 的模板语法

    可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替 <div id="box"> <!--模板语法--> <h2> ...

随机推荐

  1. javascript中 for循环的一些写法 for length 以及for in 还有 for of 的区别

    最近在写一些前端的代码,遇到一个产品列表遍历的问题,正好使用到for 的几种用法,于是研究了下. 代码如下,先说明下goodslist 是一个产品列表 形如这样的数据格式 { ‘types’:1, ' ...

  2. bootstrap 事件shown.bs.modal用于监听并执行你自己的代码【写hostmanger关联部门遇到的问题及解决方法】

    背景:记录写hostmanger中用户下拉框关联部门遇到的问题及解决方法 问题:需求是展示页面展示用户所属的部门,点击修改按钮后,弹出对应的model,这个时候部门的select要默认选中用户所在的s ...

  3. excel 表格lookup 的操作

    这个实现语句如下,(写在2行然后向下拖动)(2007或以上版本): = IF(,ISBLANK($H2),$G2="), "", IF("), IF($H2&g ...

  4. 从Java源码到Java字节码

    Java最主流的源码编译器,javac,基本上不对代码做优化,只会做少量由Java语言规范要求或推荐的优化:也不做任何混淆,包括名字混淆或控制流混淆这些都不做.这使得javac生成的代码能很好的维持与 ...

  5. c#使用椭圆签名算法制作软件序列号

    椭圆曲线密码学(Elliptic curve cryptography,缩写为ECC)是基于椭圆曲线数学的一种公钥密码的方法.椭圆曲线在密码学中的使用是在1985年由Neal Koblitz和Vict ...

  6. 使用 IntelliJ IDEA 开发一般 Java 应用程序时配置 Allatori 进行代码混淆

    使用 IntelliJ IDEA 开发一般 Java 应用程序时通过 Allatori 进行代码混淆非常容易配置,下面总结一下本人经验,介绍一下配置方法. 首先在 IDEA 的 Module 所在硬盘 ...

  7. poj 3308(二分图的点权最小覆盖)

    Paratroopers Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8325   Accepted: 2502 Desc ...

  8. iOS-开发者账号失效后是否还可以打包

    参考链接:https://www.jianshu.com/p/601f596e8550

  9. js、jq平时积累

    1.window.onbeforeunload   =   function(){$(window).scrollTop(0);}  //在即将离开当前页面(刷新或关闭)时执行 JavaScript ...

  10. Codeforces Round #423 (Div. 2, rated, based on VK Cup Finals) E DNA Evolution

    DNA Evolution 题目让我们联想到树状数组或者线段树,但是如果像普通那样子统计一段的和,空间会爆炸. 所以我们想怎样可以表示一段区间的字符串. 学习一发大佬的解法. 开一个C[10][10] ...