Vue学习一：{{}}html模板使用方法
本文为博主原创，未经允许不得转载：
之前自学了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模板使用方法的更多相关文章
- Vue学习2：模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue init定制团队模板使用方法
每次做项目都要自己搭建项目目录,或者换了公司就的重新搭建项目目录,是不是很麻烦呢?有没有想过一次性把项目目录搭建好,以后直接用呢?你首先想到的可能是复制自己原来的项目,然后删除.修改等等.然而有个更方 ...
- vue学习笔记之属性和方法
每个Vue都会代理其data对象里所有的属性:只有这些被代理的属性是响应的.如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.例子: <script type="text/j ...
- VUE 学习笔记 三 模板语法
1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...
- vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- vue学习(十四) 条件搜索框动态查询表中数据 数组的新方法
//html <div id="app"> <label> 名称搜索关键字: <input type="text" clasa=& ...
- vue学习(五) 访问vue内部元素或者方法
//html <div id="app"> <input type="button" value="ok" v-bind: ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
随机推荐
- Mysql Federated For Windows
[1]windows环境下打开federated (1)关闭.命令:mysql> net stop mysql (2)添加federated字段.在my.ini文件中添加一个字段,注意位于[my ...
- bash shell 编程练习
原始文件: find /etc -name passwd 2>&1 | tee ee.log 1. cat -n 把 e.log 的文档内容加上行号后输入 e2.log 这个文档里: x ...
- over(partition by)开窗函数的使用
开窗函数是分析函数中的一种,开窗函数与聚合函数的区别是:开窗函数是用于计算基于组的某种聚合值且每个的组的聚合计算结果可以有多行,而聚合函数每个组的聚合计算结果只有一个.使用开窗函数可以在没有group ...
- sqoop使用经验总结及问题汇总
问题导读1.导入数据到HDFS,需要注意什么?2.在测试sqoop语句的时候,如何限制记录数量?3.sqoop导入时什么情况下会多导入一条数据? 一.sqoop 导入数据到HDFS注意事项 分割符的方 ...
- word2vec原理知识铺垫
word2vec: 词向量计算工具====>训练结果 词向量(word embedding) 可以很好的度量词与词的相似性,word2vec为浅层神经网络 *值得注意的是,word2vec是计算 ...
- MySQL 0Day漏洞出现 该漏洞可以拿到本地Root权限
2016年9月12日, legalhackers.com网站发布了编号为CVE-2016-6662的0day漏洞公告 .由于该漏洞可以获得MySQL服务器的Root权限,且影响MySql5.5.5.6 ...
- js my_first
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 5、CentOS 6.5系统安装配置Nginx-1.2.7+PHP-5.3.22环境
一,操作系统 以最小服务器形式安装系统,并添加开发工具库,便于后期编译使用. 此处基本都是下一步,下一步,不再废话. 安装完成,进入系统,调通网络,关闭防火墙或打开相应的WEB端口. 以下安装操作默认 ...
- C++ 开源库列表
https://zh.cppreference.com/w/cpp/links/libs
- Always an integer UVALive - 4119
题目很简单,就是求表达式(P/D)的结果是不是整数.其中P是一个整系数的多项式,D是一个正整数. 把1-k(最高次)+1都试一次就好了.结论可以总结归纳得到.(k取 0, 1, 2 .... 的情况推 ...