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

Vue学习笔记资源获取

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

如果有CSDN积分的直接下载：https://download.csdn.net/download/qq_31384551/18271053
没有积分的请使用网盘下载：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

阅读提示

欢迎关注【聚繁分享】公众号，这里只有干货和鸡汤，大家一起交流学习、共勉！欢迎你的加入

Vue.js

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

1.Vue安装使用

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

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

1.2生产环境使用

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

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>
	<!-- v-on:click指明事件类型，设置事件方法 -->
	<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: '
这是个待办项
'
})

//组件定义后再执行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: '
{
     {todo.name}}
'
})
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:'
{
      {todo.name}}
'
    }
    var app = new Vue({
      
        el: '#app',
        data:{
      
          obj:{
      
              name:'Admin',
              age:18
          }
        },
        components:{
      
            'my-component':MyComponent
        }
    })
script>

6.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

<style>
    .font-red-color{
      
        color: red;
    }
style>

<div id="app">
    <div v-bind:class="{
      'font-red-color':isRed}">测试显示的文本div>
    <div v-bind:class="classObje">测试显示的文本2222222div>
div>
<script>
    var app = new Vue({
      
        el: '#app',
        data: {
      
            classObje:{
      
                'font-red-color':true
            }
        }
    })
script>

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("/**");
    }
}