1.{{...}}（双大括号）

文本插值

<div id="app">

  <p>{{ message }}</p>

</div>

2.v-html指令

用于输出 html 代码

<div id="app">

    <div v-html="message"></div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    message: '<h1>hi,jacke</h1>'

  }

})

</script>

3.v-bind 指令和缩写

HTML 属性中的值应使用 v-bind 指令。

以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例</title>

</head>

<style>

.class1{

  background: #444;

  color: #eee;

}

</style>

<body>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">

  <div v-bind:class="{'class1': class1}">

    v-bind:class 指令

  </div>

</div>

<script>

new Vue({

    el: '#app',

  data:{

      class1: true

  }

});

</script>
<div id="app">

    <pre><a v-bind:href="url">百度</a></pre>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    url: 'http://www.baidu.com'

  }

})

</script>

缩写

<!-- 缩写 -->

<a :href="url">...</a>

4.JavaScript表达式

<div id="app">

    {{5+5}}<br>

    {{ ok ? 'YES' : 'NO' }}<br>

    {{ message.split('').reverse().join('') }}

    <div v-bind:id="'list-' + id">Lily</div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    ok: true,

    message: 'Jacke',

    id : 1

  }

})

</script>

5.v-on指令和缩写

<div id="app">

        <p id="content">注意我的背景色</p>

        <input type="button" v-on:click="setBgColor" value='点我'/>

    </div>

    <script>

        new Vue({

            el:'#app',

            methods:{

                setBgColor:function(){

                    document.getElementById('content').style.background='red';

                }

            }

        })

    </script>

缩写

<!-- 缩写 -->

<a @click="doSomething">...</a>

6.v-model双向数据绑定

<div id="app">

    {{message}}

    <input type="text" v-model="message" />

</div>

<script>

 new Vue({

     el:"#app",

    data:{

        message:"hello"

    }

 })

</script>

7.自定义过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->

{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->

<div v-bind:id="rawId | formatId"></div>

示例，

<div id="app">

    <!-- 过滤器可以串联 -->

    {{message|subMessage|toUpper}}

    <br>

    <!-- 过滤器是 JavaScript 函数，因此可以接受参数 -->

    <!-- 这里job是第一个参数，apple是第二个参数，表达式2+3运行后的结果是第三个参数 -->

    {{job|doWhat('apple',2+3)}}

</div>

<script>

 new Vue({

     el:"#app",

    data:{

        message:"hello my friend",

        job:"sale"

    },

    filters:{

        subMessage:function(value){

            return value.substring(0,7)

        },

        toUpper:function(value){

            return value.toLocaleUpperCase()

        },

        doWhat:function(v1,v2,v3){

            return v1+" "+v2+" "+v3

        }

    }

 })

</script>

Vue（五）：Vue模板语法的更多相关文章

  1. Vue实例与模板语法

    VUE基础使用方法 一.安装 1.NPM 在用 Vue 构建大型应用时推荐使用 NPM 安装[1].NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用.同时 Vue ...

  2. Vue介绍以及模板语法-插值

    1.Vue的介绍 Vue是一套用于构建用户界面的渐进式框架. 注意:Vue是一个框架,相对于jq库来说,是由本质的区别的:https://cn.vuejs.org/ Vue不支持IE8及一下版本,因为 ...

  3. 前端框架VUE——数据绑定及模板语法

    一.数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ msg }} </di ...

  4. Vue API 3模板语法 ，指令

    条件# v-if# v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. v-show# v-show 指令也是用于根据条件展示一块内容.v-show ...

  5. vue学习笔记 模板语法（三）

    <div id="kk"> <div>直接输出文本:{{msg}}</div> <div>自定义过滤器输出文本:{{msg|capi ...

  6. Vue笔记之模板语法

    插值 比较常用的就是插值,插值就是{{ foobar }}用两个大括号包起来的一个变量,显示的时候会将双大括号标签替换为这个变量的值. 基本的用法就是: <p>{{ message }}& ...

  7. Vue详细介绍模板语法和过滤器的使用！

    表达式 {{ XXX }}使用过滤器 {{ XXX | yyy}}使用多个过滤器 {{ XXX | yyy | yyy1}}过滤器带参数 {{ XXX | yyy(123,"zhuiszhu ...

  8. Vue.js模板语法介绍

    Vue.js模板.指令 模板语法概述 1.如何理解前端渲染? ​ 把数据填充到HTML标签中,一般我们使用Ajax将数据从后台查询出,结合模板() 2.前端渲染方式 2.1.原生js拼接字符串 ​ 使 ...

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

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

  10. 【Vue】浅谈Vue(一)：从模板语法数据绑定、指令到计算属性

    写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...

随机推荐

  1. Node,Sockets,Cores,Threads

    http://fishcried.com/2015-01-09/cpu_topology/ http://kodango.com/cpu-topology http://www.udpwork.com ...

  2. Hibernate学习笔记一：项目创建与基本配置文件

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6760773.html  一:ORM ORM:对象-关系 映射. 即:把Java中有关联关系的对象,转换成关系型 ...

  3. JavaWeb应用项目中文乱码的解决

     转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6383542.html 在把web项目成功部署到云主机后,通过浏览器成功地访问到了你的网站,却发现页面里本该由 ...

  4. python之函数用法get()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法get() #http://www.runoob.com/python/att-dic ...

  5. 删除草稿信息之后 threads表的数据没有发生变化

    现象描述: 无论是用_id来删除草稿信息,还是用thread_id和type来删除草稿,草稿都可以删除掉,但是threads表中的数据都没有发生变化. private void removeDraft ...

  6. Maven2和ivy比较

    Maven 2和Ivy常被放在一起对比,但实际上两者是不同类型的工具.Ivy仅提供依赖管理功能,但是Maven 2是一个软件项目管理综合工具,能够管理构建.报告.文档,以及根据中心化的信息来管理依赖. ...

  7. MATLAB 的输入输出命令

    MATLAB 的输入输出命令: >> A='woshi'; >> disp(A) woshi fscanf和fprintf命令的行为像C scanf和printf函数.他们支持 ...

  8. 关于Apache (httpd)服务器防DDOS模块mod_evasive的使用说明

    关于Apache (httpd)服务器防DDOS模块mod_evasive的使用说明 1. mod_evasive 介绍: mod_evasive 是Apache(httpd)服务器的防DDOS的一个 ...

  9. Mysql5.6 make 错误以及解决办法

    1.若make出现类似错误: CMake Error: CMake was unable to find a build program corresponding to "Unix Mak ...

  10. php.ini 中文版

    作者:金步国 版权声明 本文作者是一位开源理念的坚定支持者,所以本文虽然不是软件,但是遵照开源的精神发布. 无担保:本文作者不保证作品内容准确无误,亦不承担任何由于使用此文档所导致的损失. 自由使用: ...