Vue入门

已于 2023-04-08 15:35:36 修改
阅读量61 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js javascript 前端
于 2023-04-06 21:56:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51014498/article/details/130000267
版权

vue入门

前端基础知识

前端基础知识
vue官方网站
Element

介绍

1. Vue.js是什么

Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。

2.初识Vue.js

创建文件夹vue_pro

创建文件夹vuejs, 将vue.min.js引入文件夹

创建hello.html

<body>
    <script src="vue.min.js"></script>
    <div id="app">
        <!-- 插值表达式-->
        {{message}}
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                message:'hello vue'
            }
        })
    </script>
</body>

  这就是声明式渲染: Vue.js的核心是一个采用简洁的模版语法来声明式地将数据渲染进DOM的系统
这里的核心思就是没有繁琐的DOM操作, 例如JQuery中, 我们需要先找到div节点, 获取DOM对象, 
然后进行一系列的节点操作

data: {
message: 'Hello Vue!'
}

3.创建代码片段

文件 => 首选项 => 用户片段 => 新建全局代码片段文件:

在这里插入图片描述

vue-html9.code-snippets
{
	"vue htm": {
		"scope": "html",
		"prefix": "vuehtml",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
			"    <meta charset=\"UTF-8\">",
			"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"    <title>Document</title>",
			"</head>",
			"",
			"<body>",
			"    <div id=\"app\">",
			"",
			"    </div>",
			"    <script src=\"vue.min.js\"></script>",
			"    <script>",
			"        new Vue({",
			"            el: '#app',",
			"            data: {",
			"                $1",
			"            }",
			"        })",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "my vue template in html"
	}
}

基本语法

1.基本数据渲染和指令

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-bind -->
        <div v-bind:style="msg1">单向绑定</div>
         <!-- 简写  -->
        <div :style="msg">单向绑定</div>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'color: green;',
                msg1: 'color: red;'
            }
        })
    </script>
</body>

</html>

  你看到的v-bind特性被称为指令. 指令带有前缀v-
除了使用差值表达式{{}}进行数据渲染, 也可以使用v-bind指令, 它的简写冒号(:) 

<div v-bind:style="msg">单向绑定</div>
<div :style="msg">单向绑定</div>

2.双向数据绑定

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{keyword}}
        <br/>        
        <input type="text" :value="keyword" />
        <br/>
        <input type="text" v-model="keyword" />

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                keyword: '尚硅谷',
            }
        })
    </script>
</body>

</html>

什么是双向数据绑定?
	当数据发生变化的时候, 视图也会跟着发生变化
	数据模型发生了改变, 会直接显示在页面上
	当视图发生变化的时候, 数据也会跟着同步变化
	用户在页面上的修改, 会自动同步到数据模型中去

3.事件

	使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，
事件调用的方法定义在 vue 对象声明的 methods 节点中

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        
        <button v-on:click="show()">事件绑定</button>
        <button @click="show1()">事件绑定1</button>

        <button v-on:click="show">事件绑定2</button>
        <button @click="show1">事件绑定3</button>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                keyword: '尚硅谷',
            },
            methods: {
                show() {
                    console.log("show.....");
                },
                show1() {
                    console.log("show1.....");
                },
            }
            
        })
    </script>
</body>

</html>

4.条件渲染

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="ok" ></input>
        <br/>
        <div v-if="ok">选中了</div>
        <div v-else="ok">没有选中</div>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok: false,
            }
        })
    </script>
</body>

</html>

5.列表渲染

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-for="user in userList"> 
            {{user.name}} -- {{user.age}}
        </div>

        <div v-for="(user, index) in userList"> 
            {{index}} -- {{user.name}} -- {{user.age}}
        </div>

    </div>

    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                    {"name":"lucy", "age":20},
                    {"name":"mary", "age":30}
                ],
            }
        })
    </script>
</body>

</html>

vue生命周期

借鉴Vue的生命周期的详解文章!!!

  Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始.
  Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数

在这里插入图片描述

1.beforeCreate(创建前)

	 这个时候，在实例被完成创建出来，el和data都没有初始化，不能访问data、method，一般在这个阶段不进行操作。

beforeCreate() {
    console.log('----beforeCreate----')
    console.log(this.msg) //undefined
    console.log(this.$el) //undefined
  },

2.created( 创建后 )

      这个时候，vue实例中的data、method已被初始化，属性也被绑定，但是此时还是虚拟dom，
  真是dom还没生成，$el 还不可用。这个时候可以调用data和method的数据及方法，created
  钩子函数是最早可以调用data和method的，故一般在此对数据进行初始化。

