Vue – 基本使用

tzming • 2022-10-24 • Vue, 前端 • 271 阅读

基本使用步骤

① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（ vue 实例对象）

<body>
  <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
  <div id="app">{{ username }}</div>

  <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
  <script src="./lib/vue-2.6.12.js"></script>
  <!-- 2. 创建 Vue 的实例对象 -->
  <script>
    // 创建 Vue 的实例对象
    const vm = new Vue({
      // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
      el: '#app',
      // data 对象就是要渲染到页面上的数据
      data: {
        username: 'zhangsan'
      }
    })
  </script>
</body>

 

基本代码与 MVVM 的对应关系

 

 

Vue调试工具：Vue Devtools 下载

Chrome 浏览器在线安装vue-devtools ：

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

FireFox 浏览器在线安装vue-devtools ：

https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

文件下载
来源：默认网盘

如果您喜欢本站，点击这儿不花一分钱捐赠本站

这些信息可能会帮助到你： 下载帮助 | 报毒说明 | 进站必看

修改版本安卓软件，加群提示为修改者自留，非本站信息，注意鉴别

THE END
分享
二维码
打赏
海报
Vue – 基本使用
① 导入 vue.js 的 script 脚本文件 ② 在页面中声明一个将要被 vue 所控制的 DOM 区域 ③ 创建 vm 实例对象（ vue 实例对象）
<<上一篇
下一篇>>