狂神说vue

Java零基础——vue篇 它是一个构建用户界面的框架 Vue是一个前端框架 js jq https://www.pmdaniu.com/#file UI网站 UI 一般开发者使用蓝湖 工具 看着UI图 写接口。 阅读详情

狂神说 Vue 笔记

Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。

HTML + CSS + JS : 视图 : 给用户看,刷新后台给的数据

网络通信 : axios

页面跳转 : vue-router

状态管理:vuex

Vue-UI : ICE , Element UI

一、前端核心分析

1. VUE 概述

Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库(如: vue-router: 跳转,vue-resource: 通信,vuex:管理)或既有项目整合

2. 前端三要素

HTML (结构) :超文本标记语言(Hyper Text Markup Language) ,决定网页的结构和内容
CSS (表现) :层叠样式表(Cascading Style sheets) ,设定网页的表现样式
JavaScript (行为) :是一种弱类型脚本语言,其源代码不需经过编译,而是由浏览器解释运行,用于控制网页的行为

3. JavaScript框架

jQuery: 大家熟知的JavaScript框架,优点是简化了DOM操作,缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;

Angular: Google收购的前端框架,由一群Java程序员开发,其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念,与微软合作,采用TypeScript语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代,除了名字,基本就是两个东西;截止发表博客时已推出了Angular6)

React: Facebook出品,一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作,在内存中模拟DOM操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门[JSX] 语言;

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

Axios :前端通信框架;因为Vue 的边界很明确,就是为了处理DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;

前端三大框架:Angular、React、Vue

二、第一个vue程序

1. 什么是MVVM

MVVM (Model-View-ViewModel) 是一种软件架构设计模式,由微软WPF (用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet,简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters 开发,是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。

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

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

在这里插入图片描述

2. 为什么要使用MVVM

MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大好处:

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

3、直接新建项目

新建project 一般可以直接完成

在这里插入图片描述
如果是通过新建文夹之后再从webstorm进去的需要
安装vue插件
在这里插入图片描述
安装成功后可以右键想木添加也 conponent
在这里插入图片描述
但是我没有这个选项 所以我去下载了一个vue.js
在引入libraries
在这里插入图片描述
在这里插入图片描述
选择core核心包 保存即可
在这里插入图片描述

4、导入vue.js

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

5、简单绑定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
{{ message }}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        //Model层
        data: {
            message: "hello world"
        }
    });
</script>
</body>
</html>



6 vue的声明周期

在这里插入图片描述

三、Vue基本语法

1、vue-bind

title绑定message元素使得鼠标悬停可以显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <span v-bind:title="message">鼠标悬浮</span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data: {
            message: "hello world"
        }
    });
</script>
</body>
</html>

2、v-if v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <span v-bind:title="message">鼠标悬浮</span>
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">c</h1>
    <h1 v-else-if="type==='C'">c</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data: {
            message: "hello world",
            ok: true,
            type: 'A'
        }
    });
</script>
</body>
</html>

在这里插入图片描述

3、v-for

类似 foreach

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


    <ul>
        <li v-for="item in items">{{ item.name }}</li>
    </ul>

    <ul>
        <li v-for="(item,index) in items">{{ item.name }}--{{ index }}</li>
    </ul>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data: {
            items: [
                {name: "luyi"},
                {name: "zengyeuqin"}
            ]
        }
    });
</script>
</body>
</html>




在这里插入图片描述

4. v-on 事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data: {
            message: "你好"
        },
       methods: {//方法必须定义在vue中的 methods 中
            sayHi: function () {
                alert(this.message);
            }
       }
    });
</script>
</body>
</html>


四、Vue双向绑定 v-model

1. 什么是双向绑定

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

​ 值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。

就像是在输入框中输入数据,下面的元素值显示出来

2. 为什么要实现数据的双向绑定

在Vue.js 中,如果使用vuex ,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥,在全局性数据流使用单项,方便跟踪;局部性数据流使用双向,简单易操作。

3. 在表单中使用双向数据绑定

你可以用v-model指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

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

<!DOCTYPE html>
<html lang="en">
<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="luyi" >男
         <input type="radio" value="女" name="sex" v-model="luyi" >女
    <p>
        选择了谁:{{luyi}}
    </p>
    下拉框 :<select v-model="selected">
            <option value="" disabled>--请选择--</option>
            <option>A</option>
            <option selected>B</option>
            <option>C</option>
           </select>
    <span>下拉框选中了:{{selected}}</span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data: {
            message: "你好",
            checked: false,
            luyi: '',
            selected: ''
        },


    });