created() {
    console.log('----created----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//undefined
  },

3.beforeMount( 挂载前)

  此时模板已经编译完成，但还没有被渲染至页面中（即为虚拟dom加载为真实dom），此时el存在则会显示el。
在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。
当vue实例中，el为挂载目标，未对el进行定义，则this.el显示undefined，但页面中存在template也能识别
挂载目标，因为template可以被看成占位符。如果对其进行定义则显示<div id="app"></div>，故所以，
beforeMount读取不了真实的el，在mounted才能读取到真实的el，因为el只有渲染完成后才会存在。这里讲的el
是真实的el。在真实的el之前存在前，在beforeMount中的其实是页面中的#app，是挂载的目标。

export default {
	name: 'App',
	data() {
		return {
			msg: 'msg',
		}	
	},
}
export default {
	name: 'app',
	data() {
		return {
			msg: 'msg',
		}	
	},

}


 beforeMount() {
    console.log('----beforeMount----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//undefined
  },

4.Mounted( 挂载后)

  此时模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示d
ata中的数据。 这实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建
好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动。

mounted() {
    console.log('----mounted----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//<div id="app"><span model="msg"></span></div>
},

5.创建Vue实例的示例

<template>
  <div id="app">
    <span :model="msg"></span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: 'msg',
    }
  },
  beforeCreate() {
    console.log('----beforeCreate----')
    console.log(this.msg) //msg
    console.log(this.$el) //undefined
  },
  created() {
    console.log('----created----')
    console.log(this.msg)
    console.log(this.$el)
  },
  beforeMount() {
    console.log('----beforeMount----')
    console.log(this.msg)
    console.log(this.$el)
  },
  mounted() {
    console.log('----mounted----')
    console.log(this.msg)
    console.log(this.$el)
  },
}
</script>

6.beforeUpdate

  更新前状态（view层的数据变化前，不是data中的数据改变前），重新渲染之前触发，然后vue的虚拟
dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。只有view上
面的数据变化才会触发beforeUpdate和updated，仅属于data中的数据改变是并不能触发。

 beforeUpdate() {
    console.log('----beforeUpdate----')
    console.log(this.$el)
    console.log(this.msg) //msg
    for (var i = 0; i <= 10000; i++) {
      console.log(1)
    }
},

7.updated

<template>
  <div id="app">
    <div style="height:50px"
         ref="spanRef">{{msg}}</div>
    <button @click="clickBtn"></button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: 'msg',
    }
  },
  methods: {
    clickBtn() {
      this.msg = 'newMsg'
    },
  },
  beforeUpdate() {
    console.log('----beforeUpdate----')
    console.log(this.$refs.$el)
    console.log(this.msg) //msg
  },
  updated() {
    console.log('----updated----')
    console.log(this.$refs.$el)

    console.log(this.msg) //msg
  },
}
</script>

8.beforeDestroy

  销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑
定的事件等等…’)

9.destroyed

销毁后 （Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

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

            created() { // 在页面渲染之前执行的方法
                debugger
                console.log("created....");
            },
            mounted() { // 在页面渲染之后执行的方法
                debugger
                console.log("mounted....");
            },
        })
    </script>
