<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>第一个Vue</title>

    <!-- 1、引入js文件 -->

    <script src="js/vue.js"></script>

 </head>

 <body>

    <!-- 2、创建一个容器 指定id -->

  <div id="container">

        <!-- 插值表达式     -->

            {{msg}}

    </div>

    <!-- 3、vue是js框架 在javascript中 -->

    <script>

    //通过new的方式得到了Vue的实例，在通过new通过一个对象来对vue的实例配置            (el,data)

    // {{}} (mustache/interpolation)的语法:可以读取变量的值,显示在调用的元素的innerHTML

        new Vue({

            //通过el指定和哪个容器绑定,{{}}运算都在该容器中

            el:"#container",

            data:{

                msg:"Hell0 VueJs"

            }

        })

    </script>

 </body>

</html>

首先要引入vue.js文件

Vue实例1的更多相关文章

  1. Vue - 实例

    1.实例属性介绍如下图所示: 具体介绍如下: A.$parent:访问当前组件的父实例 B.$root:访问当前组件的根实例,要是没有的话,则是自己本身 C.$children:访问当前组件实例的直接 ...

  2. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  3. vue实例生命周期

    实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...

  4. vue实例的几个概念

    1.构造器 vue应用都是通过vue构造函数创建实例来启动的,在创建vue实例时需要传入一个options对象,该对象可以包含数据.模板.挂在元素.方法.生命周期钩子等选项: var vm = new ...

  5. Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...

  6. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  7. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  8. v-cloak 实现vue实例未编译完前不显示

    前言: 由于网速原因,(ps:之前同事无意间在网速很差的情况下测出的)在使用vue开发时,会由于vue实例还没编译成功的时候数据绑定的"Mustache"标签会闪现一下,造成不好的 ...

  9. vue实例讲解之axios的使用

    本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm ...

  10. vue实例讲解之vue-router的使用

    实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...

随机推荐

  1. selenium安装及环境搭建

    说明:安装selenium前提必须是安装好了python和pip 1.安装python 在Python的官网 www.python.org 中找到最新版本的Python安装包(我的电脑是windows ...

  2. HNUSTOJ-1600 BCD时钟

    1600: BCD时钟 时间限制: 1 Sec  内存限制: 128 MB提交: 1038  解决: 156[提交][状态][讨论版] 题目描述 BCD码是指用四位二进制数来表示十进制数中的0~9这十 ...

  3. HihoCoder - 1093 小Hi和小Ho (SPFA)

    描述 万圣节的晚上,小Hi和小Ho在吃过晚饭之后,来到了一个巨大的鬼屋! 鬼屋中一共有N个地点,分别编号为1..N,这N个地点之间互相有一些道路连通,两个地点之间可能有多条道路连通,但是并不存在一条两 ...

  4. spring aop实现数据库的读写分离

    为了减轻数据库的压力,一般会使用数据库主从(master/slave)的方式,但是这种方式会给应用程序带来一定的麻烦,比如说,应用程序如何做到把数据写到master库,而读取数据的时候,从slave库 ...

  5. [APIO2019] 奇怪装置

    $solution:$ 问题其实就是求两个式子的循环节. 钦定 $t\mod B=0$且 $(t\neq 0)$,其 $t$ 为循环节. 则将 $1$ 式拆开得 $\frac{t\times (B+1 ...

  6. 封装和private，this，super关键字的简单应用

    1.将成员变量用private修饰 2.提供对应的getxx()和setxx()方法 public class Student { private String name; private int a ...

  7. Storm简介——实时流式计算介绍

    概念 实时流式计算: 大数据环境下,流式数据将作为一种新型的数据类型,这种数据具有连续性.无限性和瞬时性.是实时数据处理所面向的数据类型,对这种流式数据的实时计算就是实时流式计算. 特征 实时流式计算 ...

  8. Python实战之网上银行及购物商城

    前言:这是初学时写的小项目,觉得有意思就写来玩玩,也当是巩固刚学习的知识.现在看来很不成熟,但还是记录一下做个纪念好了~ 1.名称:网上网上银行及购物商城 2.项目结构: 当时刚接触python啦,哪 ...

  9. linux--基础知识5

    #文件合并与文件归档 #cat /etc/passwd > new_pass.txt (创建一个新的文档并将cat/etc/passwd的内容合并进来) #echo "xxxx&quo ...

  10. mysql服务设置远程连接

    一.前期准备 1.虚拟机/物理机    mysql环境(非本机)2.本机 navicat软件(验证远程连接) 二 .mysql配置 1.在远程主机的本机   使用root用户连接mysql mysql ...