Day1——认识Vue

心已赠人 2023-02-25 10:19 1阅读 0赞

### 文章目录 ###

*  一. 情况
 *  二. Vue简介
 *  三. 环境搭建
 *  四. 安装vue
 *   *  4.1 直接用 <script>引入
     *  4.2 NPM方式
     *  4.3 命令行工具 (CLI)
 *  五. 初体验Vue
 *   *  5.1 在前端界面展示数据
     *  5.2 列表展示数据
     *  5.3 计数器

# 一. 情况 #

目前对Vue零基础，想尝试使用Vue做前端界面，参考的教学视频是[2019年最全最新Vue、Vuejs教程，从入门到精通][2019_Vue_Vuejs]。结合 [Vue][]的官方文档以及教学视频，现作出笔记供自己复习使用，如有错误请指正。

# 二. Vue简介 #

[Vue][](读音 /vjuː/，类似于 view) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与**现代化的工具链**以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

# 三. 环境搭建 #

IDE工具：WebStorm 2020.1.2版本 （关于注册教程请查百度，我也找不到比较稳定的注册教程）  
Vue：v2.6.11（2.x版本即可）

# 四. 安装vue #

## 4.1 直接用 <script>引入 ##

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    
    
    <script src="../js/vue.js"></script>

## 4.2 NPM方式 ##

# 最新稳定版
    $ npm install vue

## 4.3 命令行工具 (CLI) ##

CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

# 五. 初体验Vue #

**工程目录如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]

## 5.1 在前端界面展示数据 ##

这里给出关键代码，注意里面的注释内容，如下：

<body>
    <div id="app">
        
        <h1>{
       {message}}</h1>
        <h1>{
       {name}}</h1>
    </div>
    
    <script src="../js/vue.js"></script>
    <script> //编程范式:声明式编程 const app = new Vue({ el: '#app',//用于挂载要管理的元素，id为app的元素被Vue管理起来了 data: { //定义数据 message: '你好', name: '张三' } }) </script>
    </body>

**效果：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]

## 5.2 列表展示数据 ##

关键是使用`v-for="xxxx in 变量"`，如下：

<body>
    <div id="app">
        <ul>
            <li v-for="movie in movies">{
       {movie}}</li>
        </ul>
    </div>
    
    <script src="../js/vue.js"></script>
    <script> const app = new Vue({ el: '#app', data: { message: '你好', movies: ['aaa', 'bbb', 'ccc', 'ddd'] } }) </script>
    </body>

**效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 2]

## 5.3 计数器 ##

需求：点击加号+，数值加2；点击减号，数值减1。

关键代码是必须使用this获取变量，否则它将会去全局变量查找。

<body>
    <div id="app">
         <h1>当前计数：{
       {counter}}</h1>
        
        
        
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>
    
    <script src="../js/vue.js"></script>
    <script> const obj = { counter: 0 } const app = new Vue({ el: '#app', data: obj, methods: { add: function(){ console.log('add被执行'); this.counter = this.counter + 2;//这里必须使用this获取变量，否则它将会去全局变量查找counter }, sub: function () { console.log('sub被执行'); this.counter--; } } }) </script>

[2019_Vue_Vuejs]: https://www.bilibili.com/video/BV15741177Eh
[Vue]: https://cn.vuejs.org/v2/guide/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: /images/20230209/02f6ff3ec4ad4df08c46ba2f11e99b3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]: /images/20230209/4f04be425ede4f628426ebf5848c3102.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 2]: /images/20230209/74ec4a4d53f84f08b5566107e63f7cbc.png