VUE

最新推荐文章于 2024-03-05 10:04:33 发布
最新推荐文章于 2024-03-05 10:04:33 发布
阅读量364 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42592613/article/details/110733422
版权

VUE

传统的html+css+js+jq
现在的vue+less+js+jq
less基于node.js，可以动态生成css文件，可以动态的修改页面样式
在这里插入图片描述
在这里插入图片描述
前端开发IDE
在这里插入图片描述
也可以用IDEA开发

第一个VUE程序

  • 新建一个空的项目，idea安装vue插件 vue.js插件
  • html中引入vue（cdn链接方式引入）
<!--view-->
<div id="app">
  {{message}}
</div>
<script>
  var vm = new Vue({
      el: "#app",
      //model:数据
      data: {
          message: "hello , Vue!"
      }
  });
</script>

理解mvvm model(数据层) view（试图层） model&view（数据双向绑定）

数据双向绑定，当数据变化时，页面不用刷新也会跟着变化
虚拟dom，不用再去操作页面的dom对象
在这里插入图片描述
vue中的7大对象
el: 页面元素 与元素选择器类似
data: 数据

vue基本语法

if判断
在这里插入图片描述

for循环
在这里插入图片描述

vue绑定事件

v-on
在这里插入图片描述

v-model
在这里插入图片描述
在这里插入图片描述

vue的组件

在这里插入图片描述
组件就是自定义标签在这里插入图片描述
v-bind
将数据绑定到某个字段上在这里插入图片描述

网络通信

在这里插入图片描述

 <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>

在这里插入图片描述

计算属性（vue特色）

computed
可以理解为mybatis里面的缓存，当请求的数据没有变化时，则会从缓存中拿数据，一旦数据产生变化，则重新更新数据
在这里插入图片描述

slot插槽

slot
在这里插入图片描述
用slot替换上面写死的元素标签

v-bind：可以简写成 ：在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
vue核心：数据驱动 虚拟dom 、组件化compent
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

vue-cli脚手架（构建第一个vue工程）

与maven类似
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
打包并运行成功
在这里插入图片描述
访问 http://localhost:8080/
在这里插入图片描述
在这里插入图片描述
目录分析：

  • build：打包工具目录
  • config：配置目录 端口号也在此配置
  • node_modules：类似于maven库的lib，依赖目录
  • src：代码资源目录
  • static：静态资源目录

webpack学习

静态模块打包器
浏览器现在还不支持 ECMAScript6 以上版本，如果我们开发是基于6以上版本开发的话，通过webpack可以将开发的代码版本降级到5以下
在这里插入图片描述
在这里插入图片描述
新建html文件，将打包好的js文件引入javascript中
在这里插入图片描述
引入成功
在这里插入图片描述

webpack --watch    // 热部署功能，持续监听项目，如果目标文件有变化，则重新打包

vue-router 路由

在项目目录下安装路由，其实就是将vue-router的包导入依赖中在这里插入图片描述
使用router路由步骤
1、配置路由 index.js，将组件导入到路由配置中，配置跳转组件的路径

import Vue from 'vue';
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";
//装配路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path:'/content',
      name: 'content',
      //跳转的组件
      component: Content
    },
    {
      //路由路径
      path:'/main',
      name: 'main',
      //跳转的组件
      component: Main
    }
  ]
});

2、在main.js文件中配置使用路由
注：在main中导入的router是指配置好的router的配置文件/router/index.js
注：在/router/index.js中导入的router是指依赖中的router组件

import Vue from 'vue'
import App from './App'
import router from "./router" //自定扫描里面的路由配置，每个插件的默认配置文件习惯命名为index

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3、在App.vue组件中使用路由跳转（App.vue是总的组件，里面包含各种小组件）

<template>
  <div id="app">
    <h1>VUE-ROUTER</h1>
    <router-link to="/content">内容页</router-link> //请求路由
    <router-link to="/main">首页</router-link> 
    <RouterView></RouterView>  //经路由请求组件，跳转之后组件的显示位置
  </div>
</template>

<script>
    import Content from "./components/Content"; //导入组件
    import Main from "./components/Main";
    export default {
        name: 'App',
        comments: {
            Content,   //配置组件
            Main
        }
    }
</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>

ElementUI

整合ElementUI，一个vue项目的创建流程
在这里插入图片描述
1、初始化一个vue项目 全选no

vue init webpack hello-vue

2、安装四个插件：vue-router、element-ui、sass-loader、node-sass

#安装vue-router
npm install vue-router --save-dev 

