• Vue学习

    一、概述（加上一些概念的讲述）

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

    开发者为尤雨溪

    网络通信：axios

    页面跳转：vue-router

    状态管理：vuex

    VUE-UI：ICE

    内容补充

    CSS预处理器：给CSS添加了一点编程的特性，是一门新的语言

    CSS预处理器之less & sass & stylus - 掘金 (juejin.cn)

    vue：一款渐进式js框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular(模块化)和React(虚拟DOM)的优点

    axios：前端通信框架，因为vue的边界很明确，就是为了处理DOM，所以不具有通信嫩里，这个时候就需要额外使用一个通信框架与服务器交互，当然也可以直接使用jQuery提供的AJAX功能

    vue-element-admin: vue-element-admin (panjiachen.github.io)

    node.js: Node.js 教程 | 菜鸟教程 (runoob.com)

    二、第一个vue程序

    1. 什么是mvvm?

    2. 为什么使用vue.js?

    3. 第一个vue程序

     常见的前端开发工具：vscode、webstorm

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    10. <div id="app">
    11.     <h1> {{message}}h1>
    12. div>
    13.  
    15. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    16. <script>
    17.     /*2. 创建vue对象*/
    18.     var vm=new Vue({
    19.         /*3. 绑定*/
    20.         el: "#app",
    21.         /*4. 放置数据  model层*/
    22.         data: {
    23.             message: "hello vue"
    24.         }
    25.     });
    26. script>
    27.  
    28.  
    29. body>
    30. html>

    4. 为什么使用MVVM

    5. vue基本语法

    学习前端：
    判断-循环（if for）

    v-if和v-for的使用

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="app">
    9.     <h1 v-if="message">显示h1>
    10.     <h1 v-else>不显示h1>
    11. div>
    12.  
    14. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    15. <script>
    16.     /*2. 创建vue对象*/
    17.     var vm=new Vue({
    18.         /*3. 绑定*/
    19.         el: "#app",
    20.         /*4. 放置数据  model层*/
    21.         data: {
    22.             message: true
    23.         }
    24.     });
    25. script>
    26. body>
    27. html>
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    9. <div id="app">
    10.     <h1 v-for="item in items">
    11.         {{item.message}}
    12.     h1>
    13. div>
    14.  
    16. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    17. <script>
    18.     /*2. 创建vue对象*/
    19.     var vm=new Vue({
    20.         /*3. 绑定*/
    21.         el: "#app",
    22.         /*4. 放置数据  model层*/
    23.         data: {
    24.             items: [{
    25.             message: "hahaha"},
    26.                 { message: "呵呵呵呵呵呵"}
    27.                 ]
    28.         }
    29.     });
    30. script>
    31. body>
    32. html>

    6. 监听事件 使用v-on

    1. html>
    2. <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    10. <div id="app">
    11.     <button v-on:click="hello">点击button>
    12. div>
    13.  
    15. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    16. <script>
    17.     /*2. 创建vue对象*/
    18.     var vm=new Vue({
    19.         /*3. 绑定*/
    20.         el: "#app",
    21.         /*4. 放置数据  model层*/
    22.         data: {
    23.             message: "hello vue"
    24.         },
    25.         methods:{
    26.         //这里需要添加一个事件来响应
    27.             hello: function (event) {
    28.                 alert(this.message)
    29.             }
    30.         }
    31.     });
    32. script>
    33.  
    34.  
    35. body>
    36. html>

    在vue中是这样的

    在jsp中是：

    1. function  XXX(){
    2.  
    3. }

     7. 双向绑定

    7.1 文本框的绑定

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9. <div id="app">
    10.     <input type="text" v-model="message"/>
    11.     {{message}}
    12. div>
    13.  
    15. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    16. <script>
    17.     /*2. 创建vue对象*/
    18.     var vm=new Vue({
    19.         /*3. 绑定*/
    20.         el: "#app",
    21.         /*4. 放置数据  model层*/
    22.         data: {
    23.             message: "hello vue"
    24.         }
    25.     });
    26. script>
    27. body>
    28. html>

    7.2 单选与复选的绑定

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9. <div id="app">
    10.     <input type="radio" name="boy" value="男" v-model="checked"/> 男
    11.     <input type="radio" name="girl" value="女" v-model="checked"/> 女
    12.     <p>
    13.     选择的性别为：{{checked}}
    14.     p>
    15. div>
    16.  
    18. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    19. <script>
    20.     /*2. 创建vue对象*/
    21.     var vm=new Vue({
    22.         /*3. 绑定*/
    23.         el: "#app",
    24.         /*4. 放置数据  model层*/
    25.         data: {
    26.             message: "hello vue",
    27.             checked: ""
    28.         }
    29.     });
    30. script>
    31. body>
    32. html>

    7.3 下拉框的绑定

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9. <div id="app">
    10.     
    11.     <select v-model="xuanzhong">
    12.         <option value="" disabled>--请选择--option>
    13.         <option>Aoption>
    14.         <option>Boption>
    15.         <option>Coption>
    16.     select>
    17.     <p> 选中的为：{{xuanzhong}}p>
    18. div>
    19.  
    21. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    22. <script>
    23.     /*2. 创建vue对象*/
    24.     var vm=new Vue({
    25.         /*3. 绑定*/
    26.         el: "#app",
    27.         /*4. 放置数据  model层*/
    28.         data: {
    29.             message: "hello vue",
    30.             checked: "",
    31.             xuanzhong: ""
    32.         }
    33.     });
    34. script>
    35. body>
    36. html>

    这里使用disabled是让他变成不可交互的，在这里也就是不准在下拉框中选择它

    8. Vue组件讲解

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    10. <div id="app">
    11.     
    12.     <haha v-for="item in items" v-bind:bangding="item">haha>
    13. div>
    14.  
    16. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    17. <script>
    18.  
    19.     Vue.component("haha",{
    20.         props: ['bangding'],
    21.         template: '
    22.  {{bangding}}
      23. '
  • }
  • )
  • /*2. 创建vue对象*/
  • var vm=new Vue({
  • /*3. 绑定*/
  • el: "#app",
  • /*4. 放置数据 model层*/
  • data: {
  • items: ["java","python","C++"]
  • }
  • });
  • script>
  • body>
  • html>

    • 9. Axios的异步响应

    9.1 什么是axios?

     9.2 axios是干什么的?

    使用axios必须将idea中的JavaScript修改为6的版本及以上

    9.3 axios响应过程 

     实现代码：

    1. html>
    2. <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>axiostitle>
    7.     
    8.     <style>
    9.         [v-cloak] {
    10.             display: none;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15. <div id="vue" v-cloak>
    16.     <div>{{info.name}}div>
    17.     <div>{{info.address.street}}div>
    18.     <div>{{info.links}}div>
    19.     <a v-bind:href="info.url">点我a>
    20. div>
    21.  
    23. <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js">script>
    25. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    26. <script>
    27.     var vm = new Vue({
    28.         el: "#vue",
    29.         data: function () {
    30.             return {
    31.                 // 请求的返回参数名，必须和 json 字符串一样
    32.                 info: {
    33.                     name: null,
    34.                     address: {
    35.                         street: null,
    36.                         city: null,
    37.                         country: null
    38.                     },
    39.                     url: null,
    40.                     links: [
    41.                         {
    42.                             name: null,
    43.                             url: null
    44.                         }
    45.                     ]
    46.                 }
    47.             }
    48.         },
    49.         mounted: function () { // 钩子函数 链式编程 ES6新特性
    50.             axios.get('../data.json').then(response => (this.info = response.data))
    51.         }
    52.     });
    53. script>
    54. body>
    55. html>

    我们来补充以下ajax的一些概念：

    Ajax是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页页面。

    AJAX实现方式有两种：

    • 1）原生的JS实现方式：了解即可，了解即可，了解即可，实际项目中基本用的是下一种；
    • 2）JQuery实现方式：.ajax()、.get()、

    【实现步骤】：

    • 1）创建核心对象
    • 2）建立连接（方法的参数解释详见下面代码）；
    • 3）发送请求；
    • 4）接收及处理响应结果。

    10.计算属性

    也就是说计算出来的结果保存在属性中，内存中运行；减轻了浏览器的压力！

    1. html>
    2. <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <div id="app">
    8.     <p>{{hello()}}p>   
    9.     <p>{{hello1}}p>    
    10. div>
    11.  
    13. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    14. <script>
    15.     /*2. 创建vue对象*/
    16.     var vm=new Vue({
    17.         /*3. 绑定*/
    18.         el: "#app",
    19.         /*4. 放置数据  model层*/
    20.         data: {
    21.             message: "hello vue"
    22.         },
    23.         methods:{
    24.             hello: function () {
    25.                 return Date.now();
    26.             }
    27.         },
    28.         computed:{
    29.             hello1: function(){
    30.                 return Date.now();
    31.             }
    32.         }
    33.     });
    34. script>
    35. html>

    11. 插槽Slot

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         
    8.         [v-cloak ]{
    9.             display: none !important;
    10.         }
    11.     style>
    12. head>
    13. <body>
    14. <div id="app" v-cloak>
    15.     <todo>
    16.         <todo-title slot="todo-title" :title="title">todo-title>
    17.         <todo-items slot="todo-items" v-for="item in todoItems" :item="item">todo-items>
    18.     todo>
    19. div>
    20. <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js">script>
    22. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    23. <script>
    24.  
    25.     //slot: 插槽
    26.     Vue.component("todo",{
    27.         template:
    28.             '
      ' +
    29.             '' +
    30.             '
        ' +
    31.             '   ' +
    32.             '
' +
  • '
    '
  • });
  • Vue.component("todo-title",{
  • props: ["title"],
  • template: '
    {{title}}
    '
  • });
  • Vue.component("todo-items",{
  • props: ["item"],
  • template: '
  • {{item}}
    • '
  • });
  • var vm=new Vue({
  • el:'#app',
  • data: {
  • title: "haha的列表",
  • todoItems: ['haha','zengyueqing','yeye']
  • }
  • });
  • script>
  • body>
  • html>

    •  12.自定义事件内容分发

    在这里插入图片描述

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         
    8.         [v-cloak ]{
    9.             display: none !important;
    10.         }
    11.     style>
    12. head>
    13. <body>
    14. <div id="app" v-cloak>
    15.     <todo>
    16.         <todo-title slot="todo-title" :title="title">todo-title>
    17.         <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index" v-on:remove="removeItem(index)" :key="index">todo-items>
    18.     todo>
    19. div>
    21. <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js">script>
    23. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    24. <script>
    25.  
    26.     //slot: 插槽
    27.     Vue.component("todo",{
    28.         template:
    29.             '
      ' +
    30.             '' +
    31.             '
        ' +
    32.             '   ' +
    33.             '' +
    34.             '
      '
    35.  
    36.     });
    37.  
    38.  
    39.     Vue.component("todo-title",{
    40.         props: ["title"],
    41.         template: '
      {{title}}
      '
    42.     });
    43.  
    44.     Vue.component("todo-items",{
    45.         props: ["item","index"],
    46.         //click 只能绑定当前的方法
    47.         template: '
    48. {{index}}----------{{item}}
      49. ',
    49.         methods: {
    50.             remove: function (index) {
    51.                 //this.$emit  调用v:on的自定义事的方法
    52.                 this.$emit('remove',index);
    53.             }
    54.         }
    55.     });
    56.  
    57.     var vm=new Vue({
    58.         el:'#app',
    59.         data: {
    60.             title: "luyi的列表",
    61.             todoItems: ['luyi','zengyueqing','luz']
    62.  
    63.         },
    64.         methods:{
    65.             removeItem: function (index) {
    66.                 console.log("删除了"+this.todoItems[index]+"ok");
    67.                 this.todoItems.splice(index,1);
    68.             }
    69.         }
    70.  
    71.     });
    72. script>
    73. body>
    74. html>
    75.  
    76.

    三、 第一个VUE-CLI项目

    1. 什么是vue-cli? 

    2.使用前的准备

    2.1安装一些需要的资源


    ①安装淘宝镜像

    (2条消息) npm配置国内镜像（淘宝镜像）_young_man2的博客-CSDN博客_npm 设置国内镜像

    ②安装vue-cil

    参照这个博客(2条消息) vue Cli（脚手架）安装_stay_少年与梦的博客-CSDN博客_安装vue-cli脚手架

    2.2 创建文件过程

    手动创建一个Vue-cli项目

     

    接下来使用 npm -install

    然后使用idea打开项目

    最后运行命令

    3. webpack学习使用

    3.1 es6模块

     3.2 下载与安装

    webpack的安装命令

    npm install webpack-cli -g

    npm install webpack -g

    查看版本号

    3.3 使用webpack

    1. 创建项目

     然后使用idea打开

    2. 创建一个名为modules的目录，用来放置js文件

    3. 创建项目来实实现

    比如我们现在有一个hello.js，我们将它调用到main.js里面，然后我们使用webpack进行封装！

    ①hello.js

    1. //暴露一个方法
    2. exports.sayHi = function () {
    3.     document.write("
      一定要找到工作！
      "      )
    4. };
    5.

     ②main.js

    1. var helper=require("./hello")
    2. helper.sayHi();

     ③webpack.config.js

    1. module.exports={
    2.     entry: "./moudles/main.js",
    3.     output: {
    4.         filename: "./js/bundle.js"
    5.     }
    6. }

    ④在控制台使用webpack就可以进行打包

    ⑤然后他就会自动生成文件了

    这个bundle.js里面就是整合了我们的main.js和hello.js的！

    4. vue-rooter

    4.1安装vue-rooter

    npm install vue-rooter --save

    Vite 搭建 Vue2 项目（Vue2 + vue-router + vuex）-KuangStudy-文章

    5. elementUI

    5.1 安装

    npm i element-ui -S

    Element - 网站快速成型工具

    1. 创建项目

    vue init webpack hello-vue

    2. 

     5.2 使用

     解决错误：RunScriptError: post install error, please remove node_modules before retry!

  • 相关阅读:
    实例分割最全综述（入坑一载半，退坑止于此）
    线段树基本原理和操作
    Raid0创建
    vue.js 短连接 动态连接
    重学java 71.网络编程
    MySQL创建函数及其使用
    入门力扣自学笔记72 C++ （题目编号515）
    二叉树的遍历与构建问题
    NGINX安装Stream模块
    [资源推荐] 关于计算机毕设的方法论(重庆大学吕昱峰)
  • 原文地址：https://blog.csdn.net/young_man2/article/details/126280767