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. Redis取出中文乱码问题

    直接打开Redis客户端,如果存储了中文的内容,取出时会发生乱码: 解决办法很简单,打开客户端时加上 --raw,这样就可以了: 顺便说一下,-a后面跟的是密码,打码了,各位见谅!

  2. 操作系统-文件系统（3）Linux目录配置

    文件系统通常采用分层结构实现:文件管理.目录管理.磁盘管理 文件控制块(File Control Block,FCB)是操作系统为每个文件建立的唯一数据结构,包含了全部文件属性. 通常把FCB汇集.组 ...

  3. php使用curl来获取远程图片

    本文章来介绍php使用curl来获取远程图片实现方法,有需要了解采集远程图片的朋友不防进入参考. curl要求php环境支持才行. 可以运行phpinfo()函数是否支持,一般要将php.ini中;e ...

  4. Shell编程—创建函数

    1基本的脚本函数 函数是一个脚本代码块,你可以为其命名并在代码中任何位置重用.要在脚本中使用该代码块时,只要使用所起的函数名就行了. 1.1创建函数 有两种格式可以用来在bash shell脚本中创建 ...

  5. openssh一键升级脚本（只升级openssh，其它已有环境不变,解决root登录问题）

    #!/bin/bash ################################################################# ###### update openssl ...

  6. JS获取时间（当前-过去-未来）

    /** * 获取时间格式为:1970-01-01 00:00 * @param {参数} params * 属性 类型 默认值 必填 说明 * date Date new Date() 否 Date对 ...

  7. python爬虫数据提取之bs4的使用方法

    Beautiful Soup的使用 1.下载 pip install bs4 pip install lxml # 解析器 官方推荐 2.引用方法 from bs4 import BeautifulS ...

  8. python3中异常处理方法 try-except-else-finally

    个人感觉逻辑上类似if else条件判断 但这是对语法错误以及抛出异常的处理 异常处理 try/except 异常捕捉可以使用 try/except 语句. 以下例子中,让用户输入一个合法的整数,但是 ...

  9. java返回树形结构的正确姿势

    业务场景 通常我们前端需要一个树形的导航菜单或者分类菜单,如后台权限管理中的权限树,亦或者下面例子中商城系统的商品分类多级菜单(一般为三级菜单) 数据库设计 数据库设计,采用parentId来指向自己 ...

  10. Oracle RAC与DG

    RAC RAC: real application clustersrac RAC: real application clustersrac 单节点数据库:数据文件和示例文件一一对应 实例损坏时数据 ...