vue学习02-v-text

  1. 引入环境版本，cdn网络引用或者本地js应用
  2. html的结构，一般是div
  3. 创建vue实例
  4. el:挂载点
  5. v-text指令的作用是设置标签的内容
  6. 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
<!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的更多相关文章

  1. vue学习02

    圆中圆: father: padding:6px width:56px height:56px border-radius:50% box-sizing:border-box son: width:1 ...

  2. [前端学习]vue的指令学习记录 vu-if | text | for | on | model | bind | pre

    vue的指令学习记录 vue-if | text | for | on | model - 目录 vue的指令学习记录 vue-if | text | for | on | model ... 预备 ...

  3. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  4. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  5. Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  6. day 80 Vue学习一之vue初识

    Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...

  7. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  8. JavaScript学习02 基础语法

    JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...

  9. Java学习02

    Java学习02 1.导入内部的包 一.在包的下面加入下面一句话: import    java.util.Scanner; 二.在类中 Scanner input=new     Sanner(Sy ...

  10. ThinkPhp学习02

    原文:ThinkPhp学习02 一.什么是MVC                M -Model 编写model类 对数据进行操作 V -View  编写html文件,页面呈现 C -Controll ...

随机推荐

  1. 获取元素top值，屏幕滚动到当前元素

    var top = $(this).offset().top; $('html , body').animate({scrollTop: top-100},10);

  2. 高并发&性能优化（二）------系统监控工具使用

    上一篇主要从总体介绍了高并发&性能优化的相关思路和方法,本篇主要介绍系统监控工具. [CPU查看工具] ------top命令(性能) 进入top命令后,按1即可看到每核CPU的运行指标与详细 ...

  3. python连接mysql中报错1064修改方法

    Python是编程语言,MySQL是数据库,它们是两种不同的技术:要想使Python操作MySQL数据库需要使用驱动.这里选用PyMySQL驱动.下载地址: https://pypi.python.o ...

  4. CloudBase Framework丨第一个 Deno 部署工具是如何打造的？

    云端一体化部署工具 CloudBase Framework (简称 CBF)自开源发布以来迭代迅速,不仅支持 Vue.React 等前端框架,也支持 Nuxt 等 SSR 框架,基于 Node 开发的 ...

  5. mysql图形化工具基本操作

    一.DataType 常见的数据类型: - `int` 整数 - `varchar(len)` 字符串 - `tinyint(1)`布尔值 二.设置字段的特殊标识 - `PK`(`Primary Ke ...

  6. ORA-01455: converting column overflows integer datatypes.

    系统执行抛了一个ORA-01455: converting column overflows integer datatypes.把当时执行的SQL取出来,在plsql developer里面执行是没 ...

  7. C++ Templates （2.2 使用Stack类模板 Use of Class Template Stack ）

    返回完整目录 目录 2.2 使用Stack类模板 Use of Class Template Stack 2.2 使用Stack类模板 Use of Class Template Stack 在C++ ...

  8. 【Android】时间选择器，选择日期DatePicker 简单详解demo及教程

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...

  9. 使用java8的方法引用替换硬编码

    背景 想必大家在项目中都有遇到把一个列表的多个字段累加求和的情况,也就是一个列表的总计.有的童鞋问,这个不是给前端做的吗?后端不是只需要把列表返回就行了嘛...没错,我也是这样想的,但是在一场和前端的 ...

  10. 17_Python的常用模块

    1.随机数模块 random 1.随机小数 import random # (0,1)随机取浮点数 random.random() # 0.17988578778011 # (1, 3)取指定范围的浮 ...