</script>
</body>
</html>


在这里插入图片描述

五、Vue组件

​ 组件是可复用的Vue实例,说白了就是一组可以重复使用的模板,跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--组件:传递个组件的值:props-->
    <luyi v-for="(item,index) in items" v-bind:lu="item"></luyi>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    //定义一个Vue组件
    Vue.component("luyi",{
        props: ['lu'],//接收参数
        template:"<li>{{lu}}</li>"
    });

    var vm=new Vue({
        el:'#app',
        data: {
            items: ["java","Linux","前端"]
        }


    });
</script>
</body>
</html>


在这里插入图片描述

六、Axios通信

1. 什么是Axios

Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架,她的主要作用就是实现AJAX异步通信,其功能特点如下:

从浏览器中创建XMLHttpRequests

从node.js创建http请求

支持Promise API [JS中链式编程]

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF (跨站请求伪造)

GitHub: https://github.com/ axios/axios
中文文档: http://www.axios-js.com/

2. 为什么要使用Axios

由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则),所以Vue.js并不包含Ajax的通信功能,为了解决通信问题,作者单独开发了一个名为vue-resource的插件,不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery,因为它操作Dom太频繁 !

创建一个接json

{
  "name": "weg",
  "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"
    }
  ]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--v-clock解决闪烁问题-->
        [v-cloak ]{
            display: none !important;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <a v-bind:href="info.url">11</a>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--导入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>


    var vm=new Vue({
        el:'#app',

        //data:  属性:vm  data() 方法
        data(){
            return{
                //请求的返回参数  必须 和字符串一样
                info: {
                    name: null,
                    address:{
                        street: null ,
                        city: null ,
                        country: null
                    },
                    url: null
                }
            }
        },
        mounted() {//钩子函数 链式编程 程序执行的时候可以插入执行  详细看生命周期
           axios.get('../data.json').then(response=>(this.info=response.data))
        }


    });
</script>
</body>
</html>


在这里插入图片描述

七. Vue计算属性

计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--v-clock解决闪烁问题-->
        [v-cloak ]{
            display: none !important;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <p>methods:{{currentTime1()}}</p>
    <p>computed:{{currentTime2}}</p>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--导入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>


    var vm=new Vue({
        el:'#app',
        data: {
            message :"helloworld"
        },
        methods: {
            currentTime1:function () {
                return Date.now();//返回个时间戳
            }
        },
        computed: { //计算属性  methods 和computed 的方法名不建议同名  同名时  method的优先级更高
            currentTime2:function () {
                return Date.now();//返回个时间戳
            }
        }



    });
</script>
</body>
</html>


在这里插入图片描述

八、内容分发 slot

在Vue.js中我们使用 元素作为承载分发内容的出口,作者称其为插槽,可以应用在组合组件的场景中;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--v-clock解决闪烁问题-->
        [v-cloak ]{
            display: none !important;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--导入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    //slot: 插槽
    Vue.component("todo",{
        template:
            '<div>' +
            '<slot name="todo-title"></slot>' +
                '<ul>' +
                '   <slot name="todo-items"></slot>' +
                '</ul>' +
            '</div>'

    });


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

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

    var vm=new Vue({
        el:'#app',
        data: {
            title: "luyi的列表",
            todoItems: ['luyi','zengyueqing','luz']
        }



    });
</script>
</body>
</html>


在这里插入图片描述

九、自定义事件内容分发

​ 通过以上代码不难发现,数据项在Vue的实例中,但删除操作要在组件中完成,那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了,Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;

vue.component组件不能直接删除vue实例下的属性,前端可以通过methods里的自定义方法通过绑定元素删除vue的属性,组件通过this.emit()分发调用前端的自定义方法删除vue实例的元素
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--v-clock解决闪烁问题-->
        [v-cloak ]{
            display: none !important;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index" v-on:remove="removeItem(index)" :key="index"></todo-items>
    </todo>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--导入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    //slot: 插槽
    Vue.component("todo",{
        template:
            '<div>' +
            '<slot name="todo-title"></slot>' +
                '<ul>' +
                '   <slot name="todo-items"></slot>' +
                '</ul>' +
            '</div>'

    });


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

    Vue.component("todo-items",{
        props: ["item","index"],
        //click 只能绑定当前的方法
        template: '<li>{{index}}----------{{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
               //this.$emit  调用v:on的自定义事的方法
                this.$emit('remove',index);
            }
        }
    });

    var vm=new Vue({
        el:'#app',
        data: {
            title: "luyi的列表",
            todoItems: ['luyi','zengyueqing','luz']

        },
        methods:{
            removeItem: function (index) {
                console.log("删除了"+this.todoItems[index]+"ok");
                this.todoItems.splice(index,1);
            }
        }

    });
</script>
</body>
</html>


在这里插入图片描述

十、第一个vue-cli项目

1. 什么是vue-cli

​ vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;

​ 预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;
主要功能:

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

2. 需要的环境

Node.js : http://nodejs.cn/download/

安装就无脑下一步就好,安装在自己的环境目录下
安装Node.js 淘宝镜像加速器(cnpm)下载会快很多
npm install cnpm -g
安装的位置:C:\Users\Administrator\AppData\Roaming\npm

Git : https://git-scm.com/downloads
镜像:https://npm.taobao.org/mirrors/git-for-windows/

确认nodejs安装成功:

cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!

3. 安装vue-cli

#在命令台输入
cnpm install vue-cli -g
#查看是否安装成功
vue list
  • 1
  • 2
  • 3
  • 4

4. 第一个 vue-cli 应用程序

创建一个Vue项目,我们随便建立一个空的文件夹在电脑上。

​ 我这里在D盘下新建一个目录H:\webStorm\workSpace_vue

创建一个基于 webpack 模板的 vue 应用程序

# 这里的 myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue
  • 1
  • 2

一路都选择no即可;
在这里插入图片描述

​ 初始化并运行

cd myvue
npm install
npm run dev

十一、Webpack

​ WebPack 是一款模块加载器兼打包工具,它能把各种资源,如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

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

测试安装成功: 输入以下命令有版本号输出即为安装成功

 webpack -v
webpack-cli -v

1. 什么是Webpack

本质上,webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle.
 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离,等到实际需要时再异步加载。通过loader转换,任何形式的资源都可以当做模块,比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;
 伴随着移动互联网的大潮,当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里,使用HTML5、CSS3、ES6 等新的技术来开发丰富的功能,网页已经不仅仅是完成浏览器的基本需求; WebApp通常是一个SPA (单页面应用) ,每一个视图通过异步的方式加载,这导致页面初始化和使用过程中会加载越来越多的JS代码,这给前端的开发流程和资源组织带来了巨大挑战。
 前端开发和其他开发工作的主要区别,首先是前端基于多语言、多层次的编码和组织工作,其次前端产品的交付是基于浏览器的,这些资源是通过增量加载的方式运行到浏览器端,如何在开发环境组织好这些碎片化的代码和资源,并且保证他们在浏览器端快速、优雅的加载和更新,就需要一个模块化系统,这个理想中的模块化系统是前端工程师多年来一直探索的难题。

2. 使用Webpack

  1. 先创建一个包 交由idea打开 会生成一个.idea文件 那么就说明该文件就交由idea负责
    在这里插入图片描述

  2. 在idea中创建modules包,再创建hello.js,hello.js 暴露接口 相当于Java中的类

//暴露一个方法
exports.sayHi = function () {
   document.write("<h1>狂神说ES6</h1>>")
}
  1. 创建main.js 当作是js主入口 , main.js 请求hello.js 调用sayHi()方法
var hello = require("./hello");
hello.sayHi()
  1. 在主目录创建webpack-config.js , webpack-config.js 这个相当于webpack的配置文件

enrty请求main.js的文件

output是输出的位置和名字

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: './js/bundle.js'
    }
}
  1. 在idea命令台输入webpack命令(idea要设置管理员启动)

  2. 完成上述操作之后会在主目录生成一个dist文件 生成的js文件夹路径为/ dist/js/bundle.js

  3. 在主目录创建index.html 导入bundle.js
    index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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中自动降级

