Vue学习笔记，快速入门文档

逃离我推掉我的手 2023-01-18 04:05 13阅读 0赞

# Vue学习笔记资源获取 #

此文档有离线版本学习笔记，下载方式如下

> 如果有CSDN积分的直接下载：[https://download.csdn.net/download/qq\_31384551/18271053][https_download.csdn.net_download_qq_31384551_18271053]  
> 没有积分的请使用网盘下载：[https://pan.baidu.com/s/1hpWldFQln0jcPrvIeRl98A][https_pan.baidu.com_s_1hpWldFQln0jcPrvIeRl98A] 提取码：2t4v

> 实时更新笔记地址：[https://gitee.com/qwertiddler/markdown/blob/master/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.md][https_gitee.com_qwertiddler_markdown_blob_master_Vue_E5_AD_A6_E4_B9_A0_E7_AC_94_E8_AE_B0_Vue_E5_AD_A6_E4_B9_A0_E7_AC_94_E8_AE_B0.md]

# 阅读提示 #

> 欢迎关注【聚繁分享】公众号，这里只有干货和鸡汤，大家一起交流学习、共勉！欢迎你的加入  
> ![聚繁分享微信公众号二维码][20210430150043607.jpg_pic_center]

# Vue.js #

> 说明：示例及图片大部分整理自Vue官网[Vue官网：https://cn.vuejs.org/][Vue_https_cn.vuejs.org]

### 1.Vue安装使用 ###

#### 1.1开发环境使用(包含了有帮助的命令行警告) ####

#### 1.2生产环境使用 ####

### 2.Vue数据绑定（模板语法） ###

#### 2.1普通绑定 ####

<div id="app">{ {  message }}</div>
    
    <div v-once>这个将不会改变: { {  message }}</div>
    
    //js
    var app = new Vue({ 
      el: '#app',
      data: { 
        message: 'Hello Vue!'
      }
    })

#### 2.2只绑定1次 ####

<div v-once>这个将不会改变: {
       { message }}</div>

#### 2.3绑定HTML ####

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

#### 2.4绑定属性Attribute ####

<div id="app">
        <div v-bind:id="dynamicId">哈哈哈哈哈哈</div>
    </div>
    <script> var app = new Vue({ el: '#app', data: { dynamicId: 'testId' } }) </script>

#### 2.5 JavaScript表达式 ####

<div id="app">
        <div>{
       {name == 'Admin'?'管理员':'未知'}}</div>
    </div>
    <script> var app = new Vue({ el: '#app', data: { name: 'Admin' } }) </script>

### 3.Vue条件判断 ###

<div id="app-3">
        <p v-if="seen">现在你看到我了</p>
    </div>
    
    //js
    var app3 = new Vue({ 
      el: '#app-3',
      data: { 
        seen: true
      }
    })

### 4.Vue循环语句 ###

<div id="app-4">
        <ol>
            <li v-for="todo in todos"> { {  todo.text }} </li>
        </ol>
    </div>
    
    //js
    var app4 = new Vue({ 
      el: '#app-4',
      data: { 
        todos: [
          {  text: '学习 JavaScript' },
          {  text: '学习 Vue' },
          {  text: '整个牛项目' }
        ]
      }
    })

### 5.Vue绑定事件 ###

<div id="app-5">
        <p>{ {  message }}</p>
    	
    	<button v-on:click="reverseMessage">反转消息</button>
    </div>
    
    //js
    var app5 = new Vue({ 
      el: '#app-5',
      data: { 
        message: 'Hello Vue.js!'
      },
      methods: { 
        //定义方法
        reverseMessage: function () { 
          this.message = this.message.split('').reverse().join('')
        }
      }
    })

### 5.Vue定义组件 ###

#### 5.1全局注册 ####

<div id="app">
        <todo-item></todo-item>
    </div>
    
    //js
    
    // 定义名为 todo-item 的新组件
    Vue.component('todo-item', { 
      template: '<li>这是个待办项</li>'
    })
    
    //组件定义后再执行Vue初始化，否则组件定义无效
    var app = new Vue({ 
      el: '#app'
    })

#### 5.2接收参数 ####

<div id="app">
        <todo-item v-bind:todo="obj"></todo-item>
    </div>
    
    //js
    // 定义名为 todo-item 的新组件
    Vue.component('todo-item', { 
        props:['todo'],
        template: '<li>{ {todo.name}}</li>'
    })
    var app = new Vue({ 
        el: '#app',
        data: { 
            obj: { 
                name: "Admin",
                age:18
            }
        }
    })

#### 5.3局部注册 ####

<div id="app">
        <my-component v-bind:todo="obj"></my-component>
    </div>
    <script> let MyComponent={ props:['todo'], template:'<div>{ {todo.name}}</div>' } var app = new Vue({ el: '#app', data:{ obj:{ name:'Admin', age:18 } }, components:{ 'my-component':MyComponent } }) </script>

### 6.Vue生命周期钩子 ###

![Vue生命周期钩子函数][Vue]

### 7.Vue计算属性 ###

<div id="example">
        <p>Original message: "{
       { message }}"</p>
        <p>Computed reversed message: "{
       { reversedMessage }}"</p>
    </div>
    <script> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) </script>

### 8.Vue动态绑定class、style ###

### 9.Vue输入绑定 ###

<div id="app">
        <input v-model="message" placeholder="edit me">
        <p>Message is: {
       { message }}</p>
    </div>
    <script> var app = new Vue({ el: '#app', data: { message: '' } }) </script>

# Vue-Cli #

### 1.Vue安装项目 ###

#### 1.1添加Vue-Cli环境 ####

npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

> 这里推荐使用yarn，并且vue-cli全程使用yarn

#### 1.2Vue查看Vue版本 ####

vue --version

#### 1.3Vue版本升级、更新 ####

npm update -g @vue/cli
    # 或者
    yarn global upgrade --latest @vue/cli

#### 1.4Vue创建项目 ####

vue create hello-world

#### 1.5Vue注意事项 ####

*  安装Node后虽然环境变量是自动配置了，但是如果安装yarn、cnpm、vue等包成功了，但是又找不到命令的情况下，请配置以下环境变量，就是node安装目录下的\[^ node\_global\]文件夹，Linux自行调整
    
        D:\Program Files\nodejs\node_global
 *  如果使用 \[^ vue create hello-world\] 命令需要\[^ vue3.0\]版本以上才可以执行

#### 1.6Vue启动项目 ####

npm run serve
    # OR
    yarn serve

### 2.关于打包 ###

> 在vue.config.js中需要配置，如果没有vue.config.js文件请新建一个，babel.config.js文件不是vue.config.js

module.exports = { 
      publicPath: './',
    }

> 添加如上配置，build打包后可以直接打开/dist/index.html在浏览器运行

### 3.网络请求Axios ###

#### 安装 ####

npm install --save axios vue-axios

#### 配置 ####

> vue-cli 4的配置，入口文件main.js中配置

import {  createApp } from 'vue'
    import App from './App.vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    createApp(App)
        .use(VueAxios, axios)
        .mount('#app')

#### 使用 ####

this.axios.get('http://localhost:9001/api/testApi').then((response) => { 
      console.log(response.data);
    })

#### Axios解决跨域 ####

> 第一步 入口文件main.js配置一个baseUrl

import {  createApp } from 'vue'
    import App from './App.vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    //配置baseUrl
    axios.defaults.baseURL = '/api'
    
    createApp(App)
        .use(VueAxios, axios)
        .mount('#app')

> 第二步 vue.config.js文件配置代理，如果没有vue.config.js文件的自己手动新建

module.exports = { 
      devServer: { 
        proxy: { 
          '/api': { 
            // 此处的写法，目的是为了 将 /api 替换成 http://localhost:8001/
            target: 'http://localhost:8001/',
            // 允许跨域
            changeOrigin: true,
            ws: true,
            pathRewrite: { 
              '^/api': ''
            }
          }
        }
      }
    }

> 第三步 请求测试，这里的第一个/api为前缀，实际请求接口为http://localhost:8001/api/testApi

this.axios.get('/api/testApi').then((response) => { 
      console.log(response.data);
    })

> 第四步 服务器程序运行请求跨域，这里以 Java springboot 程序为例，允许所有请求跨域访问

package com.example.springbootarthastool.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    /** * @description: * @author: 大BUG * @date: 2021/4/30 13:52 */
    @Configuration
    public class WebMvcConfig implements WebMvcConfigurer { 
    
        @Override
        public void addCorsMappings(CorsRegistry registry) { 
            registry.addMapping("/**");
        }
    }

[https_download.csdn.net_download_qq_31384551_18271053]: https://download.csdn.net/download/qq_31384551/18271053
[https_pan.baidu.com_s_1hpWldFQln0jcPrvIeRl98A]: https://pan.baidu.com/s/1hpWldFQln0jcPrvIeRl98A
[https_gitee.com_qwertiddler_markdown_blob_master_Vue_E5_AD_A6_E4_B9_A0_E7_AC_94_E8_AE_B0_Vue_E5_AD_A6_E4_B9_A0_E7_AC_94_E8_AE_B0.md]: https://gitee.com/qwertiddler/markdown/blob/master/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.md
[20210430150043607.jpg_pic_center]: /images/20221021/d081261b072c435cbc44e7d9e4ab9baa.png
[Vue_https_cn.vuejs.org]: https://cn.vuejs.org/
[Vue]: /images/20221021/dd983b06b75e488c841b94198b45ad17.png