Vue基础学习笔记

最新推荐文章于 2022-07-09 19:09:18 发布

用单眼皮的眼睛看世界

最新推荐文章于 2022-07-09 19:09:18 发布

阅读量346

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/pyt_my/article/details/112661983

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue学习笔记

基本概念

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

MVVM的实现

Model：模型层，在这里表示JavaScript对象

View：视图层，在这里表示DOM

ViewModel:连接视图和数据的中间件，Vuei实现者

注意：在MVVM结构中，是不允许视图直接和数据进行通信的，只能通过ViewModel进行通信；

ViewModel能够观察到数据的变化，并对视图的内容进行更新

ViewModel能够监听到视图的变化，并能够通知数据发生变化

Vue的核心就是能够实现DOM的监听和绑定

第一个Vue测试实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<-- Vue实例，el:绑定Id，data:显示数据 -->
<script>
var vue = new Vue({
  el: '#app',
  data: {
    message: '我的第一个Vue程序!'
  }
})
</script>
</body>
</html>

在控制台上通过调用对象vue.message=" ";就可以观察到动态的变化值

Vue常用的属性及方法

学习vue我们必须之到它的7个属性，8个方法，以及7个指令。787原则

el属性

用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性

用来设置模板，会替换页面元素，包括占位符。
methods属性

放置页面中的业务逻辑，js方法一般都放置在methods中
render属性

创建真正的Virtual Dom
computed属性

用来计算
watch属性

watch:function(new,old){}
- 监听data中数据的变化
- 两个参数，一个返回新值，一个返回旧值，

Vue标签的使用

1.可以使用v-bind进行标签元素的绑定；

实例：

v-bind

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue实例</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--这里通过v-bind动态绑定标签元素-->
    <span v-bind:title="message">
    使用v-bind动态获取元素！
</span>
</div>

<script>
    new Vue({
        el:'#app',
        data: {
            message: "我的第一个Vue程序"
        }
    });
</script>
</body>
</html>

v-for,v-if

<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>测试标签命令</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--for标签的测试-->
    <li v-for="term in terms">
         {{term.message}}
    </li>
    <p v-if="data1">OK</p>
    <p v-else>NO</p>
</div>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            terms: [
                {message: "term1"},
                {message: "term2"}
            ],
            data1: false
        }
    })
</script>
</body>
</html>

事件处理：v-on:=""进行事件的绑定

vue的事件函数必须放在对象中，和data平级，通过methods定义；

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <button v-on:click="sayHI">点击函数</button>

</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            terms: [
                {message: "term1"},
                {message: "term2"}
            ],
            data1: false
        },
        methods: {
            sayHI: function () {
             alert(this.data1);
        }
        }
    })
</script>
</body>
</html>

数据的双向绑定

什么是数据的双向绑定？

Vue.js是一个MVVM框架，即数据双向绑定，就是在数据发生变化的时候，视图也跟着发生变化，当视图发生变化时，数据跟着同步发生变化。

在表单中实现数据的双向绑定

可以使用v-model指令在表单,,元素上创建数据的双向绑定。它会根据控件的类型自动选取合适的方式进行数据的更新。v-model就是负责监听用户的输入事件以更新数据。

实例代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--实现数据的双向绑定-->
    <input type="text" v-model="message">{{message}}<br/>
    <input type="radio" name="sex" value="男" v-model="sex">男
    <input type="radio" name="sex" value="女" v-model="sex">女

    <p>选中了： {{sex}}</p>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            message: "message数据",
            sex: ""
        }
    })
</script>
</body>
</html>

Vue组件

通常一个应用会以一棵嵌套的组件树的形式来组织：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-txUuHlYO-1610688671095)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210111153056235.png)]

通过定义一个个自定义的组件。我们可以实现任何我们想要的功能。

基本实例：

<!--定义一个名为 button-counter 的新组件-->
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

定义了一个名称为button-counter的组件。组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })    <!--元素绑定-->

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：在我们多次调用同样的组件的时候，各个组件互相是独立的。

组件模板如何接收外部数据？

通过props属性向组件中传递数据

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

在vue对象中的数据在组件中展示：

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

axios异步通信

官方：http://www.axios-js.com/zh-cn/docs/

1.对于IDEA需要先设置JavaScript为6及以上版本：

在这里插入图片描述

2.什么是axios?

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

为什么使用axios?

由于vue严格遵守Soc(关注度分离原则)，所以vue并不包含AJAX的通信功能，为了解决通信问题，抵用axios框架，少用jQuery，因为它操作DOM太频繁。

使用：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

安装：

$ npm install axios

执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

第二种方式：

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

Vue生命周期

上图为vue对象的完整的生命周期过程。在过程中可以看到钩子函数的作用。和在页面显示渲染数据的过程。

通过钩子函数和axios通信

