1.IDEA中安装Vue.js插件

2.建立项目以及html文件

1.创建一个 HTML 文件

2.引入 Vue.js

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

3.创建一个 Vue 的实例

 <script type="text/javascript">

     var vm = new Vue({

         el: '#vue',

         data: {

             message: 'Hello Vue!'

         }

     });

 </script>

说明:

  • el:'#vue'：绑定元素的 ID
  • data:{message:'Hello Vue!'}：数据对象中有一个名为 message 的属性，并设置了初始值 Hello Vue!

4.将数据绑定到页面元素

 <div id="vue">

     {{message}}

 </div>

5.完整HTML

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="vue">

     {{message}}

 </div>

 <!--导入Vue.js-->

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 <script type="text/javascript">

     let vm = new Vue({

         el: '#vue',   //绑定元素的 ID

         data: {       //数据对象中有一个名为 message 的属性，并设置了初始值

             message: 'Hello Vue!'

         }

     });

 </script>

 </body>

 </html>

3.通过MVVM模式更新数据

在控制台修改 vm.message 中的内容，没有主动操作DOM就让页面发生了变化。

MVVM 模式中要求 ViewModel 层就是使用 观察者模式 来实现数据的监听与绑定，以做到数据与视图的快速响应。

2.第一个Vue程序的更多相关文章

  1. 第一个vue程序(极客时间Vue视频笔记)

    第一个vue程序 <body> <div class="app"> {{message}}--{{message+','+message}} <div ...

  2. Vue.js——2.第一个Vue程序

    代码 <div id="app"> <p>{{msg}}</p> </div> <script> let vm=new ...

  3. Vue（一）创建第一个Vue程序

    一.下载安装nodeJs 基于node.js,利用淘宝npm镜像安装相关依赖.由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像 -- npm install -g cnpm --registry= ...

  4. 第一个vue程序：hello,vlue

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. 第一个vue程序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 一个Java程序猿眼中的前后端分离以及Vue.js入门

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...

  7. 读懂源码：一步一步实现一个 Vue

    源码阅读:究竟怎样才算是读懂了? 市面上有很多源码分析的文章,就我看到的而言,基本的套路就是梳理流程,讲一讲每个模块的功能,整篇文章有一大半都是直接挂源码.我不禁怀疑,作者真的看懂了吗?为什么我看完后 ...

  8. Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用

    本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...

  9. vue-用Vue-cli从零开始搭建一个Vue项目

    Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...

随机推荐

  1. Paper | U-Net: Convolutional Networks for Biomedical Image Segmentation

    目录 故事背景 U-Net 具体结构 损失 数据扩充 发表在2015 MICCAI.原本是一篇医学图像分割的论文,但由于U-Net杰出的网络设计,得到了8k+的引用. 摘要 There is larg ...

  2. 下载代码的时候 SSH与http的区别

    SSH: git@gitlab.alibaba-inc.com:damai-mz/mz-market.git HTTP:http://gitlab.alibaba-inc.com/damai-mz/m ...

  3. 大话设计模式Python实现-适配器模式

    适配器模式(Adapter Pattern):将一个类的接口转换成为客户希望的另外一个接口. 下面是一个适配器模式的demo: #!/usr/bin/env python # -*- coding:u ...

  4. docker安装kafka

    文本摘自此文章 .kafka需要zookeeper管理,所以需要先安装zookeeper. 下载zookeeper镜像 $ docker pull wurstmeister/zookeeper .启动 ...

  5. Elasticsearch(ES) 下载&安装

    欢迎关注笔者的公众号: 小哈学Java, 每日推送 Java 领域干货文章,关注即免费无套路附送 100G 海量学习.面试资源哟!! 个人网站: https://www.exception.site/ ...

  6. NRF24L01双向无线通信

    最近闲来无事,利用手头资源研究了一下基于nrf24L01的双向通信实验,整个系统如下图所示. 原理: nrf24L01本身是一种单向通信的无线模块,但是,当nrf24L01工作在增强型的 ShockB ...

  7. js函数定义及一些说明

    1.javascript定义函数的三种方法一.function语句//这个方法比较常用function fn(){ alert("这是使用function语句进行函数定义");}f ...

  8. RabbitMQ实战应用技巧

    1. RabbitMQ实战应用技巧 1.1. 前言 由于项目原因,之后会和RabbitMQ比较多的打交道,所以让我们来好好整理下RabbitMQ的应用实战技巧,尽量避免日后的采坑 1.2. 概述 Ra ...

  9. 在 Docker 中已运行的 container 如何修改 run 时的 env

    https://www.cnblogs.com/xiaouisme/p/9837221.html 首先不推荐这样做,如需修改配置,应删掉重新部署. 其次,可以进行如下操作(未测试,不知道仅重启 con ...

  10. 在使用 Fortify进行源码扫描时需要做对项目需要做什么？

    1.一般我们的项目都是svn 或git 进行管理的,为了扫出异常的问题 做好把   “” .svn    “”  文件删除 2.把我们的项目需要的jar 文件放到一个文件夹内同项目一起进行扫描.这样为 ...