<!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. selenium切换窗口后定位元素出现问题的解决方案

    在做UI自动化的过程中,有时需要由一个窗口跳转到另一个窗口,这时直接去定位页面元素,可能会出现问题,这时,我们需要将driver与新的窗口进行绑定. 完整代码如下:(python版) #coding= ...

  2. PostgreSQL自学笔记:7 插入、更新与删除数据

    7 插入.更新与删除数据 7.1 插入数据 先创建表person: create table person( id int not null, name char(40) not null defau ...

  3. python3 excel文件的读与写

    from openpyxl import load_workbook class RwExcelFile: def read_Excel(self,file_path): ''' 读取excel中所有 ...

  4. S0.0 计算机如何看东西

    标签(空格分隔):数字图像处理 opencv 当我们用特定软件打开一张图片或者更改某些位图的格式为txt时,就会发现图像的本质不过就是一堆数据罢了. 采样 我们可以用相机采样到一幅二维图像,图像的分辨 ...

  5. Hibernate 配置文件的基础配置

    Hibernate 配置文件主要用于配置数据库连接和 Hibernate运行时所需的各种属性 每个 Hibernate 配置文件对应一个 Configuration 对象 Hibernate.cfg. ...

  6. h5 canvas与SVG的比较

    画布 什么是canvas? HTML5的canvas标签使用JavaScript可以在网页上绘制图像,画布为一个矩形. 画布本身没有绘制能力,只能通过脚本来绘制. 画布例子: <canvas i ...

  7. HBase RegionServer Pause for hours 卡顿几小时 故障

    关键词:hbase jvm gc regionserver wal pause 背景: HBase 1.1.2 客户的hbase集群最近出现RegionServer宕机情况.跟踪了master和RS日 ...

  8. __http原理__01__通信流程_消息格式

    本文转自  菜鸟教程  一.HTTP协议(HyperText Transfer Protocol,超文本传输协议) 是因特网上应用最为广泛的一种网络传输协议, 是用于从万维网(WWW:World Wi ...

  9. centos7-- sbt的安装使用

    sbt是一款类似于maven的构建工具 安装sbt curl https://bintray.com/sbt/rpm/rpm > bintray-sbt-rpm.repo mv bintray- ...

  10. [LeetCode] Random Pick with Blacklist 带黑名单的随机选取

    Given a blacklist B containing unique integers from [0, N), write a function to return a uniform ran ...