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

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. </style>
  8. </head>
  9. <body>
  10. <div id="app">{{msg}}</div>
  11. <script src="https://www.jq22.com/jquery/vue.min.js"></script>
  12. <script>
  13. const app = new Vue({
  14. el: "#app", // 用于挂在要管理的元素
  15. data: { // 定义数据
  16. msg: "Hello World",
  17. name: "wby",
  18. }
  19. });
  20. </script>
  21. </body>
  22. </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. [爬坑记录] Qt 代码卡住 不发信号 不触发槽

    先让我激动一会儿 [捂脸] 最近在用Qt做个程序 用来参加比赛 期间总共遇到两次如标题的问题 也即是 莫名其妙的不触发槽函数了 而且原因也不一样 {先说明 我学习Qt依旧只是入门级 也许入不了大佬法眼 ...

  2. Java - Test - TestNG: testng.xml 元素 package

    1. 概述 简介 package 元素 packages package exclude include 2. 背景 准备 自动生成了 testng.xml 文件 已经基本了解了 testng.xml ...

  3. 转载:AAC编解码概述

    转自:http://www.cnblogs.com/gaozehua/archive/2012/05/03/2479960.html 编码概述 其整体AAC 编解码系统,如图所示,其编码流程概述如下: ...

  4. etc/hosts文件详解

    Linux 修改 etc/hosts文件 hosts文件 hosts —— the static table lookup for host name(主机名查询静态表). hosts文件是Linux ...

  5. Python3 post 嵌套json

    目录 python3 post json burpsuite 抓取 python requests 数据包 小结 python3 post json 前些天python3 post出现的小问题做下记录 ...

  6. python调用c++开发的动态库

    此处列举一下python调用Windows端动态库. # *- coding=utf-8 -* import ctypes from ctypes import * import os objdll ...

  7. 4500-X验证镜像完整性

    1.配置IP地址: Switch(config)#int f1Switch(config-if)#ip add 10.1.1.1 255.255.255.0Switch(config-if)#no s ...

  8. JZOJ5915 [2018NOIP模拟] 明日之星(广义后缀自动机,线段树)

    题目描述 给定一棵树,每个节点有一个权值 \(a_i\) 和一个字符串 \(s_i\). q组询问,每次询问一个字符串 S 和两个节点x,y: 求x到y路径上每个节点的字符串在 S 中出现的次数乘上各 ...

  9. Win Oracle 监听文件配置参考

    Win lister.ora配置参考 # listener.ora Network Configuration File: C:\app\Administrator\product\\dbhome_1 ...

  10. JAVA单例实现方式(常用)

    JAVA单例实现方式(常用) public class Singleton { // Q1:为什么要使用volatile关键字? private volatile static Singleton u ...