自定义的滚动条行为

1. 安装

基于第一个vue-cli进行测试学习;先查看node_modules中是否存在 vue-router
 vue-router 是一个插件包,所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。

npm install vue-router --save-dev

​ 安装完之后去node_modules路径看看是否有vue-router信息 有的话则表明安装成功。

2. vue-router demo实例

  1. 将之前案例由vue-cli生成的案例用idea打开

  2. 清理不用的东西 assert下的logo图片 component定义的helloworld组件 我们用自己定义的组件

  3. 清理代码 以下为清理之后的代码 src下的App.vue 和main.js以及根目录的index.html
    这三个文件的关系是 index.html 调用main.js 调用App.vue

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js:

import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置

Vue.config.productionTip = false

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

App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>迪师傅</h1>

    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-link to="/kuang">Kuang</router-link>
    <router-view></router-view>

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</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>
  1. 在components目录下创建一个自己的组件Content,Test,Main(这两个和Content内容一样的就不放示例代码了

Content.vue:

<template>
  <h1>内容</h1>
</template>

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

<style scoped>

</style>
  1. 安装路由,在src目录下,新建一个文件夹 : router,专门存放路由 index.js(默认配置文件都是这个名字)
import Vue from "vue";
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";
import Kuang from "../components/Kuang";

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path: '/content',
      name: 'content',
      //跳转的组件
      component: Content
    },
    {
      //路由路径
      path: '/main',
      name: 'main',
      //跳转的组件
      component: Main
    },
    {
      //路由路径
      path: '/kuang',
      name: 'kuang',
      //跳转的组件
      component: Kuang
    }
  ]
})
  1. 在main.js中配置路由
    main.js:
