Vue

最新推荐文章于 2022-11-17 10:17:05 发布
原创 最新推荐文章于 2022-11-17 10:17:05 发布
· 321 阅读 · 4 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #java #nodejs

Vue

1.简介

  • Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
  • Vue 的核心库只关注视图层。

CSS预处理器

  • 在实际开发中，不会直接使用CSS进行页面渲染。而是使用CSS预处理器。它是一种编程语言，专门进行Web页面样式设计，再通过编译器转换为正常的css文件。

  • 常用的CSS预处理器

    • SASS
    • LESS

    后端需要的话，建议使用LESS。

MVVM模式

  • MVVM（Model-View-ViewModel）是一种软件设计模式。

  • MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：

    • 该层向上与视图层进行双向数据绑定
    • 向下与Model层通过接口请求进行数据交互

  • 优点：

    • 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
    • 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
    • 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
    • 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

2020061517580183.png

2.Axios异步通信

  • 它是一个异步通信框架
  • 主要作用是实现AJAX异步通信。

1.实现Axios

1.将javaScript设置为ES6特性

2.新建一个存放json数据的文件
{
  "name": "dz",
  "age": "18",
  "sex": "男",
  "url":"https://www.baidu.com",
  "address": {
    "street": "画家村",
    "city": "南阳",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com"
    },
    {
      "name": "cqh video",
      "url": "https://www.4399.com"
    }
  ]
}
3.使用Axios
<!DOCTYPE html>
<html lang="en" xmlns:v-blid="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  {{info.name}}   //获取data()方法中的数据
    <a v-bind:href="info.url">click me</a>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!--导入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //data： 属性  下边的是一个方法
        data(){
            return {
                info:null
            }
        },
        mounted() {  //钩子函数，axios一般在这个函数里边写
            axios.get('../data.json').then(response => (this.info = response.data))
        }
    });
</script>

</body>
</html>

3.第一个vue-cli项目

  • vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板。
  • 去Node.js官网http://nodejs.cn/download/ 下载node.js
  • 安装完成后，查看是否安装成功。

image-20210512211048458.png

  • 在命令行输入 下面命令。注意：这里容易出错，自己上网找解决方案。
npm install cnpm -g    #cnpm是阿里镜像云，能加快下载速度

cnpm install vue-cli -g  #安装脚手架

# 这里的 myvue 是项目名称，可以根据自己的需求起名。一直点 no 就行
vue init webpack myvue
  • 初始化并运行
#进入项目目录
cd myvue
#下载依赖
npm install
#运行项目
npm run dev
  • 出现这个界面说明项目运行成功。在浏览器输入http://localhost:8080/ 即可进入页面。

image-20210512211639424.png

4.webpack

1.简介

  • webpack是javascript应用程序的静态模块打包器。
  • 它会递归的构建一个依赖关系图，其中包含应用程序的每一个模块。
  • 然后将所有的模块打包成一个或多个bundle。
  • 类似于maven。

2.下载

npm install webpack -g
npm install webpack-cli -g

//检查是否安装成功
webpack -v

3.实践

  1. 创建一个项目（即新建一个文件夹）
  2. 使用idea打开后，新建一个modules文件夹。存放 js文件。
  3. 新建一个js文件（随便取名）
//暴露一个方法
exports.sayHi=function () {
     document.write("hello,world");
}
  1. 新建一个main.js文件，作为打包时的 entry属性。
var hello=require("./hello");  //一个js文件相当于一个对象
hello.sayHi();
  1. 在项目目录下新建webpack.config.js文件，用来打包。
//将module 导出去
module.exports = {
//    程序入口
    entry: './modules/main.js',
    //打包后输出位置
    output:{
        filename: "./js/bundle.js"
    }
};
  1. 在idea控制台输入 webpack，进行打包。
  2. 在项目目录下新建一个html文件，导入js模块。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="dist/js/bundle.js"></script>

</body>
</html>
  1. 项目目录

在这里插入图片描述

5.router

1.简介

  • 作用：实现页面跳转
  • 相当于SpringMVC中的RequestMapping。

2.实现步骤

  1. 下载vue-router
  • save的意思是保存在当前项目
npm install vue-router --save-dev
  1. 在components中新建两个 vue 文件。
  • Content.vue
