Vue总结

最新推荐文章于 2023-06-24 12:42:57 发布
最新推荐文章于 2023-06-24 12:42:57 发布
阅读量302 收藏 1
点赞数 2
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45419127/article/details/114181130
版权
本文详述了Vue.js的基础知识和高级特性，包括Vue的Hello World、TodoList、MVVM模式、组件系统以及数据绑定、条件渲染、列表循环等核心概念。深入探讨了组件间的通信、Vue实例的生命周期、样式绑定以及自定义动画。此外，还介绍了Vue的路由、单文件组件以及多页应用和单页应用的概念。
摘要由CSDN通过智能技术生成

Vue之Hello word

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实现Hello Word</title>
</head>

<body>
    <div id="app">
        {
  {msg}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Word'
            }
        })
        //两秒之后  更换内容
    setTimeout(() => {
        vm.$data.msg = 'Hello Vue'
    }, 2000)
</script>

</html>

在这里插入图片描述

Vue之TodoList

v-model:双向数据绑定

v-for:循环

  • item:循环的每一项
  • index:索引
  • list:循环的数据

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实现TodoList</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model='inputValue'>
        <button @click='handleClick'>提交</button>
        <ul>
            <li v-for='item in list'>{
  {item}}</li>
        </ul>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            inputValue: '',
            list: [],
        },
        methods: {
            handleClick: function() {
                this.list.push(this.inputValue)
            }
        }
    })
</script>

</html>

在这里插入图片描述

MVP

  • M:数据层
  • V:视图层
  • P:逻辑层
    在这里插入图片描述

MVVM

  • M:数据层
  • V:视图层
  • VM:逻辑层
    在这里插入图片描述

组件

组件：网站区域的某一部分。

全局组件实现todolist

全局组件：Vue.component()

  • v-for:循环指令
  • v-bind:属性绑定

父子组件传值的方式

  • 父组件通过v-bind将属性传值给子组件
  • 子组件通过props接收父组件传过来的属性值
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TodoList</title>
</head>
<body>
    <div id="app">
<!-- v-model:双向数据绑定       -->
        <input type="text" v-model="inputValue">
<!-- v-on:事件绑定 简写为@-->
        <button @click="handle">提交</button>
        <ul>
<!-- v-for:循环  item:循环项  list：循环的数据-->
         <todo-list v-for="item in list" v-bind:content="item"></todo-list>
        </ul>
    </div>
</body>
<script src="vue.js"></script>
<script>
//注册全局组件
Vue.component('TodoList',{
    props:['content'],
    template: '<li>{
  {content}}</li>'
})
    let vm = new Vue({
        //el：挂载的元素位置
        el:"#app",
        //data定义数据
        data:{
            inputValue: '',
            list:[]
        },
        //methods:定义方法
        methods: {
            handle: function () {
                //点击提交按钮时，将表单的内容添加到数组里面
                this.list.push(this.inputValue);
                //表单的内容重置为空
                this.inputValue=''
            }


        }

    })

</script>
</html>

在这里插入图片描述

局部组件实现todolist

局部组件：let TodoList ={} 组件需要注册在实例中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TodoList</title>
</head>
<body>
    <div id="app">
<!-- v-model:双向数据绑定       -->
        <input type="text" v-model="inputValue">
<!-- v-on:事件绑定 简写为@-->
        <button @click="handle">提交</button>
        <ul>
<!-- v-for:循环  item:循环项  list：循环的数据-->
            <todo-list v-bind:content="item" v-for="item in list"></todo-list>
        </ul>
    </div>
</body>
<script src="vue.js"></script>
<script>

let TodoList = {
    props:['content'],
    template:"<li>{
  {content}}</li>"
}

    let vm = new Vue({
        //el：挂载的元素位置
        el:"#app",
        //注册局部组件
        components:{
            TodoList:TodoList
        },
        //data定义数据
        data:{
            inputValue: '',
            list:[]
        },
        //methods:定义方法
        methods: {
            handle: function () {
                //点击提交按钮时，将表单的内容添加到数组里面
                this.list.push(this.inputValue);
                //表单的内容重置为空
                this.inputValue=''
            }


        }

    })

</script>
</html>

在这里插入图片描述

组件之间的传值

子组件向父组件传值，使用this.$emit(event),父组件正好监听子组件传过来的事件。

父组件向子组件传值使用v-bind绑定属性，并用props接收值

组件之间的传值之todolist

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TodoList</title>
</head>
<body>
<div id="app">
    <!-- v-model:双向数据绑定       -->
    <input type="text" v-model="inputValue">
    <!-- v-on:事件绑定 简写为@-->
    <button @click="handle">提交</button>
    <ul>
        <!-- v-for:循环  item:循环项  list：循环的数据-->
        <todo-list v-bind:index="index" v-bind:content="item" v-for="(item,index) in list" @delete="handleBthClick"></todo-list>
    </ul>
