Vue学习笔记

最新推荐文章于 2024-09-05 11:00:53 发布
最新推荐文章于 2024-09-05 11:00:53 发布
阅读量1.8k 收藏
点赞数
分类专栏： 前端 文章标签： vue java js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43627076/article/details/112972721
版权

VUE

MVVM的实现者

其中最重要的就是ViewModel VieModel是为了实现数据的双向绑定 目的就是为了解耦

VUE就是ViewModel

v-model

单向绑定样例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<body>
    <div id="app">{{message}}<br>
        <input v-model="message"></div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "yes"
            }
        });
    </script>
</body>

</html>

双向绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<body>
    <div id="app">{{message}}<br>
        <input v-model="message"></div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "yes"
            }
        });
    </script>
</body>

</html>

VUE组件：

可以进行复用

整个页面由组件构成的

自定义组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <my-li v-for="item in items" v-bind:name="item"></my-li>
    </div>
    <script type="text/javascript">
    //建立自定义组件
        Vue.component("my-li", {
            props: ['name'],
            template: "<li>{{name}}</li>"
        });
        
        //将div设置为VUE
         var vm = new Vue({
            el: "#app",
            data: {
                items: ["xiaow", "zhongw", "daw"]
            }
        });
    </script>
</body>

</html>

v-bind: 进行绑定值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">

        <todo>
            <mytitle slot="todo-title"></mytitle>
            <items slot="todo-items"></items>
        </todo>

    </div>
</body>
<script>
    Vue.component("todo", {
        template: "<div>\
            <slot name='todo-title'></slot>\
            <ul>\
                <slot name='todo-items'></slot>\
                </ul>\
            </div>\
"
    });
    Vue.component("mytitle", {
        template: "<h1>待办事项</h1>\
"
    });
    Vue.component("items", {
        template: "<li>待办事项</li>\
"
    });
    var vm = new Vue({
        el: "#app"
    });
</script>

</html>

solt（插槽）类似展位标识，可以在solt位置填充数据

vue计算属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        {{getCurrentTime1()}}:{{getCurrentTime2()}}
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                getCurrentTime1: function() {
                    return Date.now();
                }
            }
            ,computed:{
                getCurrentTime2: function() {
                    return Date.now();
                }
            }
        });
    </script>
</body>

</html>

计算属性：即第一次查询的时候需要通过方法进行获取，随后这个值会存入内存中，在以后调取时在内存中获取，可用于所读取的数据是固定或长时间不会发生改变的

getCurrentTime1就是普通方法

getCurrentTime2就是计算属性

内容分发

Vue.component("todo", {
        template: "<div>\
            <slot name='todo-title'></slot>\
            <ul>\
                <slot name='todo-items'></slot>\
                </ul>\
            </div>\
"
    });

利用slot作为插槽，在使用时对内部的信息进行填充。

<mytitle slot="todo-title" v-bind:title="title"></mytitle>

利用v-bind：进行数据的绑定

多个组件对应一个相同的slot，这些组件在该slot中依次排放。

自定义事件

 <items slot="todo-items" v-for="(name,index) in names" v-bind:name="name" v-bind:index="index" v-on:remove="removeitem(index)"></items>

  remove: function(index) {
                this.$emit("remove", index);
            }

组件的$emit（“remove”,index）可以调用外面的方法，从而实现对外部数据的修改,这里的remove对应的v-on:remove的remove，index传递的参数

v-on:后面拼接的是remove，这个名字在后面

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">

        <todo>
            <mytitle slot="todo-title" v-bind:title="title"></mytitle>
            <items slot="todo-items" v-for="(name,index) in names" v-bind:name="name" v-bind:index="index" v-on:remove="removeitem(index)"></items>
        </todo>

    </div>