</body>
</html>
余尘雨晨
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue入门知识PPT
03-26
里面包含自己总结的一些vue入门知识，如果有需要的同学们 可以下载并看看，不足之处可以尽情提出来，本人第一次上传资源
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
vue入门vue入门vue入门
05-14
vue入门
vue入门.pdf
10-10
vue从安装到入门, 1,安装环境:node.js(vue开发必须的环境) 2,使用淘宝镜像,(加快速度的) 3,vue的几种安装方法, 4,vue的几大组件 5,vue的基本方法的使用的讲解demo 6,入门
vue3 vue-draggable-next 实现拖拽穿梭框效果
游九尘的博客
06-01 402
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
vue 权限分组
qq_37309987的博客
06-01 331
在进行这部分交互效果实现时，有考虑过使用 current-change 这个事件，因为这个事件可以获取到一个 Node 对象，在 Node 对象中可以获取到当前节点父节点，从而在父节点下找到当前节点及兄弟节点，从而避免了使用递归的方式查找兄弟节点，这个事件有个问题，无法触发 check 事件，导致在点击复选框选中时，事件未触发，所以退而求其次考虑使用 check 事件，配合递归方法实现最终的交互效果。1、选中新增、修改、删除中的任何一个复选框时，查询框也选中。权限组：查询、新增、修改、删除。
vue-标签选择
zw899004的专栏
06-01 725
vue-标签选择
vue 弹出框组件重复打开时，资源重新加载
最新发布
洋葱的博客
06-06 139
2、v-if和:visible.sync同时使用。新增或者编辑内容使用同一个弹出框，如何使数据可以重新加载？1、绑定时间戳，有副作用，屏幕会闪烁一下。
对于vsc中的vue命令 vue.json
F2297468264的博客
05-31 491
打开vsc 然后在左下角有一个设置。将此代码粘贴 （我的不一定都适合）3.输入 vue.json回车。2.点击用户代码片段。
vue 项目报./node_modules/ml-matrix/src/matrix.js
qq_58307541的博客
05-30 478
项目报./node_modules/ml-matrix/src/matrix.js。
前端Vue小兔鲜儿电商项目实战Day05
ltt159264的博客
05-31 1064
ElementPlus表单组件内置了初始的校验配置，应付简单的校验只需要通过配置即可，如果想要定制一些特殊的校验需求，可以使用自定义校验规则，格式如下：校验逻辑：如果勾选了协议框，通过校验，如果没有勾选，不通过校验。
shujugeshi
baidu_38945557的博客
06-06 412
"url": "//数仓元数据/ODS/UNQ_TR_FD_HTSECF_RATING","url": "//数仓元数据/ODS/UNQ_TR_CM_CREDIT_RATE","url": "//数仓元数据/ODS/UNQ_TR_IX_COMP","url": "//数仓元数据/DWD/养老数据中心境内组合收益明细","url": "//数仓元数据/DWD/社保数据中心境内组合收益明细","url": "//数仓元数据/ODS/kettle:数据是否同步",
【手撕面试题】Vue（高频知识点一）
ztK63LrD的博客
05-31 805
每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术 之美。
html+CSS+js部分基础运用15
m0_55709044的博客
06-06 570
设计要求：单击按钮后，余额按照输入框的数额减少，同时将按钮式的提示信息（金额）同步改变。利用侦听属性实现余额发生变化时发出提示信息，同时记录每次支出明细，每笔记录包含支取次数，支取金额、余额等信息。使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互的表达能力。分别通过表单输入获取省份、城市、县、街道等信息，只要其中有一个值发生变化，都需要绑定keyup事件，调用getAddress()方法，触发更新家庭地址。2、银行账户余额变动自动通知项目。银行账户余额变更通知。
【学习笔记】Vue3（Ⅱ）
Eddie_hyh的博客
06-03 468
Vue3（Ⅱ）
ruoyi vue 集成积木报表真实记录
qq_35226176的博客
06-05 351
按官方文档集成即可。
Web前端三大主流框架：Angular、React与Vue.js的深入探讨
读心悦
06-03 434
此外，Angular的依赖注入功能使得组件之间的依赖关系更加清晰，降低了代码的耦合性，提高了代码的可维护性和可测试性。在众多前端框架中，Angular、React和Vue.js以其独特的优势和广泛的应用场景，成为了市场上的三大主流框架。同时，随着前端技术的不断发展，这些框架也在不断更新和优化，开发者应保持对新技术的学习和关注，以便更好地应对未来的挑战和机遇。而Vue.js则适用于各种规模的项目，既可以满足小型项目的快速开发需求，也可以适应大型项目的复杂性和可维护性要求。
Vue 3 中的 toRef 和 toRefs 函数
笔记、经验、日常分享
06-03 428
函数是 Vue 3 中的两个非常有用的函数，它们可以帮助我们更好地管理组件中的响应式数据，并且可以提高组件的性能和用户体验。在使用这两个函数时，我们需要注意的是，它们只能将一个响应式对象的属性转换为引用，而不能将一个普通对象的属性转换为引用。但是，当我们直接在模板中使用这些属性时，会有一个问题：当这些属性的值发生变化时，组件将会重新渲染，即使其他属性的值没有发生变化。函数用于将一个响应式对象的属性转换为引用。函数的应用场景是在组件中使用响应式对象的属性时，尤其是在一个组件中需要使用多个响应式对象的属性时。
vue入门到精通 pdf
11-23
《Vue入门到精通》是一本关于Vue.js前端框架的学习指南。本书分为入门、进阶和精通三个部分，帮助读者从零基础开始学习，并逐步掌握Vue.js的核心概念和应用技巧。 在入门部分，书中首先介绍了Vue.js的基本概念，如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值