Life with teacher Lemon.

Vue 初体验

2020.09.09 | 共 353 字,阅读需约 1 分钟.

Vue 是什么

Vue 是一套用于构建用户界面的渐进式框架。

Vue 安装方式

CDN 直接引入

  <!-- 开发环境版本 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 生产环境版本 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

下载引入

  <!-- 开发环境版本 -->
  https://vuejs.org/js/vue.js
  <!-- 生产环境版本 -->
  https://vuejs.org/js/vue.min.js

NPM安装

  # 最新稳定版
  $ npm install vue

我们先学习 Vue 语法,建议优先选择使用 CDN 或者下载引入的方式。

Vue 初体验

新建 Html 文件 Hello.html ,内容如下:

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<title>Hello Lemon</title>
  </head>
  <body>
  <div id="app">
  {{ welcome }}
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let welcome = "Hello Lemon.";
    const app = new Vue({
      //用于挂载要管理的元素
    	el: '#app', 
      // 定义数据
      data: { 
      	welcome: welcome
      }
    })
  </script>
  </body>
  </html>

使用浏览器打开 Hello.html 文件,可以看到 Hello Lemon. 我们看到的这种挂载方式被称之为声明式编程,数据和界面元素是分离的,而不需要像之前传统的方式通过 Javascript 来操作 DOM 元素的方式来改变值。那么 Vue 的值是怎么改变的呢?我们只需要改变 data 中 的 welcome 的值(F12 打开页面调试,在 console 页签下输入 app.welcome = 'I Love Lemon.'),页面信息就会跟着刷新,这就是数据与元素分离的魅力。

今日诗词