var vm = new Vue({
    el: "#app",
    data(){
            return{
                // 返回的数据格式必须保持一致。
                 info:{
                     name:null,
                     ....
                 }
            }
    },
    // 定义钩子函数,发送一个../data.json，上面的data为获取的响应数据
    mounted(){
         axios.get("../data.json").then(response=>(this.response.data))
    }
})

插槽的使用

什么是插槽？

插槽即slot，示意图如图所示：

在这里插入图片描述

在一个整体的模板中，放置几个slot，以后如果想在模板中添加一些功能，直接就能在插槽的位置添加。

实例代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>slot的使用</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <!-- 使用自定义组件 -->
    <myComponent>
        <myComponent-title slot="myComponent-title" v-bind:title="title"></myComponent-title>
        <myComponent-items slot="myComponent-items" v-for="item in items" v-bind:item="item"></myComponent-items>
    </myComponent>

</div>
<script>
    /*自定义组件*/
    Vue.component("myComponent",{
        // props接收参数
        template: "<div>" +
                       "<slot name='myComponent-title'></slot>" +
                       "<ul>" +
                           "<slot name='myComponent-items'></slot>" +
                       "</ul>" +
                  "</div>"
    });

    Vue.component("myComponent-title",{
        props: ["title"],
        template: "<div>{{title}}</div>"
    });

    Vue.component("myComponent-items",{
        props: ["item"],
        template:"<li>{{item}}</li>"
    });

    /*创建vue对象*/
    var vm = new Vue({
        el: "#app",
        data: {
            title: "这是标题！",
            items: [
                 "java","python","php"
            ]
        }
    })

</script>
</body>
</html>

自定义事件

什么是自定义事件？

就是自定义函数，在自定义组件中的函数能够调用vue对象中定义的函数。然后template中调用自定义组件中的函数间接调用vue对象中定义的函数；

使用方法：this.$emit(“自定义事件名”，参数);

Vue-cli

Vue的开发都是基于Nodejs,实际开发采用vue-cli脚手架开发，vue-router路由，vuex做状态管理，VueUI界面我们一般使用elementUI，或是ICE来快速搭建前端项目。

安装过程：

安装nodejs

在官网下载nodejs的安装包。可以根据自己电脑安装对应的不同的版本。

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/

Node.js 历史版本下载地址：https://nodejs.org/dist/

注意：Linux 上安装 Node.js 需要安装 Python 2.6 或 2.7 ，不建议安装 Python 3.0 以上版本。
在这里插入图片描述

我电脑是win10的系统，所以选择安装64可视化方式。binary是通过命令的方式进行安装的。下载到本地。

一路无脑下一步。。。。中间勾选一个协议然后换一个安装目录。然后一路next…

安装完成！

检查是否安装成功：

win + R 输入cmd打开黑窗口
node -v   查看安装的版本
npm -v   查看安装的npm版本，npm是安装node时就自带的

在这里插入图片描述

安装成功如上图；

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

使用npm安装淘宝镜像cnpm

为啥使用cnpm?

因为npm是国外的，可能下载东西的时候卡顿。cnpm会快一些。但是cnpm可能也会有些问题。

一般可以先试试npm安装下载，如果拉胯了。再使用cnpm

安装命令：

npm install cnpm -g

-g:全局安装，全局都能够使用

安装在c盘下的隐藏文件夹中：C:\Users\Administrator\AppData\Roaming\npm\cnpm

安装vue-cli

使用cnpm安装命令：

cnpm install vue-cli -g

测试是否安装成功：查看可以基于哪些模板创建vue程序，通常使用webpack

vue list

在这里插入图片描述

安装完成！

创建一个vue-cli程序

1.在指定的盘符目录中创建一个vue-cli工程：最好是以管理员身份打开！

vue init webpack myvue(工程名称，自定义)

在这里插入图片描述

执行命令后，一路enter和no，一个工程就创建完成了！目录如下：

在这里插入图片描述

2.初始化并运行

// 首先进入刚创建的工程目录
cd myvue
// 安装依赖,根据package.json文件中的依赖进行安装的
npm install

注意：安装过程中可能会出现错误。不过一般npm都会提示如何进行修复，执行提示的命令即可；
在这里插入图片描述

修复完成后，如下：

在这里插入图片描述

到此为止，创建vue工程完成。使用IDEA直接open打开即可。

在当前项目路径下启动项目,使用管理员启动，不然就会显示不是外部或是可执行的命令.....
npm run dev

启动完成如下：
在这里插入图片描述

直接运行路径，启动页面如下：

在这里插入图片描述

停止就ctrl+C

使用IDEA打开工程：

在这里插入图片描述

工程目录结构如上；

webpack

什么是webpack？

答：webpack是js应用程序的静态模块打包器；当webpack处理应用程序时，它会递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或是多个bundle;

在这里插入图片描述

中文文档地址：https://webpack.docschina.org/

