vue学习笔记01day_01Vue的基本代码

Dear 丶 2022-05-13 05:22 318阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      
      
      <div id="app">
        <p>{
       { msg }}</p>
      </div>
    
      <script>
        // 2. 创建一个Vue的实例
        // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
        //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
        var vm = new Vue({
          el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
          // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
          data: { // data 属性中，存放的是 el 中要用到的数据
            msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
          }
        })
      </script>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，318人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue】day01-Vue基础入门

目录 day01 一、为什么要学习Vue 二、什么是Vue 1.什么是构建用户界面 2.什么是渐进式 Vue的两种开发方式： 3.什么是框架总结：什么是Vue

浅浅的花香味﹌/ 2024年03月17日 20:43/ 0 赞/ 89 阅读

相关 Vue学习day01：追风记事本

文章目录一、插值表达式二、Vue常用指令 2.1 内容渲染指令 2.2 条件渲染指令 2.3 事件绑定指令

向右看齐/ 2024年02月18日 10:07/ 0 赞/ 56 阅读

相关 Vue学习笔记03day_01.vue-resource改造品牌列表案例

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

深藏阁楼爱情的钟/ 2022年05月13日 09:44/ 0 赞/ 166 阅读

相关 Vue学习笔记02day_01.品牌列表案例1

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

太过爱你忘了你带给我的痛/ 2022年05月13日 09:06/ 0 赞/ 209 阅读

相关 Vue学习笔记01day_15.01day内容总结回顾

<!-- 3. 插值表

缺乏、安全感/ 2022年05月13日 06:14/ 0 赞/ 231 阅读

相关 Vue学习笔记01day_11.v-for循环对象

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

谁践踏了优雅/ 2022年05月13日 06:14/ 0 赞/ 181 阅读

相关 Vue学习笔记01day_06.简易计算器

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

淩亂°似流年/ 2022年05月13日 06:12/ 0 赞/ 274 阅读

相关 Vue学习笔记01day_03.跑马灯效果

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

不念不忘少年蓝@/ 2022年05月13日 05:30/ 0 赞/ 265 阅读

相关 vue学习笔记01day_01Vue的基本代码

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

Dear 丶/ 2022年05月13日 05:22/ 0 赞/ 319 阅读

相关 Spring学习笔记（day01）

文章目录 spring\_day01 1 spring介绍 1.1 三层架构中spring位置 1.2 spr

谁践踏了优雅/ 2021年12月10日 01:45/ 0 赞/ 380 阅读