入门 vue 学习笔记

最新推荐文章于 2024-07-10 18:13:56 发布
最新推荐文章于 2024-07-10 18:13:56 发布
阅读量4.8k 收藏 95
点赞数 23
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010201484/article/details/79372660
版权

Vue 学习笔记

学习资料来源：网易云Vue视频：

  • ES6 语法
  • Vue 语法
  • Vue 组件使用
  • Vue 组件间通讯
  • Vue router
  • Vue resource

目录

用 [TOC]来生成目录：

ES6 语法

变量声明 let 需要注意作用域
常量 const

数据类型 set map
- iterable类型 for( let a of set)

操作
- 解构赋值 let [a, b, c] = [1, 2, 3]
- 箭头函数 let sum = (num1, num2) => { return num1 * num2; }
- 延展操作符 ‘…’, function foo(a, b, …rest)

类 class

Vue 语法

文档

1、数据驱动 MVVM 模式

<div id="app"></div> // View
new Vue({       // Vue 实例 ViewModel
    el: "#app",  
    data:{      // Model
       total_count: 0
    }
})

2、生命周期
这里写图片描述

Vue 组件使用

组件使用步骤
1、组件构造器

        let Computer = Vue.extend({
            template: `
            <div>我是 Computer</div>
            `
        });

2、实例化组件

        Vue.component("computer",Computer);

3、使用组件

        <div id="app">
            <computer></computer>
        </div>

组件常用方式

        <div id="app">
            <computer2></computer2>
        </div>
        <template id="My_computer">
            <div> 我是 Computer </div>
        </template>
        <script>
            Vue.component("computer2", {
                template: "#My_computer"
            });
        </script>

Vue 组件间通讯