</div>
</body>
<script src="vue.js"></script>
<script>

    let TodoList = {
        props:['content','index'],
        template:"<li @click='handleClick'>{
  {content}}</li>",
        methods: {
          handleClick: function (){
                //子组件向负组件传值需要使用this.$emit()
                this.$emit('delete',this.index)
            }
        }
    }

    let vm = new Vue({
        //el：挂载的元素位置
        el:"#app",
        //注册局部组件
        components:{
            TodoList:TodoList
        },
        //data定义数据
        data:{
            inputValue: '',
            list:[]
        },
        //methods:定义方法
        methods: {
            handle: function () {
                //点击提交按钮时，将表单的内容添加到数组里面
                this.list.push(this.inputValue);
                //表单的内容重置为空
                this.inputValue=''
            },
            handleBthClick:function (index){
               // 删除当前的数组成员索引，只删除一项
               this.list.splice(index,1)
            }


        }

    })

</script>
</htm

在这里插入图片描述

Vue实例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例</title>
</head>
<body>
    <div id="app">
       <div @click="handleClick">
           {
  {msg}}
       </div>
        <item></item>
    </div>
</body>
<script src="vue.js"></script>


<script>
    //创建一个Vue全局组件
    Vue.component('item',{
        template:'<div>hello item</div>'
    })
    let vm = new Vue({
        el:"#app",
        //data：定义数据
        data:{
            msg:'hello word'
        },
        methods:{
            handleClick:function (){
                alert('hello word')
            }
        }
    })
</script>
</html>

在这里插入图片描述

Vue的生命周期

Vue的生命周期也就是Vue实例在某一个时间点自动执行的函数

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue生命周期函数</title>
</head>

<body>
    <div id="app">
        <div>{
  {msg}}</div>
    </div>
</body>
<script src='./vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',

        data: {
            el: '#app',
            msg: 'hello Vue'
        },
        //当Vue实例被初始化 ，自动执行下面的两个钩子函数
        beforeCreate: function() {
            console.log('beforeCreate');
        },
        created: function() {
            console.log('created');
        },
        //当Vue实例被挂载的时候，自动执行下面两个的构造函数
        beforeMount: function() {
            console.log('beforeMount');
        },
        mounted: function() {
            console.log('mounted');
        },
        //当Vue实例被更新的时候 ，自动执行下面的构造函数
        beforeUpdate: function() {
            console.log('beforeUpdate');
        },
        updated: function() {
            console.log('update');
        },
        //当Vue实例被销毁的时候，自动执行下面的构造函数
        beforeDestroy: function() {
            console.log('beforeDestroy');
        },
        destroyed: function() {
            console.log('destroyed');

        },



    })
</script>

</html>

在这里插入图片描述

Vue中的模板语法

模板语法

  • { {}}：插值表达式
  • v-html:更新html的值
  • v-text:更新文本的值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的条件表达式</title>
</head>

<body>
    <div id="app">
        <div>{
  {msg}}</div>
