Vue学习

Syyccc初学Java

于 2023-07-18 18:03:07 发布

阅读量135

点赞数

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/m0_56159313/article/details/131555443

版权

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

NPM：项目综合管理工具，类似于Maven。

YARN：NPM的替代方案，类似于Maven和Gradle的关系。

ElementUI:是饿了么前端开源维护的Vue UI组件库，组件齐全，主要用于开发PC端的页面。

mpvue：是美团开发的一个使用Vue.js开发小程序的前端框架，目前支持微信小程序，百度智能小程序。

WeUI：是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中ViewModel层的实现者。在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信。ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。ViewModel能够监听到视图的变化，并能够通知数据发生变化。

<!--view层 模板-->
<div id="app">
    {{message}}<br>
    <span v-bind:title="message">
        鼠标悬浮几秒查看此处动态绑定得提示信息
    </span>
</div>

<!--1.导入Vue.js(可能要下载库）-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        // Model：数据
        data:{
            message:"Hello,Vue!"
        },
    });
</script>

v-bind:href等价于:href

我们所看到的v-bind等被称为指令。指令带有前缀v-，以表示他们是Vue提供的特殊特性，他们会在渲染的DOM上应用特殊的响应式行为。在这里，v-bind的含义是：将这个元素节点的title属性和Vue实例的message绑定在一起。

判断if

<div id="app">
  <h1 v-if="ok===true">Yes</h1>
  <h1 v-else>No</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm=new Vue({
      el:"#app",
      data:{
        ok:true
      }
    })
</script>

<!--view层 模板-->
<div id="app">
  <h1 v-if="type==='b'">Yes1</h1>
  <h1 v-else-if="type==='a'">Yes2</h1>
  <h1 v-else>No</h1>
</div>

<!--1.导入Vue.js(可能要下载库）-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
      type:'a'
    },
  });
</script>

循环for

<!--view层 模板-->
<div id="app">
  <ul>
    //index是vue自带的属性
    <li v-for="(item,index) in items">
      {{index+1}}---姓名为：{{item.name}} 年龄为：{{item.age}}
    </li>
  </ul>
</div>

<!--1.导入Vue.js(可能要下载库）-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
      // 对象用花括号表示，数组用中括号表示
      items:[{name:'shen',age:13},
              {name:"jiang",age: 14},
              {name:"yang",age:15}]
    },
  });
</script>

事件处理

@click等价于v-on:click

<!--view层 模板-->
<div id="app">
  <button v-on:click="sayHey">Clik me</button>
</div>

<!--1.导入Vue.js(可能要下载库）-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
      message:'Hello.Shen'
    },
    methods:{
        //方法必须定义在Vue的Methods对象中,通过v-on绑定事件
      sayHey:function (){
        alert(this.message);
      }
    }
  });
</script>

什么是双向绑定

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

v-model实现视图改变，数据跟着改变

<!--view层 模板-->
<div id="app">

  输入的文本:<input type="text" v-model="message">{{message}}
  <br>

  <textarea cols="30" rows="10" v-model="message1"></textarea>{{message1}}
  <br>

  <!--v-model赋值的是value  -->
  男：<input type="radio" name="sex" value="男" v-model="message2">
  女：<input type="radio" name="sex" value="女" v-model="message2">{{message2}}

  <br>
  字母：<select name="select1" v-model="letter">
    <option  value="" disabled>--请选择--</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>Value:{{letter}}
</div>

<!--1.导入Vue.js(可能要下载库）-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
      message:'Hello.Shen!',
      message1:'hello',
      message2:'sex',
      letter:''
    },
    methods:{
      //方法必须定义在Vue的Methods对象中,通过v-on绑定事件
      sayHey:function (){
        alert(this.message);
      }
    }
  });
</script>

注意：v-model会忽略所有表单元素的value，checked，selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。

Vue组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板。

先Vue.component创建组件名，组件属性props和模板template,然后在body下的该标签中使用v-for语句遍历items，然后通过v-bind绑定Vue组件的属性，进行遍历。

<body>
<!--view层 模板-->
<div id="app">

  <Shen v-for="i in items" v-bind:shen="i"></Shen>

</div>