#安装element-ui
npm i element-ui -S

#安装依赖
npm install

#安装sass-loader、node-sass
cnpm install sass-loader node-sass --save-dev

3、启动项目

npm run dev

加入element之后项目不同的地方：main.js

import Vue from 'vue'
import App from './App'
import router from "./router";
//引入element-ui及其css文件
import Element from "element-ui";
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

//使用element
Vue.use(Element) 
Vue.use(router)

new Vue({
  el: '#app',
  router,
  render: h => h(App)  //使用element 需要改成的配置
})

嵌套路由

配置嵌套路由

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../views/Login";
import Main from "../views/Main";
import Children from "../views/Children";
Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/main',
      component: Main,
      children: [ //嵌套路由
        {path: '',compent: Children}
      ]

    }
  ]
})

参数传递和重定向

接收参数
路由的配置

export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/main/:id', //接收参数 ：是绑定的意思
      component: Main,
      children: [
        {path: '',compent: Children}
      ]

    }
  ]
})

页面的配置

  	<!--取出路由中的参数信息-->
    {{$route.params.id}}
    <!--name：路由的配置路径或者name属性值，params：为键值对的参数信息-->
    <router-link :to="{name:'/main',params:{id:1}}">首页</router-link>
    <router-view></router-view>

props解耦
路由配置

export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/main/:id', //接收参数 ：是绑定的意思
      component: Main,
      props: true,//解耦。可以将参数直接传递到组件中，组件使用props接收参数
      children: [
        {path: '',compent: Children}
      ]

    }
  ]
})

组件的配置

<template>
    <div>
        <h1>我是主页</h1>
       {{id}} //直接取出参数即可
    </div>
</template>

<script>
    export default {
        props: ['id'],  //使用props接收参数
        name: "Main"
    }
</script>

重定向
很简单就是在路由配置文件中增加一条重定向配置

export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/main/:id', //接收参数 ：是绑定的意思
      component: Main,
      props: true,//解耦。可以将参数直接传递到组件中，组件使用props接收参数
      children: [
        {path: '',compent: Children}
      ]
    },
    {
      path: '/gomain', ///重定向配置
      redirect: '/mian'
    }
  ]
})

404和路由钩子

在这里插入图片描述
404

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../views/Login";
import Main from "../views/Main";
import Children from "../views/Children";
import NotFound from "../views/NotFound";
Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/main/:id', //接收参数 ：是绑定的意思
      component: Main,
      props: true,//解耦。可以将参数直接传递到组件中，组件使用props接收参数
      children: [
        {path: '',compent: Children}
      ]
    },
    {
      path: '/gomain',
      redirect: '/mian'
    },
    {  //配置404页面，本质也是一个自己创建的404组件，当访问不存在的组件时都会经过这个路由
      path: '*',
      component: NotFound
    }
  ]
})

钩子函数
对于组件的配置

   export default {
        props: ['id'],
        name: "Main",
        beforeRouteEnter: (to,from,next)=>{
            console.log("进入路由之前")
            next();
        },
        beforeRouteLeave:(to,from,next)=>{
            console.log("进入路由之后")
            next();
        }
    }

在这里插入图片描述

导入axios 依赖

npm install --save vue-axios
npm install --save axios

main.js配置axios

import Vue from 'vue'
import App from './App'
import router from "./router";

//引入element-ui及其css文件
import Element from "element-ui";
import 'element-ui/lib/theme-chalk/index.css'
//引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.config.productionTip = false

//使用element
Vue.use(Element)
//使用axios
Vue.use(VueAxios,axios)
Vue.use(router)

new Vue({
  el: '#app',
  router,
  render: h => h(App)  //使用element 需要改成的配置
})

路由钩子的实际使用

组件中使用路由钩子，可以在进入路由之前提前加载数据


<template>
    <div>
        <h1>我是主页</h1>
       {{id}}
    </div>
</template>

<script>
    export default {
        props: ['id'],
        name: "Main",
        beforeRouteEnter: (to,from,next)=>{
            console.log("进入路由之前")
            //加载数据
            next(vm=>{
                vm.getData();//进入路由之前获取数据
            });
        },
        beforeRouteLeave:(to,from,next)=>{
            console.log("进入路由之后")
            next();
        },
        methods: {
          getData: function () {
              this.axios({
                  method: "get",
                  url: "https://localhost:8080/....",
              }).then(function (response) {
                  console.log(response)
              })
          }
        }
    }
