1.双大括号表达式

2.指令一:强制数据绑定

3.指令二;绑定事件监听

test003.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.模板的理解:
动态的html页面
包含了一些js语法代码
    双大括号表达式
    指令(以v-开头的自定义标签属性)
2.双大括号表达式
    语法:{{exp}}
    功能:想页面输出数据
    可以调用对象的方法
-->
<div id="app">
    <h2>1.双大括号表达式</h2>
    <p>{{msg}}</p>
    <!--全部输出为大写,为纯手写js-->
    <p>{{msg.toUpperCase()}}</p>
    <!--把文本尽量理解成一个标签-->
    <p v-html="msg"></p>
    <!--给标签体添加一个文本-->
    <p v-text="msg"></p>

    <h2>指令一:强制数据绑定</h2>
    <!--直接这样写会理解成是文本-->
    <img src="imgUrl">
    <!--强制绑定,把imgUrl这个js语法,变成一个表达式,变成表达式的话要去data里面去读取对应的值-->
    <img v-bind:src="imgUrl">
    <!--简介语法v-bind可以省略-->
    <img :src="imgUrl">

    <h2>指令二:绑定事件监听</h2>
    <button v-on:click="test">test1</button>
    <!--简洁语法v-on可以省略,@+事件名=回调函数-->
    <button @click="test">test1</button>
    <!--想传参数随意'abc'或者msg-->
    <button @click="test2(msg)">test1</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data:{
            msg:'<a href="http://www.baidu.com">I will back </a>',
            imgUrl:'https://cn.vuejs.org/images/logo.png'
        },
        <!--指令二:绑定事件监听-->
        methods:{
            test(){
                alert('hehe!!')
            },
　　　　　　　<!--content为形参-->
            test2(content){
                <!--弹出内容-->
                alert(content)
            }
        }
    })
</script>
</body>
</html>
2.页面访问截图

厉害了!!!

(尚003).Vue_模板语法的更多相关文章

  1. angular2系列教程（二）模板语法

    今天我们要讲的是angualr2的模板语法,官网写的很清楚,但我也用通俗易懂的讲法再罗列一下吧! 例子

  2. Angular2 模板语法

    1. 说明 Angular2的模板用来显示组件外观,作为视图所用,用法和html语法基本一致,最简单的Angular2的模板就是一段html代码.Angular模板语法主要包括以下几个部分: l 直接 ...

  3. FreeMarker模板语法

    四.FreeMarker模板语法 要编写复杂的模板需要熟悉FreeMarker语法规则,官网有详细说明,中文帮助也比较详细了,下面这些内容是从网上收罗来的,感谢网友的分享,经过整理与修改的内容如下.建 ...

  4. PHPCMS标签:PC标签模板语法规则

    模板语法规则1.变量表示{$name} 被解析成 <?=$name?>,表示显示变量$name的值,其中的“name”由英文字母.数字和下划线组成首字母必须是英文字母或者下划线. 2.常量 ...

  5. 【Vue】浅谈Vue(一)：从模板语法数据绑定、指令到计算属性

    写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...

  6. Django——模板层(template)（模板语法、自定义模板过滤器及标签、模板继承）

    前言:当我们想在页面上给客户端返回一个当前时间,一些初学者可能会很自然的想到用占位符,字符串拼接来达到我们想要的效果,但是这样做会有一个问题,HTML被直接硬编码在 Python代码之中. 1 2 3 ...

  7. 【每天半小时学框架】——React.js的模板语法与组件概念

           [重点提前说:组件化与虚拟DOM是React.js的核心理念!]        先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...

  8. 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  9. Django学习笔记（3）——表单，测试和模板语法的学习

    一,表单form 为了接收用户的投票选择,我们需要在前段页面显示一个投票界面,让我们重写之前的polls/detail.html文件,代码如下: <h1>{{ question.quest ...

随机推荐

  1. Prism

    网址:https://prismjs.com 使用教程:https://www.cnblogs.com/zhibu/p/6272338.html 使用教程:https://www.zlinet.com ...

  2. Js学习03--数据类型

    一.数据类型 1.Js中常用的数据类型 简单数据类型 Number 数字类型 String   字符串类型 Boolean  布尔类型 Undefined  变量未初始化 Null  空类型 复杂数据 ...

  3. mvn: command not found in Jenkins slave

    在Jenkins上添加了一个slave node, 并绑定了一个团队项目,通过shell来执行后续操作,结果卡在了 mvn: command not found 其实这个node上是配置了maven的 ...

  4. node-red 使用 创建第一个流程

    前言 这只是一个简单的示例,具体详细文档去官网查看 官网指南:https://nodered.org/docs/user-guide/ 打开浏览器,进入编辑器页面:http://localhost:1 ...

  5. 转：深入浅出Java垃圾回收机制

    原文链接:http://www.importnew.com/1993.html 对于Java开发人员来说,了解垃圾回收机制(GC)有哪些好处呢?首先可以满足作为一名软件工程师的求知欲,其次,深入了解G ...

  6. Linux下Java变量

    一.JAVA_HOME.PATH.CLASSPATH详解 1.1.JAVA_HOME 指向jdk安装目录,该目录下有bin.lib目录.Eclipse/NetBeans/Tomcat等软件就是通过搜索 ...

  7. 【洛谷 P4248】 [AHOI2013]差异（后缀自动机）

    题目链接 \[ans=\sum_{1<=i<j<=n}len(T_i)+len(T_j)-2*lcp(T_i,T_j)\] 观察这个式子可以发现,前面两个\(len\)是常数,后面的 ...

  8. 动态修改app build版本CFBundleVersion

    1.需求说明 2.操作步骤 2.1 新建脚本,选择Build Phases 2.2 点击加号,选择New Run Script Phase 2.3 为了便于识别,双击重命名为 Dynamic Buil ...

  9. Linux下使用shell脚本自动备份和移动数据到大容量存储

    自动备份数据库,并将备份前一天的数据移动拷贝到存储上. 需求来源是因为linux系统层的磁盘存储容量过小,数据库自动备份之后日积月累数据越来越多,而且还不想删除旧数据.那解决方法就是在linux系统主 ...

  10. ubuntu-网络配置文件

    vim   /etc/NetworkManager/system-connections/Wired connectione 1