import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置

Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})
  1. 在App.vue中使用路由
    App.vue:
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>迪师傅</h1>

    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-link to="/kuang">Kuang</router-link>
    <router-view></router-view>

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</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>
  1. 启动测试一下 : npm run dev

在这里插入图片描述

十三、vue + ElementUI

根据之前创建vue-cli项目一样再来创建一个新项目

创建一个名为 hello-vue 的工程

vue init webpack hello-vue

安装依赖,我们需要安装 vue-router、element-ui、sass-loader 和node-sass 四个插件

进入工程目录
cd hello-vue
安装 vue-router
npm install vue-router --save-dev
安装 element-ui
npm i element-ui -S
安装依赖
npm install
安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
启动测试
npm run dev

Npm命令解释

  1. npm install moduleName:安装模块到项目目录下
  2. npm install -g moduleName:-g 的意思是将模块安装到全局,具体安装到磁盘的哪个位置,要看 npm config prefix的位置
  3. npm install moduleName -save:–save的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖,-S为该命令的缩写
  4. npm install moduleName -save-dev:–save-dev的意思是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖,-D为该命令的缩写

创建成功后用idea打开,并删除净东西 创建views和router文件夹用来存放视图和路由
在这里插入图片描述
在views创建Main.vue
Main.vue:


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

//elementUI导入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router);
Vue.use(ElementUI);

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

在views中创建Login.vue视图组件
Login.vue:(用的ElementUI中的代码)

<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-routers 路由到指定页面,该方式称之为编程式导航
            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>

创建路由
在 router 目录下创建一个名为 index.js 的 vue-router 路由配置文件
index.js:

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";

Vue.use(Router);

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

在main.js中配置相关
main.js是index.html调用的 所以前面注册的组件要在这里导入
一定不要忘记扫描路由配置并将其用到new Vue中
main.js:

import Vue from 'vue'
import App from './App'
//扫描路由配置
import router from './router'
//导入elementUI
import ElementUI from "element-ui"
//导入element css
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router);
Vue.use(ElementUI)

new Vue({
  el: '#app',
  router,
  render: h => h(App),//ElementUI规定这样使用
})

在App.vue中配置显示视图
App.vue :

<template>
  <div id="app">
    <router-link to="/login">login</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    name: 'App',
  }
</script>

十四、路由嵌套

​ 嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成。

Demo

创建用户信息组件,在 views/user 目录下创建一个名为 Profile.vue 的视图组件;
Profile.vue

<template>
  <h1>个人信息</h1>
</template>
<script>
  export default {
    name: "UserProfile"
  }
</script>
<style scoped>
</style>

在用户列表组件在 views/user 目录下创建一个名为 List.vue 的在这里插入代码片视图组件;

List.vue

<template>
  <h1>用户列表</h1>
</template>
<script>
  export default {
    name: "UserList"
  }
</script>
<style scoped>
</style>

修改首页视图,我们修改 Main.vue 视图组件,此处使用了 ElementUI 布局容器组件,代码如下:
Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--插入的地方-->
                <router-link to="/user/profile">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <!--在这里展示视图-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    name: "Main"
  }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

