<!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. Promise和setTimeout执行顺序 面试题

    看到过下面这样一道题: (function test() { setTimeout(function() {console.log(4)}, 0); new Promise(function exec ...

  2. django——FBV与CBV

    引言 FBV FBV(function base views) 就是在视图里使用函数处理请求. 在之前django的学习中,我们一直使用的是这种方式,所以不再赘述. CBV CBV(class bas ...

  3. EL表达式与标签的使用

  4. css Margin-top塌陷，解决方法

    在两个盒子嵌套时,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下: (1)外部盒子设置一个边框 (2)外部盒子设置overflow:h ...

  5. helm-chart７，调试与hook

    调试 几个命令可以帮助进行调试 helm lint 首选工具,返回错误和警告信息. helm install --dry-run --debug:服务器会渲染你的模板,然后返回结果清单文件. helm ...

  6. idea使用配置

    一,打开窗口多行显示, Window→Editor Tabs→Tabs Placement→Show Tabs in Single Row 取消选中后即可在多行显示 2 .还可以自行设置打开文件窗口数 ...

  7. wangEditor大图片上传问题

    wangEditor上传大图片时候会 上传超时.后端没有问题,我百度很多,又去群里问,都得不到答案.最后问同事,有个属性  editor.config.uploadTimeout = 10000000 ...

  8. docker容器和本机互传文件

    首先需要确定docker容器的container_id,可以使用docker ps -a 查看你要操作的docker容器的container_id docker容器向本机传送文件 docker cp ...

  9. [LeetCode] Escape The Ghosts 逃离鬼魂

    You are playing a simplified Pacman game. You start at the point (0, 0), and your destination is (ta ...

  10. ORACLE中通过SQL语句(alter table)来增加、删除、修改字段

    1.添加字段: alter table  表名  add (字段  字段类型)  [ default  '输入默认值']  [null/not null]  ; 2.添加备注: comment on ...