<template>
  <h1>hello,world</h1>
</template>
<script>
    export default {
        name: "Content"
    }
</script>
<style scoped>
</style>
  • Main.vue
<template>
    <h1>首页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>
</style>
  1. 配置路由
  • 在router（新建）文件夹下新建index.js文件
import Vue from'vue'
//导入路由插件
import Router from 'vue-router'
//导入上面定义的组件
import Content from '../components/Content'
import Main from '../components/Main'
//安装路由
Vue.use(Router) ;
//配置路由
export default new Router({
  routes:[
    {
      //路由路径
      path:'/content',
      //路由名称
      name:'content',
      //跳转到组件
      component:Content
    },{
      //路由路径
      path:'/main',
      //路由名称
      name:'main',
      //跳转到组件
      component:Main
    }
  ]
});
  1. 在App.vue中显示路由
<template>
  <div id="app">
    <!--
      router-link：默认会被渲染成一个<a>标签，to属性为指定链接
      router-view：用于渲染路由匹配到的组件
    -->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default{
    name:'App'
  }
</script>
<style></style>
  1. 在main.js 配置路由
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/>'
})
  1. 项目结构
    在这里插入图片描述

3.路由模式

  • 路由模式有两种。
  • hash 路径带#号
  • history 不带#号
export default new Router({
  mode:'history',
  routes:[]
})

6.vue+elementUI

1.创建一个项目

vue init webpack hello-vue

cd hello-vue  

npm i element-ui -S
#安装依赖
npm install
#写css的
cnpm install sass-loader node-sass --save-dev  
#安装axios
npm install axios
npm install --save vue-axios 

npm run dev

2.使用axios和elementUI

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import axios from 'axios';
Vue.prototype.$axios = axios;

//导入elementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

3.使用axios获取后端传递的参数

  • 注意：这里使用的是 this.$axios.
 this.$axios.get('http://localhost:8181/book/findByPage/1').then(function (resp) {
        console.log(resp.data)
      })

7.和url相关的问题

1.路由嵌套

  • 配置完成后，到时候直接引用即可。
    在这里插入图片描述

2.参数传递(两种方式)

  • 推荐使用第二种方式
  1. 前端传递参数
    • 这里的name对应路由设置的name。
    • to变为 :to，进行数据绑定
  <router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
  1. 路由接收参数
{path:'/user/profile/:id',name:'UserProfile',component: Profile}
  1. 在vue中显示出来
    • 取值不能直接放在根节点下。即{{$route.params.id}} 需要由div标签包裹起来。
<div>
    <h1>个人信息</h1>
    {{$route.params.id}}
</div>

第二种方式

  1. 第一个步骤不变
  2. 接受参数时添加将 props 设置为 true。
 {path:'/user/profile/:id',name:'UserProfile',component: Profile,props:true}
  1. 取值
  • 在script里边添加了 props 属性。 取值时直接取下边的id。
<template>
<!--  取值不能直接放在根节点下-->
  <div>
    <h1>个人信息</h1>
    {{id}}
  </div>

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