配置嵌套路由修改 router 目录下的 index.js 路由配置文件,使用children放入main中写入子模块,代码如下
index.js

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--插入的地方-->
                <router-link to="/user/profile">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <!--在这里展示视图-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    name: "Main"
  }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

路由嵌套效果图
在这里插入图片描述

十五、参数传递

Demo

1 前端传递参数

​ 此时我们在Main.vue中的route-link位置处 to 改为了 :to,是为了将这一属性当成对象使用,注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配,因为这样 Vue 才能找到对应的路由路径;

<!--name:传组件名 params:传递参数,需要绑定对象:v-bind-->
<router-link v-bind:to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>

修改路由配置,增加props:true属性

​ 主要是router下的index.js中的 path 属性中增加了 :id 这样的占位符

{
  path: '/user/profile/:id',
  name: 'UserProfile',
  component: UserProfile,
  props:true
}

前端显示

在要展示的组件Profile.vue中接收参数

Profile.vue:

<template>
  <div>
    个人信息
    {{ id }}
  </div>
</template>
<script>
    export default {
      props: ['id'],
      name: "UserProfile"
    }
</script>
<style scoped>
</style>

2. 组件重定向

​ 重定向的意思大家都明白,但 Vue 中的重定向是作用在路径不同但组件相同的情况下,比如:
​ 在router下面index.js的配置

{
  path: '/main',
  name: 'Main',
  component: Main
},
{
  path: '/goHome',
  redirect: '/main'
}

使用的话,只需要在Main.vue设置对应路径即可

说明:这里定义了两个路径,一个是 /main ,一个是 /goHome,其中 /goHome 重定向到了 /main 路径,由此可以看出重定向不需要定义组件

<el-menu-item index="1-3">
    <router-link to="/goHome">回到首页</router-link>
</el-menu-item>

3. 在钩子函数中使用异步请求

安装 Axios

npm install axios -s

main.js引用 Axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

准备数据 : 只有我们的 static 目录下的文件是可以被访问到的,所以我们就把静态文件放入该目录下。
数据和之前用的json数据一样 需要的去上述axios例子里

// 静态数据存放的位置
static/mock/data.json

在 beforeRouteEnter 中进行异步请求

Profile.vue:

export default {
    //第二种取值方式
    // props:['id'],
    name: "UserProfile",
    //钩子函数 过滤器
    beforeRouteEnter: (to, from, next) => {
      //加载数据
      console.log("进入路由之前")
      next(vm => {
        //进入路由之前执行getData方法
        vm.getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("离开路由之前")
      next();
    },
    //axios
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/mock/data.json'
        }).then(function (response) {
          console.log(response)
        })
      }
    }
  }

 

基于《狂神说Java》Vue--学习笔记 本笔记仅做学习与复习使用,不存在刻意抄袭。给各位学友强烈推荐《遇见狂神说》他的整套Java学习路线使我获益匪浅!!!点击跳转至遇见狂神说哔哩哔哩首页如果你也是狂神的小迷弟,可以加我好友一起探讨学习。... 阅读详情

相关推荐

基于Vue技术实现的购物网站(含设计报告)

本项目适用于课程设计,利用Vue实现的一个模仿antd官网的购物网站。项目功能如下所示。 1)前端功能 商品分类展示; 商品详情 商品搜索 订单详情(购物车) 登录与注册 注意:注册用户可以购买商品,非注册用户仅可以浏览、查询商品 2)后端功能(可选) 提供商品查询接口,满足系统功能。 或者:使用模拟数据,不需要后端提供数据接口 本项目采用的是模拟静态数据,所以不具备数据库文件。

java-Vue

标题

qq_40301475的博客 4031

避开这些坑!用Python ReportLab生成PDF时字体处理与中文排版的5个关键技巧

本文针对Python ReportLab库在PDF自动化生成中常见的中文排版难题,提供了五个关键技巧。内容涵盖字体注册的稳健策略、段落样式的精细控制、表格内中文的换行对齐、页面布局管理以及性能优化,旨在帮助开发者彻底解决中文乱码、排版错位等问题,生成专业美观的PDF文档。

weixin_29250403的博客 624

前后端分手大师——MVVM 模式

阅读目录简而言之组成部分没有什么是一个栗子不能解决的 简而言之 之前对 MVVM 模式一直只是模模糊糊的认识,正所谓没有实践就没有发言权,通过这两年对 Vue 框架的深入学习和项目实践,终于可以装B了有了拨开云雾见月明的感觉。 Model–View–ViewModel(MVVM) 是一个软件架构设计模式,由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Pet...