<!--1.导入Vue.js(可能要下载库）-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>

  <!--  定义一个Vue组件component-->
  Vue.component("Shen",{
    props:["shen"],
    template: '<li>{{shen}}</li>'
  })

  var vm=new Vue({
    el:"#app",
    data:{
      items:['Java','Linux','前端']
    }
  });
</script>

Axios

Axios 是一个基于promise网络请求库，作用于node.js和浏览器中。它是 isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

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

Vue生命周期

Vue实例有一个完整的生命周期，也就是从开始创建初始化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。

Axios异步通信

mounted:编译好的HTML挂载到页面完成后执行的事件钩子。此钩子函数中一般会做一些ajax请求获取数据进行数据初始化。

在Vue中，data表示一个组件的数据对象，而data()是一个用于返回数据对象的函数。

<!--view层 模板-->
<div id="hello">

    <div>{{info.name}}</div>
    <div>{{info.address.city}}</div>
    <a v-bind:href="info.url">百度</a>

</div>

<!--1.导入Vue.js, axios.min.js(可能要下载库）-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

  var vm=new Vue({
    el:"#hello",
    //请区别data和data(),data为属性，data()为一个方法，类似于mounted()
    data(){
        return{
            //请求的返回参数，必须和json字符串对应(可以不写全)
            info:{
                name:null,
                address:{
                    street:null,
                    city:null
                },
                url:null
            }
        }
    },
    mounted(){
        //钩子函数
        //axios.get("data.json").then(response=>(console.log(response.data)))
        axios.get("data.json").then(response=>(this.info=response.data))
    }
  });
</script>

Vue计算属性

计算出来的结果保存在属性中~，在内存中运行：虚拟Dom

methods和computed中的方法重名时，methods中的方法优先级更高。

<div id="app">
  <!--currenttime1为属性 调方法的话需要加（）
    注意methods和computed的区别：methods中的
    方法需要加(),computed直接属性名可以实现
   -->
  <p>currentTime1：{{currenttime1()}}</p>
  <p>currentTime2：{{currenttime2}}</p>
</div>

<!--1.导入Vue.js(可能要下载库）-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    // Model：数据
    data:{
      message:"Hello,Vue!"
    },
    methods:{
      currenttime1:function (){
        return Date.now();//返回一个时间戳
      }
    },
    computed:{//计算属性：methods和computed中的方法名不建议重名
              //currenttime2为属性，不是一个方法
      currenttime2:function (){
        return Date.now();//返回一个时间戳
      }
    }
  });
</script>

结论：调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

slot插槽（内容分发）

slot必须设置name，不然会出现一个插槽里存在多个组件，一个组件必须对应一个插槽。

<div id="app">
  <todo>
    <todo-title slot="todo-title" v-bind:titile="todoTitile"></todo-title>
    <todo-items slot="todo-items" v-for="item1 in todoItems" v-bind:item="item1"></todo-items>
  </todo>
</div>

<!--1.导入Vue.js(可能要下载库）-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>

  Vue.component('todo',{
    template:
    '<div>'+
     //将插槽和组件对应起来        
     '<slot name="todo-title"></slot>'+
      '<ul>'+
            '<slot name="todo-items"></slot>'+
       '</ul>'+
    '</div>'
  })

  Vue.component('todo-title',{
    props:['titile'],
    template:'<div>{{titile}}</div>'
  })

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


  var vm=new Vue({
    el:"#app",
    data:{
      todoItems:['Shen','Yu','Cheng'],
      todoTitile:'这是一个标题'
    }
  })
</script>

自定义事件（组件调用Vue中的方法）

通过this.$emit()方法，子组件可以主动向父组件传递数据，使得组件之间可以灵活地进行通信和交互。

组件的按钮只能调用组件中的方法。

在Vue组件中，可以通过this.$emit()方法来触发一个自定义事件，并且可以传递参数给父组件。

使用this.$emit()方法的语法为：this.$emit()('eventName', ...args)

<div id="app">
  <todo>
    <todo-title slot="todo-title" v-bind:titile="todoTitile"></todo-title>
    <todo-items slot="todo-items" v-for="(item1,index) in todoItems" v-bind:item="item1"
                v-bind:index="index" v-on:remove1="removeItem(index)"></todo-items>
  </todo>
</div>

<!--1.导入Vue.js(可能要下载库）-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>

  Vue.component('todo',{
    template:
    '<div>'+
     //将插槽和组件对应起来
     '<slot name="todo-title"></slot>'+
      '<ul>'+
            '<slot name="todo-items"></slot>'+
       '</ul>'+
    '</div>'
  })

  Vue.component('todo-title',{
    props:['titile'],
    template:'<div>{{titile}}</div>'
  })

  Vue.component('todo-items',{
    props: ['item','index'],
    template:'<li>{{index}}--{{item}} <button v-on:click="remove">删除</button></li>',
    methods:{
        remove:function (index){
            this.$emit('remove1',index);
        }
    }
  })
  
  var vm=new Vue({
    el:"#app",
    data:{
      todoItems:['Shen','Yu','Cheng'],
      todoTitile:'这是一个标题'
    },
    methods:{
      removeItem:function (index){
          console.log("删除了 "+this.todoItems[index]+" OK")
          this.todoItems.splice(index,0)
    }
  }
  })
</script>

Vue-cli

Vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板；

npm是一个软件包管理工具，和Linux下的apt软件安装差不多。

Node.js淘宝镜像加速器（cnpm）

#-g 就是全局
npm install cnpm -g

#或使用如下语句解决npm速度慢
npm install --registry=http://registry.npm.taobao.org

安装vue-cli

cnpm install vue-cli -g

在Vue中，运行npm install命令的意思是安装项目所需的所有依赖项。Vue项目中的package.json文件记录了项目所需的依赖项的列表。npm install命令会根据package.json文件中的依赖项配置，自动下载并安装所需的依赖库。运行npm install命令会从NPM（Node Package Manager）的注册表中下载依赖项，并将它们保存在项目的node_modules目录下。这些依赖项包括Vue框架本身、Vue插件、工具库等。除了安装dependencies中列出的依赖项，如果存在devDependencies部分，运行npm install时也会安装这些开发环境的依赖项，例如构建工具、测试库等。通过安装依赖项，你可以确保Vue项目能够正常运行，并且可以使用在package.json文件中定义的各种插件和库。

vue init webpack myvue

npm install

Webpack

Webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。在Vue中，Webpack用于打包构建Vue项目的源代码和依赖模块。它允许开发者将项目的所有JavaScript模块、CSS样式、图片等资源打包在一起，并将它们转换成适用于生产环境的静态文件。通过Webpack的配置，开发者可以定义各种加载器（loaders）和插件（plugins），以实现模块化开发、代码优化、性能优化等功能。在Vue项目中，通常会使用Webpack来构建和打包项目，以便于部署到生产环境中。作用：把ES6规范的代码编译打包成ES5规范的代码，所有浏览器都可以运行。

webpack.config.js配置文件

entry	入口文件，指定WebPack用哪个文件作为项目的入口
output	输出，指定WebPack把处理完成的文件放置到指定路径
module	模块，用于处理各种类型的文件
plugins	插件，如：热更新，代码重用等
resolve	设置路径指向
watch	监听，用于设置文件改动后直接打包

使用webpack

1.创建项目

2.创建一个名为modules的目录，用于放置JS模块等资源文件

3.在modules下创建模块文件，如hello.js，用于编写JS模块相关代码。

// 暴露3个方法，类似于Java类中的3个方法
exports.sayHi=function (){
    document.write("<h1>Hello！</h1>")
};
exports.sayHi1=function (){
    document.write("<h1>Shen</h1>")
};
exports.sayHi2=function (){
    document.write("<h1>Yccc</h1>")
};

4.在modules下创建一个名为main.js的入口文件，哟ing与打包时设置entry属性

// 接收模块方法，不用加文件后缀
var hello=require("./hello");
hello.sayHi();
hello.sayHi1();

5.在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

module.exports={
    // 程序入口
    entry:'./modules/main.js',
    output:{
        filename:"./js/shen.js"
    }
};

打包会生成dist目录。

6.创建index.html,引入打包文件

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

Vue-router

vur-router用来实现页面跳转，是Vue.js官方的路由管理器，它和Vue.js的核心深度集成。

1.下载Vue-Router

npm install vue-router --save-dev

2.在main.js中显式声明使用Router

import Vue from 'vue'
import App from './App'
import router from './router/index'

Vue.config.productionTip = false

//显示声明使用VueRouter
Vue.use(router);

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

3.创建一个主页和内容页

4.创建router文件夹，在router文件夹下创建index.js(这是前端的命名规则)

import Vue from 'vue';
import VueRouter from 'vue-router';
import shenyc from "../components/shenyc.vue";
import Main from "../components/Main.vue";
//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter(
  {
    routes:[
      {
        //路由路径 相当于Java中的@RequestMapping
        path:'/shenyc',
        name:'shenyc',
        //跳转相应组件
        component: shenyc
      },
      {
        //路由路径
        path:'/Main',
        name:'Main1',
        //跳转相应组件
        component: Main
      }
    ]
  }
);

5.修改main.js中的router，区别步骤2

import Vue from 'vue'
import App from './App'
import router from './router/index'

Vue.config.productionTip = false

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

6.在App.vue中应用路由

<router-view></router-view> 是 Vue.js 中的路由插槽标签，用于渲染匹配到的路由组件。它会根据当前的路由路径动态加载对应的组件，并将其渲染在这个插槽中。例如，当访问 /home 路径时，<router-view></router-view> 会加载并渲染 Home 组件；当访问 /about 路径时，会加载并渲染 About 组件。这样可以实现页面间的无刷新切换和动态加载。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
    <h1>Hello，shenyc</h1>
    <shenyc/>
    <router-link to="/Main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import shenyc from "./components/shenyc.vue";
export default {
  name: 'App',
  components: {
    HelloWorld,shenyc
  }
}
</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;
  background: red;
}
</style>

Vue+elementUI

1.npm安装

npm i element-ui -S

2.安装sass加载器

npm install sass-loader node-sass --save-dev

3.创建Login页面

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
        title="温馨提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: '',
        password: ''
      },

      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        username: [
          {required: true, message: '账号不可为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不可为空', trigger: 'blur'}
        ]
      },

      // 对话框显示和隐藏
      dialogVisible: false
    }
  },
  methods: {
    onSubmit(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
          this.$router.push("/main");
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>

4.创建router文件夹，创建index.js，配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Main from "src/Main.vue"
import login from "src/Login.vue"

Vue.use(Router)

export default new Router(
    {
        routes:[
            {path:'/main',
             component:Main
            },
            {path:'/login',
                component:Login
            }
        ]
    }
);

参数传递和重定向

方法一：

 <router-link to="{name:'/user/profile',params:{id:1}}">个人信息</router-link>

{path:'/user/profile/:id',
    components:Profile
}

<h1>个人信息</h1>
  {{$route.params.id}}
</template>

方法二

            {path:'/user/profile/:id',
                components:Profile,
                //支持传递参数
                props:true
            }

<template>
<h1>个人信息</h1>
  {{id}}
</template>

<script>
export default {
  props:['id'],
  name: "Profile"
}
</script>

路由模式

hash：路径带#，如http://localhost/#/login

history:路径不带#，如http://localhost/login

export default new Router(
    {
        mode:"history",
        routes:[
            {path:'/main/:name',
             components:Main,
             props:true
            },
            {path:'/login',
                components:Login
            },
            {path:'/user/profile/:id',
                components:Profile,
                //支持传递参数
                props:true
            }
        ]
    }
);

Npm命令解释

-g的意思是将模块安装到全局。

--save的意思是将模块安装到项目目录下，并在package.json文件中的dependencies节点写入依赖，-S为该命令的缩写。

--save--dev的意思是将模块安装到项目目录下，并在package文件中的devDependenci节点写入依赖，-D为该命令缩写。

--legacy-peer-deps 是一个用于 npm 或 yarn 命令的选项，用于处理旧版依赖的情况。在 npm 或 yarn 中，有时会出现依赖包的版本不兼容的情况，特别是在使用老旧的依赖包时。默认情况下，npm 或 yarn 会检查依赖项之间的版本关系，并报错以防止潜在的不兼容性问题。然而，当依赖包较老且不再得到维护时，这种限制可能会导致项目无法构建或运行。这时，可以使用--legacy-peer-deps选项来忽略版本不兼容的警告或错误，强制安装旧版的依赖包。需要注意的是，虽然这个选项可以让您继续使用旧版依赖，但这可能会有潜在的风险，因为旧版依赖可能包含已知的安全漏洞或其他问题。因此，在使用时请谨慎，并尽量更新到最新版本的依赖包来保持项目的安全性和稳定性。

Sass-loader

Sass（Syntactically Awesome Style Sheets）是一种基于CSS的CSS预处理器。它扩展了CSS的功能，并提供了一些便利的特性例如嵌套选择器、变量、函数等，以帮助开发者更有效地编写和维护CSS代码。Sass通过提供一种更优雅的语法和可复用的代码片段，使得CSS的编写更加简洁、灵活和可维护。最终，Sass代码会被转换为浏览器可读的CSS代码，以实现网页的样式效。

Sass加载器的作用是将Sass代码转换为浏览器可读的CSS代码。它负责处理Sass文件的导入、变量、混合、嵌套等特性，将其转换为CSS文件并使之生效。通过使用Sass加载器，开发者可以更方便地编写和管理CSS代码，提高开发效率。