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. COMP 2406 – F19

    COMP 2406 – F19 – A4 Due Friday, November 22nd at 11:59 PMAssignment 4 Trivia Quiz BuilderSubmit a s ...

  2. vue做的项目每次打开新页面不会显示页面顶部的解决办法

    在main.js 中添加代码: router.afterEach((to,from, next) => { window.scrollTo(0,0) }) 然后就会发现每次打开页面都是显示的是页 ...

  3. HTML+css基础 css的几种形式 css选择器的两大特性

    3.外联样式 css选择器的两大特性 1.继承性:所有跟文本字体有关的属性都会被子元素继承.且权重是0000. 2.层叠性:就是解决选择器权重大小的一种能力,就是看那个选择器的权重大.谁的权重大听谁的 ...

  4. Delta-wave HDU - 1030

    Delta-wave HDU - 1030 A triangle field is numbered with successive integers in the way shown on the ...

  5. C++回调，函数指针

    想要理解回调机制,先要理解函数指针 函数指针 函数指针指向的是函数而非对象,和其他指针一样,函数指针指向某种特定的类型 函数的类型由他的返回类型和参数类型共同决定,与函数名无关,如: bool len ...

  6. HashHelper

    在C#中,数据的Hash以MD5或SHA-1的方式实现,MD5与SHA1都是Hash算法,MD5输出是128位的,SHA1输出是160位的,MD5比SHA1快,SHA1比MD5强度高. MD5与SHA ...

  7. Python - 字典 - 第十天

    Python 字典 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 ,格式 ...

  8. annyconnect掉线之后重新链接

    sudo service vpnagentd restart /opt/cisco/anyconnect/bin/vpnui 重启服务+重新登录 deepin的优点之一是它的程序不会安装到各个角落里, ...

  9. jsTree树插件

    前言 关于树的数据展示,前后用过两个插件,一是zTree,二是jsTree,无论是提供的例子(可下载),还是提供的API在查找时的便捷程度,zTree比jsTree强多了,也很容易上手,所以这里只讲下 ...

  10. 「白帽挖洞技能」YxCMS 1.4.7 漏洞分析

    这几天有小伙伴留言给我们,想看一些关于后台的漏洞分析,今天i春秋选择YxCMS 1.4.7版本,理论内容结合实际案例进行深度分析,帮助大家提升挖洞技能. 注:篇幅较长,阅读用时约7分钟. YXcms是 ...