weixin_34130389的博客 712

别再只看pLDDT了!AlphaFold预测结果解读保姆级指南:pLDDT、PAE、pTM、ipTM到底怎么看?

本文详细解析了AlphaFold预测结果中的关键指标pLDDT、PAE、pTM和ipTM,帮助用户从单一依赖pLDDT进阶到全面理解蛋白质结构预测。通过实际案例和技巧,指导如何正确解读这些指标,避免常见错误,并提供了从预测到发表的实用建议。

weixin_29100399的博客 357

YOLO11涨点优化:训练技巧 | 使用标签平滑(Label Smoothing)配合余弦退火学习率,防止过拟合,稳步提点

摘要: YOLO11凭借动态卷积核调度、自适应特征融合等创新成为2026年目标检测主流,但面临训练集过拟合问题。文章聚焦两种零推理开销的正则化技巧:标签平滑(Label Smoothing)和余弦退火学习率(Cosine Annealing LR)。标签平滑通过软化硬标签(如将[1,0]改为[0.9,0.1])防止模型过度自信,代码中通过label_smoothing=0.1一键启用;余弦退火则以平滑的余弦曲线调整学习率(cos_lr=True),避免阶梯衰减的震荡。两者组合可显著缩小YOLO11训练与验证

2601_95807009的博客 45

狂神说Vue笔记

​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走,其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端,为实现成为“互联网Java全栈工程师”再向前迈进一步。Soc原则:关注点分离原则Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。HTML + CSS + JS : 视图 : 网络通信 : axios页面跳转 : vue-router状态管理:vuexVue-UI : ICE , Element UI太简单,略CSS层叠样式表

kalvin_y_liu的博客 2025

【Zephyr驱动专题】01_深扒MPU6050陀螺仪寄存器

MPU6050作为最常用的6轴运动跟踪器件,其寄存器配置直接影响传感器性能和功能实现。本文将深入解析关键寄存器,并使用逻辑分析仪抓取信号进行分析。

zero的博客 1574

【狂神说】Vue笔记:全面掌握Vue框架的必备宝典

【狂神说】Vue笔记:全面掌握Vue框架的必备宝典 【下载地址】狂神说Vue笔记全部完整资源仓库 【狂神说】Vue笔记(全部完整)资源仓库欢迎来到【狂神说】Vue笔记资源仓库!本仓库提供了一套全面、详细的Vue学习资料,是由知名技术博主“狂神说”精心整理并分享的Vue学习笔记 ...

gitblog_09795的博客 661

【2026最新版】python点云处理算法汇总(长期更新版)

python点云处理算法整理。博客长期更新,最近一次更新时间为:2026年10月4日。

点云侠的博客 42万+

用 SELECT FOR UPDATE 亲手制造典型数据库死锁——从 ABAP 视角揭秘 RDBMS 的锁争夺战

在日常 ABAP 开发中,多数人只在 ST22 里偶尔瞥见这行 dump,却对背后的原理知之甚少。本文借助社区前辈的经典实验,还原一个可复现的死锁现场,进一步讨论产生根因、检测手段与规避策略,并用真实业务案例串联起数据库、Open SQL 与 SAP NetWeaver 锁管理之间的逻辑链条。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 457

狂神说 Vue笔记

狂神说 Vue 笔记 Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 : 给用户看,刷新后台给的数据 网络通信 : axios 页面跳转 : vue-router 状态管理:vuex Vue-UI : ICE , Element UI 一、前端核心分析 1. VUE 概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注

DDDDeng_的博客 3万+

Arduino与Proteus仿真实例-HG7881(L9110)驱动直流电机仿真

HG7881(L9110)驱动直流电机仿真 HG7881 (L9110) 双通道电机驱动器模块。 HG7881 (L9110) 是一款紧凑型电机驱动芯片,支持 2.5-12V 电压范围,800mA 连续电流。 这些芯片具有内置输出钳位二极管以保护敏感的微控制器电子设备。 它们适用于非常小的机器人项目。 每个 HG7881 (L9110) 芯片都能够使用两个数字控制输入驱动单个直流电机。 一个输入用于选择电机方向,而另一个用于控制电机速度。 速度是通过使用 PWM 脉冲宽度调制来控制的。 电机驱动器通常具有

