编写简单例子，了解下基本语法

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

    </style>

</head>

<body>

<div id="app">{{msg}}</div>

<script src="https://www.jq22.com/jquery/vue.min.js"></script>

<script>

    const app = new Vue({

        el: "#app", // 用于挂在要管理的元素

        data: { // 定义数据

            msg: "Hello World",

            name: "wby",

        }

    });

</script>

</body>

</html>

在上述的代码里面，js脚本的地方，创建了一个 Vue 对象，其中el选项置顶了这个Vue对象管理的元素的id

在app元素中，使用 {{message}} 的方式引用了定义在vue实例中的data属性里的变量值，并显示出来

vue学习笔记：Hello Vue的更多相关文章

  1. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  2. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  3. vue学习笔记：vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  4. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  5. Vue学习笔记之Vue学习前的准备工作

    0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...

  6. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  7. Vue学习笔记之Vue组件

    0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...

  8. Vue学习笔记之Vue知识点补充

    0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...

  9. Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

  10. Vue学习笔记之Vue的使用

    0x00 安装 对于新手来说,强烈建议大家使用<script>引入 0x01 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. ...

随机推荐

  1. Educational Codeforces Round 76 (Rated for Div. 2) A. Two Rival Students

    You are the gym teacher in the school. There are nn students in the row. And there are two rivalling ...

  2. LUA利用第三方API访问数据库

    ===========数据库访问--第三方 http { upstream backend { drizzle_server 192.168.4.119:3306 protocol=mysql dbn ...

  3. 初学mysql数据库

    package com.conn; import java.sql.Connection; import java.sql.DriverManager; public class Conn { pub ...

  4. 【音乐欣赏】《TIT FOR TAT》 - MYTH & ROID

    曲名:TIT FOR TAT 作者:MYTH & ROID [00:00.000] 作曲 : MYTH & ROID [00:01.000] 作词 : MYTH & ROID ...

  5. Codeforces Round #614 (Div. 2)E（思维，构造，DP）

    构造边权,从0开始给边赋值,初始选取一条边权为0,每次赋值的贡献为这一条链两侧的结点(包含链的端点)个数之积,下一次赋值以当前链其一端点续一条边,边权为上次赋的值+1.先DFS找到点的组合这条链两侧结 ...

  6. 安装rpm包时提示错误：依赖检测失败的解决方法

    安装rpm包时提示错误:依赖检测失败 解决方法: 命令末尾加上--nodeps --force

  7. C/C++ 传递信息给Java

    #开始 今天有人问我C++怎么给Java传递消息 大概需求是 用C++写了一个窗口 需要把编辑框里面的东西传递给Java做处理 #解决过程 我现在能想到的有三个简单的方法 1. Socket编程 通过 ...

  8. CSS控制 文字超出部分显示省略号

    实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: no ...

  9. 微信小程序中promise的使用

    简介 相信看到这篇文章的同学,都已经对微信小程序的api文档有所了解了,也都经历了微信小程序api回调函数嵌套的痛苦,才会想要通过Promise解决回调地狱这个问题,我下面就直接介绍怎么在小程序中使用 ...

  10. Java面向对象封装优化1_this（Python中的self）

    1. 类 package cn.itcast.day06.demo03; /* 问题描述:定义Person的年龄时,无法阻止不合理的数值被设置进来. 解决方案:用private关键字将需要保护的成员变 ...