<!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. eclipse导入新项目配置jdk、tomcat到浏览器正常访问

    好记性不如烂笔头,长时间不操作就会生疏,在此做个笔记 1.导入项目 2,进入选择项目,点finish完成,导入成功 3.配置tomcat和jdk 选择本地相对应jdk的jre 选择tomcat版本进行 ...

  2. BZOJ.4598.[SDOI2016]模式字符串(点分治 Hash)

    LOJ BZOJ 洛谷 点分治.考虑如何计算过\(rt\)的答案. 记\(pre[i]\)表示(之前的)子树内循环匹配了\(S\)的前缀\(i\)的路径有多少,\(suf[i]\)表示(之前的)子树内 ...

  3. Python 中的单例模式

    单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...

  4. MySQL性能分析及explain的使用（转）

    1.使用explain语句去查看分析结果,如 explain select * from test1 where id=1; 会出现: id selecttype table type possibl ...

  5. JAVA 学习日记

    4. 数组 int[] in = new int[5];in[0] = 1;in[1] = 11;in[2] = 111;for(int i=0;i<in.length;i++){ System ...

  6. Java_String

    整理一下java中关于String的内容.Spring应该是java中使用最频繁的类了,那么今天我们仔细研究下关于Spring的内容. 定义: String类是一个字符串类型的类,使用"   ...

  7. 分布式mongodb分片集群

    本博客先简单介绍mongodb入门以及单实例以及mongodb的主从(主从官网是不提倡用的,原因后续介绍),副本集,分片. 第一:nosql介绍: 数据库分为关系型数据库与非关系型数据库,及具代表性的 ...

  8. ECMA Script 6_对象的扩展

    对象 1. ES6 允许直接写入变量和函数,作为对象的属性和方法 const foo = 'bar'; /*****************属性的优化********************/ con ...

  9. monkey Test 环境配置

    Android Monkey压力测试学习笔记 步骤:下载SDK -> 解压进入SDK Manager下载系统 -> 配置环境变量 -> 创建虚拟设备或连接真机 -> 进入命令模 ...

  10. C++中继承与抽象类

    继承语法格式如下: class 子类名称 : 继承方式(public private protected 三种) 父类名称 纯虚函数格式: virtual 返回值类型 函数名(参数列表)= 0:含有纯 ...