视觉与物联智能 3051

狂神说Vue笔记整理

狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走,其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端,为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则:关注点分离原则 Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 : 给用户看,刷新后台给的数据 网络通信 : axios 页面跳转 : vue-router 状态管

qq_46138160的博客 10万+

抖音无水印视频爬虫实战:从抓包分析到批量下载指定用户作品

抖音作为当前最受欢迎的短视频平台,拥有海量的优质内容。很多用户希望备份自己或他人的作品,但抖音官方并未提供批量下载功能,且直接下载的视频带有平台水印。本文将带领大家从零开始,通过抓包分析、设备模拟、请求签名等核心技术,实现一个完整的抖音无水印视频爬虫系统。本文仅供技术学习和个人备份使用,请勿将爬取的内容用于商业用途或侵犯他人版权,爬取频率请控制合理范围内。目录一、前言二、技术栈概览三、准备工作3.1 环境搭建3.2 抓包分析步骤3.3 关键API发现四、核心技术解密4.1 X-Gorgon签名算法。

2201_76125261的博客 846

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

【狂神说】Vue笔记(全部完整)资源仓库

【狂神说】Vue笔记(全部完整)资源仓库 【下载地址】狂神说Vue笔记全部完整资源仓库 【狂神说】Vue笔记(全部完整)资源仓库欢迎来到【狂神说】Vue笔记资源仓库!本仓库提供了一套全面、详细的Vue学习资料,是由知名技术博主“狂神说”精心整理并分享的Vue学习笔记 ...

gitblog_09748的博客 301

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

VUE入门小demo(狂神说vue的前11章代码集合)

VUE入门小demo(狂神说vue的前11章代码集合) *感谢B站up主狂神说Java,这里的代码均是根据视频中的代码复现的,有兴趣的可以看视频 https://www.bilibili.com/video/BV18E411a7mC?p=11 backGround: VUE的新特性:组件化(AngularJS)和虚拟DOM(react). VUE是基于SOC原则设计,所以只是单独的涉及view层。通讯需要借助其他的工具。 初识VUE: 下面展示一些 代码。 // An highlighted block

LUmayu的博客 348

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Vue-狂神说

MVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软 WPF(用于替代 WinForm,以前就是用这个技术开发桌面应用程序的)和 Silverlight(类似于 Java Applet,简单点说就是在浏览器上运行的 WPF) 的架构师 Ken Cooper 和 Ted Peters 开发,是一种简化用户界面的事件驱动编程方式。由 John Gossman(同样也是 WPF 和 Silverlight 的架构师)于 2005 年在他的博客上发表。

m0_63690570的博客 854

狂神说 Vue 笔记

Vue(读/vju/,类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue核心库只关注视图层,不仅易上手,还便于与第三方库(如:vue-router:跳转,vue-resource:通信,vuex:管理)或既有项目整合。 官网:https://cn.vuejs.org/v2/guide/ 开发者:尤雨溪 Vue.js 的 API 是参考了AngularJS、KnockoutJS、R...

星落无尘的博客 3115

狂神说 vue学习笔记

vue学习笔记 文章目录vue学习笔记一、第一个vue程序1. 什么是MVVM2. 为什么要使用MVVM3、直接新建项目4、导入vue.js5、简单绑定元素6 vue的声明周期二、Vue基本语法1、vue-bind2、v-if v-else3、v-for4. v-on 事件绑定三、Vue双向绑定 v-model1. 什么是双向绑定2. 为什么要实现数据的双向绑定3. 在表单中使用双向数据绑定四、Vue组件五、Axios通信1. 什么是Axios2. 为什么要使用Axios总结 一、第一个vue程序 1. 什

weixin_43691773的博客 4601

狂神说vue(最全笔记)

1. css Less中文网 Less快速入门 webpack打包 2. JavaScript github链接 2.1. 调试 // 在浏览器的控制台打印变量 console.log(num); 2.2. 数据类型 Number // js不区分小数和整数 Number 123 // 整数 123.1 // 浮点数 1.123e3 // 科学计数法 -99 // 负数 NAN // not a number Infinity // 无限

qq_21197507的博客 8152

【Vue】Vue狂神说笔记

1. 第一个Vue程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <title>my first vue program</title> </

passnight的博客 1093
上一篇: java集合详细笔记
下一篇: 狂神说linux
Java_小小白
博客等级 码龄9年 10粉丝 22原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值