<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>vue学习</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->

     <script src="vue.js"></script>

 </head>

 <body>

 <style>

     .class1{

         background-color: #444;

         color: orange;

     }

 </style>

 <div id="app">

     <!--{{}}用于文本插值-->

     <p>{{msg}}</p>

     <p>{{html1}}</p>

     <!--v-html指令用于输出html代码-->

     <p v-html="html1"></p>

     <!--html属性中的值使用v-bind-->

     <label for="r1">修改颜色</label><input type="checkbox"  v-model="class1" id="r1"><br><br>

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

     <!--Vue支持完全的javascript表达式-->

     {{5+5}}

     {{ok? 'true':'false'}}

     {{msg.split(' ').reverse().join(',')}}

     <!--带有v-前缀的是Vue指令，表达式的值改变时，映射到DOM上-->

     <div class="div1" v-if="seen">you can see that</div>

     <!--参数-->

     <!--注意下面两种情况-->

     <!--v-bind将该元素的href值与表达式href值绑定-->

     <div><a v-bind:href="href">click this</a></div>

     <div><a href="href">click this</a></div>

     <!--修饰符：如.指明的特殊后缀，用于指定应该以特殊方式绑定-->

     <!--.prevent告诉v-on对于事件调用event.preventDefault()-->

     <form v-on:submit.prevent="onSubmit"></form>

     <!--v-model可以实现数据双向绑定-->

     <!--下面的例子中数据同时变化-->

     {{msg1}}

     <input type="text" v-model="msg1">

     <!--v-bind缩写为:,v-on缩写为@-->

     <button @click="reverseMsg1">点击反转msg1</button>

     <!--过滤器-->

     <div>{{msg2|capitalize}}</div>

 </div>

 <script>

     var vm =new Vue({

         el: '#app',

         data: {

             msg: 'hello msg',

             ok: 1,

             html1: '<span color="red">this is red</span>',

             class1: false,

             seen: true,

             href: 'https://g.cn',

             msg1: 'hello msg1',

             msg2:'msg2'

         },

         methods:{

             reverseMsg1:function(){

                 this.msg1= this.msg1.split('').reverse().join('');

             }

         },

         filters:{

             capitalize:function(msg2){

                 if(!msg2){

                     return ''

                 }

                 msg2=msg2.toString()

                 return msg2.slice(0,1).toUpperCase()+msg2.slice(1)

             }

         }

     })

 </script>

 </body>

 </html>

运行结果：

参考：https://cn.vuejs.org/v2/guide/syntax.html，http://www.runoob.com/vue2/vue-template-syntax.html

Vue学习2：模板语法的更多相关文章

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

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

  2. Vue实例与模板语法

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

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

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

  4. Python学习---django模板语法180122

    django模板语法[Template] 模版的组成:  HTML代码+逻辑控制代码  <h1> {{ user_name }} </h1> 逻辑控制代码的组成: 1.变量: ...

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

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

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

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

  7. Vue笔记之模板语法

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

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

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

  9. Vue学习笔记-基本语法

    插值文本(输出文本):{{ }}或v-textHtml(输出Html):v-html 监听属性常用于表单输入时要进行的动作watch : { dataValue:function(val) { }} ...

  10. Vue.js模板语法介绍

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

随机推荐

  1. 图论算法之DFS与BFS

    概述(总) DFS是算法中图论部分中最基本的算法之一.对于算法入门者而言,这是一个必须掌握的基本算法.它的算法思想可以运用在很多地方,利用它可以解决很多实际问题,但是深入掌握其原理是我们灵活运用它的关 ...

  2. CSS_圣杯布局和双飞翼布局

    参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http: ...

  3. 新浪实时股票数据接口http://hq.sinajs.cn/list=股票代码

    股票数据的获取目前有如下两种方法可以获取: 1. http/JavaScript接口取数据 2. web-service接口 1.http/JavaScript接口取数据1.1Sina股票数据接口以大 ...

  4. haskell实现简易计算器

    > module Main where > import System.IO > import Data.Char > import Control.Monad > im ...

  5. [LeetCode] Design Linked List 设计链表

    Design your implementation of the linked list. You can choose to use the singly linked list or the d ...

  6. 织梦手机站下一篇变上一篇而且还出错Request Error!

    最新的织梦dedecms程序手机版下一篇变上一篇而且还出错Request Error!,这是因为官方写错了一个地方 打开 /include/arc.archives.class.php 找到 $mli ...

  7. corefx 源码追踪：找到引起 SqlDataReader.ReadAsync 执行延迟的那行代码

    最近遇到一个非常诡异的问题,在一个 ASP.NET Core 2.2 项目中,从 SQL Server 数据库查询 100 条数据记录,会出现 16-22s 左右的延迟.延迟出现在执行 SqlData ...

  8. 20175303 Mycp实现Linux下cp xxx1 xxx2的功能

    20175303 Mycp实现Linux下cp xxx1 xxx2的功能 一.题目要求 编写MyCP2.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP2支持两个参数: ja ...

  9. mongodb 笔记

    1.java驱动下的mongo操作 1.1 数据库连接 package com.mongodb.text; import java.net.UnknownHostException; import c ...

  10. python生成excel测试数据

    在功能测试时,经常会测到excel文件导入导出的功能,导入与导出时,需要测试系统单次导入大批量数据时是否正常, 如果系统承受不起太大的数据导入,则需要开发限制单次导入的数量,以防止系统服务异常.大量的 ...