本文为博主原创，未经允许不得转载：

　　之前自学了vue，在项目中应用了vue，由于是第一次使用，感觉非常强大，使用也非常方便，趁有时间，总结一下vue学习过程中

各个指令的使用方法，只要掌握了vue的指令，就能熟练使用vue。

以下为HTML模板{{ }}的使用方法：

<!DOCTYPE html>

<html lang="zh">

<head>

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

</head>

    <body>

        <div id="app" >

            <!--

                {{ }}为HTML模板，用于输出对象属性和函数返回值，

                里面不仅可以写js变量，

                还可以写一些简单的表达式，比如三目运算符，累加等等，

                当里面写方法的时候，必须要在vue中申明

            -->

            <!--{{age>60 ? "老人":"年轻人"}}-->

            <!--{{fullName.split(" ")[1]}}-->

            {{getFullName()}}

        </div>

        <script>

            /**

             * 每个 Vue 应用都需要通过实例化 Vue 来实现。

             */

            var vm = new Vue({

                /*  el:用于绑定属性的元素 */

                el:"#app",  //
               //data 用于定义属性，

                data:{

                    msg:"hello world!!",

                    age: 30,

                    firstName : "liu234",

                    lastName : "luw3111i",

                    fullName : "luwei 6"

                },

                /* 用于定义的函数，可以通过 return 来返回函数值。*/

                methods : {

                    getFullName : function(){

                        //this指vm实例

                        return this.firstName + "" + this.lastName

                    }

                }

            })

        </script>

     </body>

</html>

使用效果：

Vue学习一：{{}}html模板使用方法的更多相关文章

  1. Vue学习2：模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue init定制团队模板使用方法

    每次做项目都要自己搭建项目目录,或者换了公司就的重新搭建项目目录,是不是很麻烦呢?有没有想过一次性把项目目录搭建好,以后直接用呢?你首先想到的可能是复制自己原来的项目,然后删除.修改等等.然而有个更方 ...

  3. vue学习笔记之属性和方法

    每个Vue都会代理其data对象里所有的属性:只有这些被代理的属性是响应的.如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.例子: <script type="text/j ...

  4. VUE 学习笔记 三 模板语法

    1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...

  5. vue学习笔记之：为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  6. vue学习(十四) 条件搜索框动态查询表中数据 数组的新方法

    //html <div id="app"> <label> 名称搜索关键字: <input type="text" clasa=& ...

  7. vue学习(五) 访问vue内部元素或者方法

    //html <div id="app"> <input type="button" value="ok" v-bind: ...

  8. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  9. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  10. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

随机推荐

  1. Spark学习之路 （十四）SparkCore的调优之资源调优JVM的GC垃圾收集器

    一.概述 垃圾收集 Garbage Collection 通常被称为“GC”,它诞生于1960年 MIT 的 Lisp 语言,经过半个多世纪,目前已经十分成熟了. jvm 中,程序计数器.虚拟机栈.本 ...

  2. 【Hadoop学习之十】MapReduce案例分析二-好友推荐

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-3.1.1 最应该推荐的好友TopN,如何排名 ...

  3. 20165215 2017-2018-2 《Java程序设计》第5周学习总结

    20165215 2017-2018-2 <Java程序设计>第5周学习总结 教材学习内容总结 chapter7 Java支持在一个类中声明另外一个类,这样的类称作内部类,而包含内部类的类 ...

  4. mongodb 批量修改

    db.getCollection(').find({}).forEach( function(item) { item.date = item.date.replace("2018-11-2 ...

  5. JustOj 2039: 成绩排名 （结构体排序）

    题目描述 每次期末考试成绩出来之前的一段时间大豪哥心里都是痛苦的,总感觉自己会在班上排名特别差.所以当成绩出来以后大豪哥想快点知道班上的总排名,以便知道自己的排名.(PS:大豪哥班上有个学霸名叫日天, ...

  6. python smtplib 发送邮件简单介绍

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式python的smtplib提供了一种很 ...

  7. 监控网卡流量脚本（Python）

    #!/usr/bin/env python# coding: utf-8# author: Xiao Guaishou try:    import psutilexcept ImportError: ...

  8. reids非关系性数据库

     1.Redis环境配置 下载安装地址: https://github.com/MicrosoftArchive/redis/releases 解压文件到指定的目录,D:\ChromeCoreDown ...

  9. MXNet官方文档中文版教程(3)：神经网络图（Symbol）

    https://blog.csdn.net/qq_36165459/article/details/78394259 文档英文原版参见Symbol - Neural network graphs an ...

  10. Eloquent JavaScript #03# functions

    索引: let VS. var 定义函数的几种方式 more... 1.作者反复用的side effect side effect就是对世界造成的改变,例如说打印某些东西到屏幕,或者以某种方式改变机器 ...