![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
vue基础以及项目
~往无前
这个作者很懒,什么都没留下…
展开
-
Vue源码学习(六)- 实例方法
深入理解以下实例方法的实现原理。原创 2022-11-30 11:29:48 · 784 阅读 · 1 评论 -
vue源码学习(2)- Vue初始化过程
Vue的初始化过程(new Vue(options))都做了什么?处理组件配置项初始化根组件时进行了选项合并操作,将全局配置合并到根组件的局部配置上(也就是将Vue构造函数原型上添加的配置项合并到vm实例化对象的身上)初始化每个子组件时做了一些性能优化,将组件配置对象上的一些深层次属性放到vm.$options选项中,以提高代码的执行效率初始化组件实例的关系属性,比如$parent,$children,$root,$refs等处理自定义事件调用beforeCreate钩子函数。原创 2022-11-12 15:21:17 · 353 阅读 · 0 评论 -
vue生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程,例如设置数据监听,编译模板,将实例挂载到DOM并在数据变化是更新DOM同时在这个过程中会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己代码的机会。下面是周期函数不同阶段的介绍:<body> <div id="app"> {{msg}} </div><script>var vm=new Vue({ el:'#app', data:{原创 2021-03-06 16:55:10 · 124 阅读 · 0 评论 -
组件的动态切换及父子组件之间的通信
1.动态的切换组件我们常常通过例如<com/>单标签的方式显示,这种方式组件是静态的。实现动态组件的方式:使用标签<component :is=‘Com’>的方式。例如:我们可以通过事件触发的方式来实现组件的切换。<template> <div class="home"> //通过事件触发的方式来动态的改变组件 <button @click.prevent="change(1)">comName1</button>原创 2021-03-06 15:37:51 · 304 阅读 · 0 评论 -
vue指令之v-on事件绑定指令
可以用v-on指令监听DOM事件,便在触发时运行一些javaScript代码。//v-on指令可以简写为@ <div id="example1"> <button v-on:click='counter+=1'>数值:{{counter}}</button>//在实际中,js代码多是放在外面的 所以js函数通常放在Vue对象的methods中 而且可以通过传参执行函数 <button v-on:click="greet('abc')">Gree原创 2021-03-06 11:58:58 · 1376 阅读 · 0 评论 -
vue指令之v-model:表单输入双向数据绑定
1.基础用法:可以使用v-model指令在表单中、、以及等表单元素上创建双向数据绑定。2.v-model会忽略掉所有表单元素的value.checked,selected特性的初始值,将vue市里的数据作为数据来源。文本框<!-- 实现一个双向绑定 --> <input v-model="message" placeholder='edit me'> <p>{{message}}</p> <textarea v-mod原创 2021-03-06 11:44:22 · 999 阅读 · 0 评论 -
vue指令之v-bind、v-on、v-once、v-html、v-text
v-bind绑定class、style除了数据的动态实现,我们知道渲染的时候样式是必不可少的,接下来介绍vue中如何动态的使用v-bind绑定元素类名class,style来动态的给dom节点添加和修改删除样式。v-bind绑定class//v-bind:class 可以简写为:class//类名需要添加单引号,变量不用# class类名是一个对象的情况 //上面的语法表示active这个class存在与否将取决于数据属性isActive是否为true。green同理。 //此外,v-bind原创 2021-03-06 11:18:36 · 284 阅读 · 0 评论 -
vue指令之条件渲染、列表渲染
条件渲染在原生的javaScript中我们通过给元素动态的添加display:block,opacity:0或1 ,样式的方式来动态的显示和隐藏元素。在vue中可以给元素添加属性v-if v-else-if v-else v-show条件判断的方法来动态的改变元素的显示和隐藏。<body><div id="app"> <div v-if="type=='A'">A</div> <div v-else-if="type=='B'原创 2021-03-06 10:51:42 · 255 阅读 · 0 评论 -
vue中的methods,filter,computed,watch
methods,filter,computed,watch都是vue中特有的针对数据进行不同方面处理的属性。methods 方法vue的中的methods属性是函数的容器methods:{ //可以放置多个函数,函数与函数之间使用逗号隔开 handle:function(){}, //常见的还有下面的这种写法 handle(){} }filter 过滤器vue中常用过滤器对一些数据进行格式化操作.下面这个是定义在局部的自定义过滤器。<body> <div原创 2021-03-06 10:27:32 · 450 阅读 · 0 评论 -
Vue的声明式渲染,以及数据与方法
Vue的声明式渲染<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> //导入vuejs库 <script src="./vue.js"> charset="utf-8"</script>原创 2021-03-06 09:37:11 · 356 阅读 · 0 评论 -
基于vue框架的音乐播放器
学了一段时间的vue前端框架,简单的写了一个音乐播放器的,整体界面模仿了网易云音乐的界面,整体上效果还可以。点解获取项目完整代码 话不多说,效果呈上。原创 2021-03-01 15:50:48 · 884 阅读 · 3 评论