MeAlert的笔记网站

Appearance

vue 的基本使用 ​

1.基本使用步骤 ​

  1. ​ 导入 vue.js 的 script 脚本文件
  2. ​ 在页面中声明一个将要被 vue 所控制的 DOM 区域
  3. ​ 创建 vm 实例对象（vue 实例对象）
html
<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title></title>
          <!-- 1.导入vue文件，在window全局就有了Vue这个构造函数 -->
          <script src="js/vue.js"></script>
     </head>
     <body>
          <!-- 希望Vue能够控制这个div，帮助我们把这个数据填充到div内部 -->
          <div id="app">
               {{ username }}
          </div>
          <!-- 2.创建vue的实例对象 -->
          <script>
               //创建Vue的实例对象
               const vm = new Vue({
                    //el属性是固定的写法，表示当前vm实例控制页面上的那个区域，接收的值是一个选择器
                    el:'#app',
                    //data对象就是要渲染到页面上的数据
                    data:{
                         username:'lisi'
                    }
               })
          </script>
     </body>
</html>

2.基本代码与 MVVM 的对应关系 ​

​ 简单来说上方的data就是数据源model，el所控制的区域就是视图view，

​ const vm = new Vue({ 这里面的就是ViewModel })，

html
<div id="app">{{ username }} </div>也属于view视图

Copyright © Albert MeAlert 2024