最低0.47元/天 解锁文章
「已注销」
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue总结.xmind
03-22
vue思维导图，主要涉及1、MVVM思想 2、vue常见指令 3、Vue生命周期的介绍 4、组件间通信 5、路由的使用 vue-router 6、vue发送 ajax请求 7、计算属性,方法与侦听器 8、组件间绑定原生事件 9、vue常见插件 ...
vue单机事件和双击事件冲突解决办法
weixin_51747462的博客
05-12 2355
vue单机事件和双击事件冲突解决办法 @click与@dblclick冲突解决办法
Vue项目中浏览器终端警告[Violation] ‘click‘ handler took 1137ms
热门推荐
大牛的博客
08-18 1万+
出现这种问题怎么办呢? 1.首先理解报错的意思 2.找到出错的位置 3根据警告提示来找错 解决 这个警告说的是单击处理程序耗时太长了 然后去找报错的位置,一般在后面都会跟着位置在哪一行,但是我很幸运的没有,这就很难受,只能自己找,既然是单击事件,那肯定是在我做了单击之后报的错,看了一下代码如下 <el-button size="small" type="primary" @click="submitForm">确定</el-button> submit...
‘click‘ handler took 3858s如何解决
weixin_45819142的博客
07-24 3408
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
c调用按钮点击事件_vue-事件处理
weixin_39628271的博客
11-21 430
1.监听事件 v-on用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。实例1.点击按钮控制台输出<template> <div> <button v-on:click="clickHandler">按钮</button> </div> </template> <scr...
vue模板语法以及简单应用---按钮切换
weixin_51345632的博客
08-29 1124
介绍： vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有 Vue的模板都是合法的 HTML，所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接编写渲染函数及render，使用可选的 JSX 语法（react采用的就是js
vue总结资源文档.md
06-02
总结的vue详细文档，哪个点记不清或者不知道怎么使用的时候就翻出来看看，很清晰，还配有相应的案例。看一遍就能进行使用
vue基本内容总结学习
07-01
### Vue.js 基本内容总结学习 #### 一、组件之间的通信 ##### 1.1 父子组件之间的通信 在 Vue.js 中，父子组件间的通信是最常见的模式之一。这种通信通常遵循单向数据流的原则，即数据从父组件流向子组件。 **父...
Vue框架总结.pdf
04-03
Vue.js 是一款流行的前端JavaScript框架，它以声明式的数据绑定和组件化开发为特点，极大地提高了Web应用的构建效率。Vue CLI是Vue.js官方提供的一个命令行工具，用于快速搭建和管理Vue项目，简化开发流程。 Vue ...
laravel 中如何使用ajax和vue总结
12-30
最近写一个项目是基于laravel框架的，这个框架传言是为...但是熟悉Vue渲染的同学知道Vue的格式是： {{ message }} 这样就引起了冲突，因此，可以是 @{{msg}} 使用@跳出blade引擎模式。 以下代码摘自是laravel-c
一起学Vue之入门篇
绳锯木断，水滴石穿，专心写文，无问西东！！！
08-15 696
概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 Vue的特点 易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！ 灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。 高效：a. 20kB min+gzip 运行大小 b.超快虚拟 DOM c.最省心的优化 Vu...
Vue 事件处理详解：从基础到实战
weixin_43749805的博客
06-14 1205
在 Vue.js 中，事件处理是构建交互式用户界面的重要组成部分。Vue 提供了丰富的事件处理机制，使我们能够轻松地响应用户的操作并执行相应的逻辑。Vue 提供了一系列的事件修饰符，用于控制事件的触发方式或对事件进行过滤。Vue中，修饰符可以用于改变事件的默认行为或添加额外的功能。在开发中，需要将额外的参数传递给事件处理函数。，将额外的参数传递给事件处理函数，并在函数中使用。绑定了一个点击事件，并将事件处理函数。修饰符来监听键盘的回车键事件，并使用。修饰符可以阻止事件的默认行为。形式，可以响应各种事件。
报错：‘click‘ handler took 的一个坑
weixin_40484653的博客
03-31 9390
报错：‘click‘ handler took 的一个坑 网上一搜，都是说JS阻塞。怎么搞？ 开始以为JS重复引入或者调用引发的。跟我写的点击事件冲突了 结果 <a href="" id="clickto"> $("#clickto").on("click",function(){ //do something }) 因为点击事件是在a标签自带了href参数导致冲突 删掉href参数就好了 emmm下课 ...
vue 动态生成按钮，@click 绑定方法名称，handler.apply is not a function
新青年1号
08-21 7852
需求来源于一个管理系统的权限管控模块。 需求描述：进入页面，触发方法，从服务端获取当前用户在当前页面下的操作权限，生成对应的操作按钮。 正常情况，接到这种需求，都会想到使用子组件获取操作权限，v-for 遍历生成按钮，父组件调用，如下： 子组件 mybutton.vue <template> <div> <el-button v-for="item in buttonlist" :key="item.id" @click="item.methodName"&.
Vue:多个click事件；Vue:向组件传递多个@click
huangfuyk.的博客
04-20 4536
在做项目的过程中，我们会遇到多个点击事件同时执行的情况，本文将为大家介绍三种方法。 第一种就是一个事件里执行多个方法 // 触发点击 @click = 'clickhandler' // 点击事件 clickhandler() { this.function1(); this.function2(); } 第二种就是多个事件里执行多个方法 // 触发点击 @click = 'clickMethods1(); clickMethods2()' // 点击事件 clickMethods.
vue事件传递多个参数
Suk__的博客
05-11 3217
组件上:@click="clickHandler($event,myParam)" 方法:clickHandler($event,myParam) // 事件对象放第一个,自定义参数往后按顺序放 当然方法里事件对象接收时的形参名可以取别的,比如clickHandler(e,myParam) 扩展: 如果单独只接收自定义参数: 组件上:@click="clickHandler(myParam)" 方法:clickHandler(myParam) 如果单独只接收事件对象: 组件上:@cl..
Vue学习笔记
最新发布
weixin_52340910的博客
06-24 167
的策略，如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。npm 设置淘宝镜像加速：npm cpnfig set registry http://registry.npm.tao.org。安装element-ui组件npm i element-ui -S。vue-cli安装：npm install -g@vue/cli。当Vue正在使用v-for渲染元素列表时，它默认使用。创建vue vue create vue。
Vue中，当组件同时注册单机事件（@click）和双击事件（@dblclick）时，处理事件冲突
郭宝的博客
06-05 3869
背景： 示例代码： 事件冲突演示： 如上示例，在单机按钮时，会触发单机事件处理函数，在双击按钮时，会触发2次单机事件处理函数和1次双击事件处理函数
ps-------有关 IInputClickHandler 接口详解和使用详解
qq_32971831的博客
12-06 346
顶顶
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值