</body>
<script>
    Vue.component("todo", {
        template: "<div>\
            <slot name='todo-title'></slot>\
            <ul>\
                <slot name='todo-items'></slot>\
                </ul>\
            </div>\
"
    });
    Vue.component("mytitle", {
        props: ['title'],
        template: "<h1>{{title}}</h1>\
"
    });
    Vue.component("items", {
        props: ["name", "index"],
        template: "<li>{{index}}.{{name}}<button @click='remove(index)'>删除</button></li>\
",
        methods: {
            remove: function(index) {
                this.$emit("remove", index);
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: "大标题",
            names: ["喜羊羊", "美羊羊", "沸羊羊"]
        },
        methods: {
            removeitem: function(index) {
                this.names.splice(index, 1); //将index开始后的1个删除掉
            }
        }
    });
</script>

</html>

创建Vue项目

vue init webpack name 创建项目 所有的安装皆选择n

手动进行安装 npm install --register=https://register.npm.taobao.org

npm run dev 运行项目

VueRouter

从一个组件跳到一个组件—路由

安装vue-route插件

npm install vue-router --save-dev --register=https://register.npm.taobao.org

小王不头秃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
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_43971312的博客
05-22 2237
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
vue学习笔记
weixin_42765975的博客
09-21 961
/1.想要vue工作必须new一个vue对象出来，容器依旧符合html模板规范，只是加入了一些vue的语法例如双括号{{}},//5.{{}}是插值语法，使用在标签体内容读取插值，标签属性值得用指令语法v-bind:表示会把属性的值当做js语句来执行。5.{{}}是插值语法，使用在标签体内容读取插值，标签属性值得用指令语法v-bind:表示会把属性的值当做js语句来执行。//7.指令语法包括v-bind:,v-if:等等，他可以用于解析标签体内容，标签属性，标签事件等。
VUE学习笔记
weixin_51660483的博客
05-30 1683
什么是VUE？vue是一个用于构建用户界面的渐进式框架vue是一个基于数据渲染出用户能够看到的页面渐进式框架。
Vue学习笔记总结
个人学习博客，不足之处，还望不吝赐教！
10-21 748
vue、vue学习教程、vue教程、vue3
vue学习笔记（超详细）
热门推荐
fmk1023的博客
12-18 4万+
文章目录一. Vue基础认识Vue.jsVue安装方式Vue的MVVM二. Vue基础语法生命周期模板语法创建Vue, options可以放什么语法综合v-onv-for遍历数组v-model表单绑定v-model结合radio类型使用v-model结合checkbox类型使用v-model结合select类型使用值绑定修饰符检测数组更新计算属性 computed计算属性setter和gettercomputed / methods区别fulters过滤器三. 组件化开发组件的基本介绍注册组件的基本步骤全局
Vue学习笔记(黑马前端)
JayChouyyds589的博客
10-02 3802
黑马前端Vue学习笔记(未学完)
vue学习笔记（vue核心知识）
maohe的博客
01-22 2339
记录Vue学习过程笔记和知识点（更新中）。
Vue学习笔记04
weixin_52521356的博客
05-06 599
Vue学习笔记04 什么是vue-cli ​ vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板； ​ 主要功能： 统一的目录结构 本地调试 热部署 单元测试 集成打包上线 需要的环境 Node.js：Download | Node.js (nodejs.org) 检查node.js是否安装完成 node -v npm-v npm install -g安装镜像 这里的安装教程直接贴一个视频的链接吧。 [vue脚手架安装] npm run dev 运行第一个自己的vue项目
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
JAVA基础：数据类型、命名规范
weixin_53755148的博客
09-05 976
变量类型就是用来指定变量中存储数据的类型。也称为数据类型。
浅析synchronized锁升级的原理与实现 1
水w的博客
09-01 1235
浅析synchronized锁升级的原理与实现
计算机毕业设计选题推荐-任务管理系统-项目任务分配系统-Java/Python项目实战
IT研究室的博客
09-03 787
随着信息化技术的迅猛发展，各类企业和组织越来越依赖于高效的任务管理系统以保证其日常运营的顺利进行。根据IDC（国际数据公司）发布的报告显示，全球企业在数字化转型上的投入已达数千亿美元，其中相当一部分资金用于提升企业内部的管理效率。任务管理系统作为企业信息化的重要组成部分，能有效帮助企业分配、监控和反馈任务，从而提高工作效率。然而，尽管市场上已有多种任务管理系统，它们在功能、用户体验和适用性上存在显著差异。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
最新发布
央顺科技官方博客
09-05 382
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
Address localhost:1099 is already in use：tomcat频繁重启端口占用问题
qq_63535554的博客
09-05 363
​短时间内频繁运行tomcat服务器​，端口占用问题。
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小王不头秃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值