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. 尝试写一写4gl与4fd

    4gl DATABASE ds   GLOBALS "../../config/top.global"   DEFINE g_curs_index           LIKE t ...

  2. 《HelloGitHub》第 53 期

    兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...

  3. 漏洞重温之sql注入（五）

    漏洞重温之sql注入(五) sqli-labs通关之旅 填坑来了! Less-17 首先,17关,我们先查看一下页面,发现网页正中间是一个登录框. 显然,该关卡的注入应该为post型. 直接查看源码. ...

  4. SpringBoot中加载XML配置

    开篇 在SpringBoot中我们通常都是基于注解来开发的,实话说其实这个功能比较鸡肋,但是,SpringBoot中还是能做到的.所以用不用是一回事,会不会又是另外一回事. 涛锅锅在个人能力能掌握的范 ...

  5. 【Android】AndroidStudio关于EventBus报错解决方法its super classes have no public methods with the @Subscribe

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先说明,以前我用eventBus的 ...

  6. Android开发之viewpager导报错误解决方法：错误代码 Caused by: java.lang.ClassNotFoundException: Didn't find class

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 Caused by: java.lang.ClassNotFoundException: Didn't ...

  7. 02.Flink的单机wordcount、集群安装

    一.单机安装 1.准备安装包 将源码编译出的安装包拷贝出来(编译请参照上一篇01.Flink笔记-编译.部署)或者在Flink官网下载bin包 2.配置 前置:jdk1.8+ 修改配置文件flink- ...

  8. MySQL 日期时间类型怎么选？千万不要乱用！

    构建数据库写程序避免不了使用日期和时间,对于数据库来说,有多种日期时间字段可供选择,如 timestamp 和 datetime 以及使用 int 来存储 unix timestamp. 不仅新手,包 ...

  9. Activiti7 启动流程实例

    package com.itheima.activiti; import org.activiti.engine.ProcessEngine; import org.activiti.engine.P ...

  10. 20190923-06Linux文件权限类 000 014

    文件属性 Linux系统是一种典型的多用户系统,不同的用户处于不同的地位,拥有不同的权限.为了保护系统的安全性,Linux系统对不同的用户访问同一文件(包括目录文件)的权限做了不同的规定.在Linux ...