在模块化的研究过程中，ES6模块化：

ES6标准增加了JavaScript语言层面的模块体系定义，ES6模块的设计思想，是尽量模块化，使得编译时就能确定模块的依赖关系，以及输入输出的变量；

安装webpack

npm安装：

npm install webpack -g   // 打包工具
npm install webpack-cli -g   // 客户端

测试安装：

webpack -v
webpack-cli -v

在使用webpack进行打包的时候，可能会出现依赖的版本冲突。在创建的前端项目json文件中有所有的依赖及版本。

使用webpack

1.创建项目：直接找一个位置创建一个空的文件夹：mywebpack(自定义)

2.使用IDEA打开创建的空文件夹，并在这个文件夹下创建一个modules文件，用于放置js文件目录。

3.在上一步创建的modules文件下创建一个个模块文件，就好像后端的dao,controller目录一样。在这里创建一个hello.js文件，编写js代码；

目录结构如下：

在这里插入图片描述

hello.js中的代码：

// 这里暴露一个方法:HelloDemo，和后端方法类似,其中exports表示暴露这个方法，其他文件可以调用
exports.HelloDemo = function () {
      document.write("<p>ES6的一个Dmeo</p>");
};

4.在modules目录下创建一个入口文件main.js用于打包时设置entry属性

目录结构：

在这里插入图片描述

main.js中的代码：

// require表示导入一个模块，这里导入之前创建的hello文件
var hello = require("./hello");
// 上面导入hello后就可以直接调用该文件中的所有暴露的方法。
hello.HelloDemo();

5.在创建一个webpack.config.js配置文件。用于使用webpack命令打包

目录结构：注意：webpack.config.js配置文件不能再moduls下。必须在根目录，不然打包就会报错。

文件代码：

module.exports = {
    entry: "./modules/main.js",   // 打包入口
    output: {
        filename: "./js/bundle.js"  // 打包到什么文件
    }
};

6.在对应的文件目录下，使用管理员身份在黑窗口执行打包：

出现错误：

在这里插入图片描述

纠错：

1.检查目录结构是否正确！webpack.config.js必须在根目录！

2.检查配置文件名是否正确！必须是webpack.config.js

3.在目录文件下执行：npm init 初始化，一路enter,这样就会生成一个package.json.
在这里插入图片描述

在package.json中"scripts"添加：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

然后在webpack.config.js中添加mode一行：

module.exports = {
    entry: "./modules/main.js",   // 打包入口
    output: {
        filename: "./js/bundle.js"  // 打包到什么文件
    },
    mode: "development"
};

以上检查都没问题，直接在对应目录管理员身份打包：webpack
在这里插入图片描述

打包成功！会自动生成一个dist目录
在这里插入图片描述

这样的文件就是我们经常使用的js压缩文件。

测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="dist/js/bundle.js"></script>
</head>
<body>

</body>
</html>

Vue-router路由

Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

安装

在之前创建的前端工程中,安装vue-router

npm install vue-router --save-dev

如果出现报错，直接按照提示执行相应的代码即可！

直接双击shift,搜索就可以查询到安装好的vue-router
在这里插入图片描述

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

以上就是vue-router完整的安装过程！

使用 vue-router

1.创建一个组件目录components：这个目录专门用于存放我们自己自定义的组件。可以想象成后端中自定义的类
在这里插入图片描述

创建两个vue文件，分别用于存放内容和标题。两个页面互不相关；

我们要实现的功能就是，在执行vue工程后，显示的首页面上有创建的两个页面的链接。点击链接就在页面下方显示template中的内容；要实现该功能就需要使用vue-router实现页面跳转是视图显示的功能；

2.创建vue-router路由文件，根据命名规范，使用index.js作为主配置文件；

在这里插入图片描述

index.js中的代码：

import Vue from 'vue'
import VueRouter from "vue-router"
import Content from '../components/content'
import first from "../components/first";

// 安装路由，这样导入的路由才会起作用
Vue.use(VueRouter);

// 创建路由
export default new VueRouter({
  
  routers: [
    
    {
      // 路由路径
      path: '/content',
      // 路由名称
      name: 'content',
      // 跳转的组件
      component: Content
    },
    {
      // 路由路径
      path: '/first',
      // 路由名称
      name: 'first',
      // 跳转的组件
      component: first
    } 
  ]
});

上面的代码就实现了两个路由跳转功能；

3.将配置的路由文件加载到主文件入口main.js中；

import Vue from 'vue'
import App from './App'
import router from './router'    // 我们自己写的路由配置文件

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,                     // 导入
  components: { App },
  template: '<App/>'
})

4.在App.vue文件中配置页面显示内容

<template>
  <div id="app">
      <!--跳转链接-->
      <router-link to="/content">内容页</router-link>
      <router-link to="/first">首页</router-link>
      <!--页面内容显示-->
      <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>