zoukankan      html  css  js  c++  java
  • vue参考---vue基本实例

    vue参考---vue基本实例

    一、总结

    一句话总结:

    vue基本实例:vue中的el是element的缩写,也就是选择器(选择作用元素)的意

    二、vue基本实例

    博客对应课程的视频位置:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="UTF-8">
     5   <title>01_HelloWorld</title>
     6 </head>
     7 <body>
     8 
     9 <!--
    10   1. 引入Vue.js
    11   2. 创建Vue对象
    12     el : 指定根element(选择器)
    13     data : 初始化数据(页面可以访问)
    14   3. 双向数据绑定 : v-model
    15   4. 显示数据 : {{xxx}}
    16   5. 理解vue的mvvm实现
    17 -->
    18 
    19 <!--模板-->
    20 <div id="test">
    21   <input type="text" v-model="msg"><br><!--指令-->
    22   <input type="text" v-model="msg"><!--指令-->
    23   <p>hello {{msg}}</p><!--大括号表达式-->
    24 </div>
    25 
    26 <script type="text/javascript" src="../js/vue.js"></script>
    27 <script type="text/javascript">
    28   const vm = new Vue({ // 配置对象 options
    29     // 配置选项(option)
    30     el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
    31     data: {
    32       msg: 'atguigu'
    33     }
    34   })
    35 </script>
    36 </body>
    37 </html>
     
  • 相关阅读:
    day84
    模型层之单表操作
    Django的模板层
    Django框架导读
    创建Django项目
    名称空间2.0path
    js基础之BOM和DOM
    LG5003 跳舞的线
    20191003 「HZOJ NOIP2019 Round #8」20191003模拟
    LG3092 「USACO2013NOV」No Change 状压DP
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12466849.html
Copyright © 2011-2022 走看看