3.重定向

  • 在index.js里边进行配置
{
    path:'/goHome', 
    redirect: '/main'
}
vue中组件的props属性（详）
蜗牛~~
10-28 18万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
Vue3通透教程【一】Vue3现状—必然趋势？
官方推荐
01-30 7万+
凉哥作为 Vue 的忠诚粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事。
vue2+vuex+vue-router 快速入门（一） 简单介绍
minksyb的专栏
12-07 2340
vue2　　vue 官方解释为一套构建用户界面的渐进式框架。而我的理解 vue 是一套以视图为核心、数据为驱动的组件化开发框架。使用过模板引擎的同学都知道：只要我们把数据传入已经编译好的模板中，便能渲染出我们想要的视图。// 伪码 import engine from TMplateEngine import template from 'somewhere'let data = {...}
__vue__
The_fat_cat的博客
10-13 599
简介扫盲 css预处理器 用一种专门得编程语言 进行web页面样式设计，在通过编译器转化为正常得css文件 SASS 基于Ruby LESS 基于NodeJS ECMAScript标准 js框架 jQuery Angular 模块化开发：搞出来一个前端的mvc—> view data vm:数据双向绑定 React 新概念：虚拟DOM —> 利用内存 VUE （综合Angular和React的优点）计算属性—>vue特色 Axios 前端通信框架 可
vue+(vue2
qq_41950754的博客
11-17 938
.....
Vue_基础
一叶知秋
07-27 488
Vue_基础概述示例相关语法动态样式classstyle 概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 示例 //创建Vue实例 var vm = new Vue({ //页面作用范围 el: "#app"...
基于SpringBoot+Vue的学生选课管理系统的毕业设计，Vue+SpringBoot+MybatisPlus+MySQL
03-24
本文主要介绍基于SpringBoot+Vue的学生选课管理系统的源码实现。该系统实现了学生选课、退课、课程管理、学生管理等功能,采用前后端分离的模式,前端使用Vue框架,后端使用SpringBoot框架。 后端使用SpringBoot+...
ruoyi-vue-pro sql
最新发布
08-06
各模块的sql
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
入门vue----（介绍）
weixin_30399821的博客
11-22 107
声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统： <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 我...
Vue----Vue简介
emmmm.....
04-28 955
文章目录1 Vue简介1.1 什么是Vue1.2 vue的特性1.3 MVVM1.3.1 MVVM的工作原理1.4 vue的版本 1 Vue简介 1.1 什么是Vue Vue是一套用于构建用户界面的前端框架 构建用户界面： 用Vue往页面中填充数据非常方便。 前端开发者最主要的工作就是为网站的使用者构建美观、舒适、好用的网页。 框架： 一套现成的解决方案 vue全家桶：vue(核心库)、vue-router(路由方案)、vuex(状态管理方案)、vue组件库(快速搭建页面UI效果的方案)
vue -- 初级（一）
htong521的博客
06-02 717
什么是Vue.js Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第...
vue + 常规
jz1993的博客
07-09 257
download url :          https://vuejs.org/v2/guide/installation.html vuex远程学习地址  https://vuex.vuejs.org/zh/guide/   Vue2.0 render:h =&gt; h(App) 1 new Vue({ 2 3 router, 4 store, 5 //c...
Vue_基础学习
sinat_39045958的博客
02-23 366
start SPA 单页应用 Single Page Application 特点 更好的用户体验 让用户在web App 感受native app 的速度和流畅 前后端职责分离,架构清晰 前端负责交互逻辑, 后端负责数据处理 前后端单独开发,单独测试 良好的交互体验,前端进行的是局部渲染 不利于搜索引擎优化 Vue 是一套用于构建用户界面的渐进式框架。 与其它大型框架不同...
Vue （Vue+Vue-router+Vuex）简单梳理-1
小白
03-01 849
一，Vue（整体架构） 1，Vue的设计思想 数据驱动应用 MVVM模式的践行者（响应式，模板，渲染） 2，计算属性computed 和 监听器watch 监听器适合一个数据影响多个数据，计算属性适合一个数据受多个数据影响 计算属性有缓存性 监听器选项提供了更通用的方法，适合执行异步操作或较大开销操作的情况 3，Vue组件化的理解 组件是可复用的Vue （VueComponent）的实例，继承自Vue。 优点：可以增加代码的复用性、可维护性和可测试性。 -使用场景：通用组件，业务组件，页面组
vue+element-ui
qq_60555957的博客
09-29 5956
vue+element-ui
vue —— 基本语法
我的博客
11-08 974
vue基本语法 1. 插入到html中的{{}}是动态变化的，随着括号内的变量的变化而变化 2. v-bind和v-model v-bind和v-model都是绑定属性的。v-model只作用于表单元素的属性绑定，且它是双向绑定的。即在页面上的直接操作也会改变变量。v-bind可以作用于所有属性，它是单向绑定的。在页面的直接操作不会改变变量。 v-bind可以简写为: 3. v-text和...
vue+element搭建项目（vue全家桶：Vue+Vue-router+Vuex+axios）
qq_39755601的博客
02-01 1805
新建一个vue项目 1.安装vue-cli3脚手架：npm install -g @vue/cli 2.通过vue-cli3创建项目：vue create index（index为您的文件名称） 3.回车，第三个的意思是手动安装，前两个是自动安装 4.下面是手动安装，根据自己需求选择 5.回车，如下图配置 6.回车开始安装，如果出现了下面这个报错，就这样修改 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值