<!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. zepto中的scrollTo

    //zepto没有scrollTo动画,这里扩展了一个scrollTo函数 $.fn.scrollTo = function(options) { var defaults = { scrollTop ...

  2. 设计模式之架构型MVC，MVP，MVVM模式

    一.MVCMVC,Model View Controller,是软件架构中最常见的一种设计模式,简单来说就是通过Controller的控制去操作Model层的数据,并且返回给view层展示.View跟 ...

  3. Windows API教程文件系统

    本篇文章主要介绍了"Windows API教程文件系统",主要涉及到Windows API教程文件系统方面的内容,对于Windows API教程文件系统感兴趣的同学可以参考一下. ...

  4. xls 编码 utf-8

    直接用 Excel 打开 UTF-8 编码的 CSV 文件会导致汉字部分出现乱码.原因是 Excel 以 ANSI 格式打开,不会做编码识别. ==打开 UTF-8 编码的 CSV 文件的方法:1) ...

  5. North American Invitational Programming Contest 2018

    A. Cut it Out! 枚举第一刀,那么之后每切一刀都会将原问题划分成两个子问题. 考虑DP,设$f[l][r]$表示$l$点顺时针一直到$r$点还未切割的最小代价,预处理出每条边的代价转移即可 ...

  6. XVII Open Cup named after E.V. Pankratiev. GP of Siberia, Division 1

    1. Ski race 枚举枚举倍数判断即可.时间复杂度$O(n\log m)$. #include<cstdio> #include<algorithm> using nam ...

  7. poj3045 Cow Acrobats(二分最大化最小值)

    https://vjudge.net/problem/POJ-3045 读题后提取到一点:例如对最底层的牛来说,它的崩溃风险=所有牛的重量-(底层牛的w+s),则w+s越大,越在底层. 注意范围lb= ...

  8. mysql字符集校对

    常用的两种 utf8_general_ci 按照普通的字母顺序,而且不区分大小写(比如:a B c D)utf8_bin 按照二进制排序(比如:A排在a前面,B D a c) ci是 case ins ...

  9. Codeforces 785 - A/B/C/D/E - (Undone)

    链接:https://codeforces.com/contest/785 A - Anton and Polyhedrons #include<bits/stdc++.h> using ...

  10. mongodb 参数优化

    1.大部分IO操作为随机IO,建议采用SSD或PCIE,普通硬盘RAID10 2.IO调度算法.普通磁盘:deadline避免IO请求出现“饥饿”现象,SSD/PCIE:noop简单的先进先出处理请求 ...