vue学习02-v-text
vue学习02-v-text
- 引入环境版本，cdn网络引用或者本地js应用
- html的结构，一般是div
- 创建vue实例
- el:挂载点
- v-text指令的作用是设置标签的内容
- 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<!-- 开发环境版本-->
<script src="js/vue.js"></script>
<body>
<div id="app">
<h2 v-text="message+'我'+info"></h2>
<h2 v-text="info"></h2>
<h1>帅比{{message}}</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
message: "小飞，你好！",
info: "正在前端学习！"
}
})
</script>
</body>
</html>
效果图：
vue学习02-v-text的更多相关文章
- vue学习02
圆中圆: father: padding:6px width:56px height:56px border-radius:50% box-sizing:border-box son: width:1 ...
- [前端学习]vue的指令学习记录 vu-if | text | for | on | model | bind | pre
vue的指令学习记录 vue-if | text | for | on | model - 目录 vue的指令学习记录 vue-if | text | for | on | model ... 预备 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- day 81 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
- Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- day 80 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- JavaScript学习02 基础语法
JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...
- Java学习02
Java学习02 1.导入内部的包 一.在包的下面加入下面一句话: import java.util.Scanner; 二.在类中 Scanner input=new Sanner(Sy ...
- ThinkPhp学习02
原文:ThinkPhp学习02 一.什么是MVC M -Model 编写model类 对数据进行操作 V -View 编写html文件,页面呈现 C -Controll ...
随机推荐
- 手把手教Linux驱动2-之模块参数和符号导出
通过<手把手教Linux驱动1-模块化编程,玩转module>的学习,我们已经掌握了如何向内核加载一个模块,现在我们学习模块之间如何传递参数. 一.给模块传递参数 当我们加载一个模块到Li ...
- 第四篇 Scrum冲刺博客
一.会议图片 二.项目进展 成员 完成情况 今日任务 冯荣新 商品底部工具栏 购物车列表 陈泽佳 渲染搜索结果,防抖的实现 静态结构 徐伟浩 未完成 商品信息录入 谢佳余 未完成 搜索算法设计 邓帆涛 ...
- js大数字转换，将大额数字转换为万、千万、亿等
代码 /** * 大数字转换,将大额数字转换为万.千万.亿等 * @param value 数字值 */ export function bigNumberTransform (value) { co ...
- java基础知识点整理
1.&和&&的区别? &:逻辑与(and),运算符两边的表达式均为true时,整个结果才为true. &&:短路与,如果第一个表达式为false时,第二 ...
- Ubuntu 20.04.1 安装软件和系统配置脚本
#!/bin/bash # https://launchpad.net/ubuntu # https://www.easyicon.net # https://download-chromium.ap ...
- android 申请忽略电池节电
fun checkBattery(){ var main = activity as MainActivity if(main.isIgnoringBatteryOptimizations()){ L ...
- ARouter使用
1. androidstudio3.0配置 javaCompileOptions { annotationProcessorOptions { arguments = [AROUTER_MODULE_ ...
- Win10 第三方浏览器无法上网或者上网速度慢 的终极解决方案
请参考: https://blog.csdn.net/shouzei123/article/details/82862478 近期,工程师收到大量反馈360浏览器,极速模式无法打开网页,兼容模式无此问 ...
- 【问题】【SpringBoot】记一次springboot框架下用jackson解析RequestBody失败的问题
最近项目中遇到了一个问题,费好大劲才发现问题所在,并且修复了问题,下面分享一下这个问题的定位和修复的新路旅程. 先说下背景:该项目用的是SpringBoot框架,主要功能为对外提供一些Restful ...
- Thymeleaf中model设一个值 页面显示此值 JS取此值
model设值: m.addAttribute("pageNo", pageNo); 页面显示值: 当前为第:<span th:text="${pageNo}&qu ...