[组件相关文档]
(https://cn.vuejs.org/v2/guide/components.html)

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。

这里写图片描述

实践代码

<body>
    <div id="app">
    <!-- 信息从父到子 -->
        <child1 first_name="陈" second_name="欢"></child1>
        <child1 first_name="蔡" second_name="喜"></child1>
    <!-- 信息从父到子 end -->
    <!-- 信息从子到父 -->
        <div>
            <my-botton @totalcount="totalCount()"></my-botton>
            <my-botton @totalcount="totalCount()"></my-botton>
            <my-botton @totalcount="totalCount()"></my-botton>
            <my-botton @totalcount="totalCount()"></my-botton>
        </div>
        <div>按钮总共被点击了{{total_count}}次</div>
    </div>
<!-- 信息从子到父 end-->
    <template id='child1'>
        <div>
            <p>{{first_name}}{{second_name}} </p>
        </div>
    </template>

    <template id="my_botton">
        <div>
            <button @click="totalCount()"> 我被点击了{{ counter }}次</button>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        // 组件通讯 从父到子通讯，通过 props 属性：表明可以传入的属性
        Vue.component("child1",{
            template: "#child1",
            props: ["first_name", "second_name"]
        });

        Vue.component("my-botton", {
            template: "#my_botton",
            data(){
                return {
                    counter: 0
                };
            },
            methods:{
                totalCount(){
                    this.counter += 1;
                    this.$emit("totalcount");
                }
            }
        })

        new Vue({
            el: "#app",
            data:{
                total_count: 0
            },
            methods:{
                totalCount(){
                    this.total_count += 1;
                }
            }
        });

    </script>
</body>

Vue router

学习资料文档

直接上例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bs/css/bootstrap.min.css">
    <style>
        body{
            background-color: rgb(231, 231, 231);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="col-8 offset-2">
            <h1>标题</h1>
        </div>
        <div class="row">
            <nav class="col-2 offset-2">
                <router-link class="list-group-item" to="/html5">html5 学院</router-link>
                <router-link class="list-group-item" to="/java">java 学院</router-link>
                <router-link class="list-group-item" to="/python">python 学院</router-link>
            </nav>
            <div class="col-6">
                <router-view></router-view>
            </div>
        </div>
    </div>

    <template id="html5">
        <div>
            <h1>html5 学院</h1>
            <div>
                <router-link to="/html5/basic">基础</router-link>
                <router-link to="/html5/big">高级</router-link>
            </div>
            <div >
                <router-view></router-view>
            </div>
        </div>
    </template>

    <template id="java">
        <div>
            <h1>java 学院</h1>
        </div>
    </template>

    <template id="python">
        <div>
            <h1>python 学院</h1>
        </div>
    </template>

    <template id="basic">
        <div>
            基础
        </div>
    </template>

    <template id="big">
        <div>
            高级
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        // 组件构造器
        // 1. 定义（路由）组件。
        // 可以从其他文件 import 进来
        let Html5 = Vue.extend({
            template: "#html5"
        });

        let Java = Vue.extend({
            template: "#java"
        });

        let Python = Vue.extend({
            template: "#python"
        });

        let Basic = Vue.extend({
            template: "#basic"
        });

        let Big = Vue.extend({
            template: "#big"
        });

        // 路由配置
        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是
        // 通过 Vue.extend() 创建的组件构造器，
        // 或者，只是一个组件配置对象。
        // 我们晚点再讨论嵌套路由
        const routes = [
            {
                path: "/html5",
                component: Html5,
                children:[
                    {path: "basic", component: Basic},
                    {path: "big", component: Big},
                ]},
            { path: "/java", component: Java},
            { path: "/python", component: Python},
        ];

        // 3. 创建 router 实例，然后传 `routes` 配置
        // 你还可以传别的配置参数, 不过先这么简单着吧。
        let router = new VueRouter({
            routes // （缩写）相当于 routes: routes
        });

        // 4. 创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由，
        // 从而让整个应用都有路由功能
        new Vue({
            router
        }).$mount("#app")
    </script>
</body>
</html>

Vue resource

文档

数据请求

Hover_Z_快跑
关注
  • 23
    点赞
  • 踩
  • 95
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue学习
qq_56895799的博客
08-08 755
优点：轻量级框架、简单易学、双向数据绑定、组件化、视图,数据,结构分离、虚拟DOM、运行速度更快。
Vue入门（三）
hanhf的专栏
04-28 369
Vue入门（三）　　这一节我们开始编写自己的程序。　　首先，我们看一下完成程序后的src目录中都有哪些东西：　　除了一些图片外（1张LOGO，3张手机图片、3张平板图片、3张电脑图片），src根目录下仍然有main.js和App.vue，router目录下有一个路由文件router.js，components目录下有几个组件文件，基本上每个链接都是一个组件（一级菜单home、about、user，...
VUE超详细入门
最新发布
zhangpeixuan的博客
07-10 1465
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架！
VUE入门学习
duochirou的博客
03-07 1977
一、vue入门学习前准备 1、安装vue.js插件 当安装插件后无法new一个vue component文件时，需要进行配置 此时就可以new了，如下图 2、学习vue的第一个demo ①、新建一个html，如下图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l...
Vue 入门学习
sugang666的博客
12-10 360
函数 Vue组件 形参 Slot,props 局部变量和局部函数 Data,methods 函数名 Name Retrun template   &lt;template&gt;&lt;/...
Vue入门学习（一）
我要，我要，我还要
06-30 397
Vue实现 Vue实现字符串轮回（类似跑马灯效果）。 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="vue.js" type="text/javascript" charset="utf-...
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且响应式的用户界面。Vue的特点在于其渐进式架构，允许开发者逐步将Vue融入现有的项目中，而不必...
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
vue学习笔记，B站黑马程序员的javaweb
11-05
Vue学习笔记 Vue是一个基于JavaScript的渐进式框架，用于构建用户界面。下面是关于Vue的学习笔记。 一、Vue基本知识 在Vue中，以点vue结尾...本文只是Vue学习笔记的开始，希望能够帮助读者快速入门Vue和ElementUI。
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
【Vue】入门学习
Viga的博客
08-20 398
Vue介绍 Vue.js是一套用于构建用户界面的渐进式框架。 渐进式：用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。 单页应用 是指整个前端应用只有一个web页面，根据路由可以切换到不同的显示页面，在切换的过程中不需要重新加载资源，这样的一个好处就是减少了内存消耗。并且和后台的交互是通过axios或者ajax完成的，不会出现白屏的现象，用户体验更加友好。 数据驱动 无需操作DOM，重点更改数据即可。 支持双向绑定，依赖ES5中一个重要的API，
Vue学习--入门篇
star_zhang_jx的博客
12-16 587
这篇文章的内容可以作为学习Vue之前的前置知识点了解，Vue包含的知识面远不及于此，想要搞前端的小伙伴还是去B站上面看时长长的视频，不要看狂神的，本篇文章就是基于狂神的视频总结的一些知识点，搞后端的小伙伴可以猫一眼，我们了解一下就行，专业的事情还是交给前端来做吧。
Vue学习——入门篇
51061370的博客
07-13 655
Vue.js是一款流行的JavaScript前端框架，是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架
Vue入门学习（上）
Ningqiugu的博客
08-23 796
本篇用作记录自己初次学习Vue的一个过程，尝试用自己的方式总结Vue的常用的用法，此次也是在自己通读了Vue的文档以后，做出的一些总结，对于vue-router，以及vuex不会涉及，当然会提到一些初步使用vue-cli的构建工具。 vue的文档条理也是非常清晰，博主也是用vue文档的划分来先了解简单基础的应用，下面是按照博主自己的理解来划分的几个模块。 vue的生命周期 vue实例的...
Vue.js入门学习（一）
热门推荐
Appleyk的专栏
01-08 1万+
初学，也不知道怎么写，索性就按照官网的API走一遍吧，给自己的Vue学习之路开个头，毕竟后端写久了，总是惦记着前端，前端一搜一大堆，挑选一个来学吧，才发现，我去，这个还是当下最流行的框架，好吧，那就它了！ Vue官方中文Api文档：点击打开链接 由于初学，我也搜了关于Vue.js环境搭建的文章，发现，按照文章所说的走下来，最后出来的项目根本不是我这个初学者所能接受的，什么web
【Vue】基础入门学习
懂得一千零一种,赋予你失败的方法！
03-21 1534
文章目录一、介绍二、安装三、初步使用3.1 声明式渲染1、第一个程序2、响应式编程3、元素绑定4、术语el 挂载点data 数据对象5、疑问3.2 v- 指令1、v-if 条件指令2、v-for 循环指令3、v-on 事件绑定4、v-model 表单输入<=>应用状态3.3 组件化应用构建 一、介绍 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手..
黑马程序员vue学习笔记
09-06
抱歉，我是一个与ChatGPT类似的AI助手，无法提供具体的学习笔记。不过，我可以给你一些建议来学习Vue.js。 1. 官方文档：Vue.js官方文档是最权威的学习资源。你可以从基础概念到高级用法，逐步深入地学习Vue.js。 2...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值