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. You are using pip version 10.0.1, however version 20.2.2 is available.

    在安装第三方库时,出现如下提示: You are using pip version 10.0.1, however version 20.2.2 is available.You should co ...

  2. Java数据结构——根据遍历结果构造二叉树

    一.已知前序.中序.后序遍历结果的其中两种,还原二叉树. ①已知前序遍历结果:1,2,4,5,3,6,7 中序遍历结果:4,2,5,1,6,3,7还原二叉树后BFS出结果. TreeNode.java ...

  3. antd-vue中table行高亮效果实现

    [方式一]:通过设置customRow达到目的,点击时遍历所有行设置为正常颜色,把当前行设置为特殊颜色(高亮色) HTML: <a-table ref="table" siz ...

  4. 5分钟快速学会xpath定位

    今天我们先来和大家说一下appium,首先教大家如何定位xpath,五分钟即可学会:例:现在我想定位下面这个登录按钮: xpath该怎么写呢? 先不管三七二十几,先写//,然后找你要定位元素最近的可以 ...

  5. Python画图库Turtle库详解篇

    Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行 ...

  6. php实现无限极分类（多维数组 / 二维数组）形式

    <?php // 测试数组数据$array = array( array('id'=>'1','title'=>'父级分类1','pid'=>'0'), array('id'= ...

  7. Hihocoder 1116 计算

    这题最开始的时候看到线段树吧,没找到好的做法 想了下既然是乘积和 (-) (--) (---) 在脑子里就是这种线条位于各个位置,然后各种长度代表连续的乘积个数 然后把所有情况累加起来,但是并不好算 ...

  8. Arbitrary-Oriented Object Detection with Circular Smooth Label（ECCV2020，旋转目标检测）

    论文链接:https://arxiv.org/abs/2003.05597 code:https://github.com/Thinklab-SJTU/CSL_RetinaNet_Tensorflow ...

  9. 面试【JAVA基础】Web与网络

    1.转发与重定向的区别 转发是服务器请求资源,服务器直接访问目标地址url,把响应内容返回给浏览器. 重定向根据服务器返回的状态码重新请求地址. 转发是服务器行为,重定向是客户端行为. 转发显示的ur ...

  10. 解决Oracle在win10 64使用plsql 无法显示表

    将当前用户切换至所有用户,然后再切换至当前用户,问题解决 图中sql也可查询出当前库中存在的表: select object_name from user_objects where lower(ob ...