</script>
我们正当年
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue
03-06
vue
前端小白如何快速上手Vue框架(上篇)
热门推荐
Logbook的博客
03-05 13万+
前言: 我之前没有接触过任何前端知识,连基本的HTML语法,css,js的基础知识都不懂,再刚接手vue的时候也是一个头两个大. 然后当然先查vue官方文档,官网会有如下提示: 然后如果你按照提示开始按部就班的看html,css,js然后再回来学习Vue的话,你可能已经被OUT了(况且周期过长,着实不推荐).直接着手一个项目是进步最快的方式,何况还有度娘和Google保驾护航. 推荐vue学习文...
MVC和MVVM区别
qq_40007317的博客
06-09 1万+
1、MVC MVC是一种设计模式： M（Model）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据； V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的； C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。 2、MVVM vue框
Vue入门教程
weixin_71366486的博客
03-05 807
<title>Vue的自定义指令(函数式)</title>-- 导入 vue.js --></style></span></h2><h2>放大10倍的n值是: <span v-big="n">点我n+1
Vue Vue介绍、Vue基础语法、Vue生命周期、axios的使用
weixin_44504809的博客
05-20 1万+
Vue Vue介绍、Vue基础语法、Vue生命周期、axios的使用
Vue简介
橘猫吃不胖的博客
03-17 5220
Vue简介1 概述2 Vue热加载3 Vue的双向数据绑定的原理 1 概述 Vue.js 可以说是MVVM架构的最佳实践，是一个JavaScript MVVM库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁。 Vue用于构建用户界面的渐进式框架，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中
Vue基础知识总结 1：Vue入门
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
vueDevTools
07-04
vue、uniapp调试工具
狂神Vue笔记+源码.zip
05-10
狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue...
Vue框架总结.pdf
04-03
Vue 中，可以通过方法创建一些全局的组件，或者局部的组件。但是，在实际 的 Vue 项目中，使用得更多的是单文件组件。 单文件组件 每一个以 .vue 为后缀的文件，都是一个组件，称为“单文件组件”。 单文件组件...
Vue登录页面
02-11
first_vue 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
初识Vue
Floatwor青舟的博客
10-30 1263
目录为什么学习流行框架框架和库的区别Vue.js简介安装第一个简单实例一些常用指令跑马灯小案例 为什么学习流行框架 企业中为了提高开发效率：在企业中，时间就是效率，效率就是金钱。 提高开发效率的发展历史：原生JS–>Jquery之类的类库–>前端模板引擎–>Angular.js/Vue.js等（能够帮助我们减少不必要的DOM操作，提高渲染效率。通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了） 在Vue中，一个核心的概念就是，让用户不再操作DOM元
什么是 vue？超简单基础入门
黑马程序员官方博客
01-03 4137
构建用户界面用 vue 往 html 页面中填充数据，非常的方便框架框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！要学习 vue，就是在学习 vue 框架中规定的用法！vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
ranran0306的博客
06-27 7697
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
vue简介
m0_58646138的博客
07-31 2万+
Vue简介 渐进式框架 vue的特点 vue的常见内置指令 v-text指令 v-html指令： v-show v-if v-else-if/v-else v-for v-bind . v-on v-model . v-once v-pre .v-cloak
Vue详解
yinuo_chao的博客
05-19 1万+
Vue详解 Vue.js目前最火的一个前端框架。点击跳转Vue详解视频 在谷底也要开花！ P00 前言：回顾SSM阶段 P01 前端核心分析 Vue：前端体系、前后端分离 1、概述 Vue（读音 /vju`/，类似于 view）是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 2756
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Vue篇(超详细讲解)
2301_77112535的博客
12-14 2178
Vue:一套用于构建用户界面的渐进式JavaScript框架渐进式: vue可以自底向上逐层的应用如果应用很简单:只需要一个轻量小巧的核心库如果应用很负责:可以引用各式各样的Vue插件1、采用组件化模式,提高代码复用率,且让代码更好维护。2、声明式编码,让编码人员无需直接操作DOM,体高开发效率、3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。1、Vue的操作命令 启动.Vue 去你对应的包里 直接 yarn serve2、首先先需要检测自己是否安装了yarn 命令。
Vue 基础入门
我的的博客哦
05-17 8045
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
vue canvas
最新发布
04-08
Vue Canvas是一个基于Vue.js框架的Canvas绘图库，它提供了一系列的组件和指令，用于在Vue应用中方便地创建和操作Canvas元素。 Vue Canvas的主要特点包括： 1. 基于Vue.js：Vue Canvas是专门为Vue.js框架设计的，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值