
vue3.0
文章平均质量分 60
vue
南初️
这个作者很懒,什么都没留下…
展开
-
vue3.0--自定义事件
一、定义自定义事件可以通过 emits 选项在组件上定义已发出的事件。Home.vue<div id="Home"> Home <!-- 给子组件添加自定义事件 --> <v-A title="A子组件" v-model:val="info" data-index="2" @myevent="myEvent"></v-A> {{msg}}</div>export default{ name:"Ho原创 2021-04-28 11:24:04 · 4102 阅读 · 3 评论 -
vue3.0--props传值
props传值一、props类型二、传递静态或动态的 Prop三、单向数据流四、Prop 验证一、props类型以字符串数组形式列出的 propprops: ['title', 'likes', 'isPublished', 'commentIds', 'author']如果希望每个 prop 都有指定的值类型。可以以对象形式列出 prop,这些 property 的名称和值分别是 prop 各自的名称和类型:props: { title: String, likes: N.原创 2021-04-27 20:03:15 · 7284 阅读 · 3 评论 -
vue3.0--组件模块系统
组件模块系统一、使用组件模块系统的步骤二、组件模块系统的同步加载三、组件模块系统的异步加载一、使用组件模块系统的步骤1.引入组件2.把引入的所有组件全部暴露出去3.按需引入文件二、组件模块系统的同步加载**common.js**import {defineAsyncComponent} from 'vue'let A=defineAsyncComponent(()=>import("../components/comA"));let B=defineAsyncC.原创 2021-04-27 19:42:30 · 386 阅读 · 0 评论 -
vue3.0---setup属性
vue3.0的新属性setup一个组件选项,在创建组件之前执行,一旦props被解析,并作为组合式API的入口点。参数:{Data}props{SetupContent}contextprops参数是获取当前组件的props集合的setContent是获取组件上的相关参数,this.$emit是获取当前组件的事件通信对象,this.slots是获取插槽setup内部声明变量或者函数,方法需要返回setup.vue<div id="setup"> setup.原创 2021-04-27 00:06:57 · 1303 阅读 · 0 评论 -
vue2.x--组件的生命周期
vue2.x--组件的生命周期vue2.x---组件的生命周期什么是虚拟dom,什么是真实dom?vue2.x—组件的生命周期1.创建vue实例:两个生命周期,分别是创建实例之前、创建实例之后2.组件的初始化,开始建立虚拟dom,编译事件等等3.挂载组件:两个生命周期,分别是页面挂载之前、页面挂载之后。4.数据更新:两个生命周期,分别是数据更新之前、数据更新之后。5.组件是否销毁:两个生命周期,分别是组件销毁之前、组件销毁之后。什么是虚拟dom,什么是真实dom?真实d.原创 2021-04-27 00:04:10 · 482 阅读 · 0 评论 -
vue3.0--组件的常用属性
一、组件的常规方法1.data—数据区域类型:Function,返回组件实例的 data 对象的函数。存放数据区域2.props类型:Array | Objectprops 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高阶选项,如类型检测、自定义验证和设置默认值。type:可以是下列原生构造函数中的一种:String、Number、Boolean、Array、Object、Date、Function、Symbol、.原创 2021-04-27 00:02:46 · 964 阅读 · 1 评论 -
vue3.0---组件的挂载
vue的开发模式是MVVM开发模式,主要使用的是单组件开发(组件模块进行开发)一、单组件创建文件后缀.vue分为三个结构:template script style二、组件的注册1.局部注册在当前组件内部使用component属性直接声明挂载。...原创 2021-04-25 18:53:58 · 4802 阅读 · 4 评论 -
vue3.0出现“***“is defined but never used no-unused-vars的解决办法
目录错误如下错误原因解决方案方案1方案2错误如下错误原因项目安装了eslint规范,ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误解决方案方案1在package.json文件内加入如下代码:然后保存重启项目。"rules": { "generator-star-spacing": "off", "no-tabs":"off", "no-unused-v.原创 2021-04-24 16:34:15 · 6177 阅读 · 1 评论 -
vue3.0--表单输入绑定
vue3.0--表单输入绑定一、文本框绑值(Text)使用v-model <input placeholder="请输入..." v-model="message"> <p>message is:{{message}}</p> data() { return { message:'' } }二、多行文本 (textarea)在文本区域插值不起作用,应.原创 2021-04-19 23:20:19 · 1789 阅读 · 2 评论 -
vue3.0---事件处理
vue3.0---事件处理一、元素的事件绑定二、事件修饰符三、键盘修饰符四、系统修饰符1. .exact 修饰符2.鼠标按键修饰符五、事件的执行参数一、元素的事件绑定v-on:type=" " 简写@type=" "组件上method属性上写事件的方法。 <!-- 元素的事件绑定 --> <button v-on:click="handle">事件</button> <!-- 简写 --> <butto.原创 2021-04-15 17:22:38 · 2726 阅读 · 0 评论 -
vue3.0基础语法
vue的开发模式是单组件模式开发,全部是小的组件 ***.vue组件的写法格式< template>< /template>< script>< /script>< style>< /style>一、vue的指令1.数据绑定指令vue的组件上如何声明变量,在js模块内部声明每个组件都存在data属性每个组件都有当前指针对象(也就是this问题)指令绑定格式v-bind属性绑定数据的格式v-原创 2021-04-15 16:40:53 · 627 阅读 · 0 评论 -
MVC、MVP、MVVM三种设计模式
MVC、MVP、MVVM三种设计模式一、MVC设计模式二、MVP设计模式三、MVVM设计模式一、MVC设计模式MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。层结构说明Model(模型)应用程序中用于处理应用程序数据逻辑的.原创 2021-04-13 16:50:21 · 1641 阅读 · 1 评论 -
vue数据双向绑定原理和实现
一、原理:1.vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;2.核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法;3.介绍一下Object.defineProperty()方法(1)Object.defineProperty(obj, prop, descriptor) ,这个语法内有三个参数,分别为 obj (要定义其上属性的对象) prop (要定义或原创 2021-04-12 16:53:48 · 1874 阅读 · 1 评论 -
vue2.x运行时出现‘cross-env‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件等一系列错误的解决办法
目录问题描述问题原因解决思路具体操作流程问题描述vue2.x在运行时出现如下错误。问题原因因为之前安装依赖的时候,有些依赖不是 -g安装的,这样的话依赖就存在于当前的文件夹当你换文件夹的时候,这些依赖就用不了了-g的话是全局安装,这样不管文件夹在哪都可以用到解决思路首先安装时候需要-g,因为webpack-dev-server是全局的。说一下“cross-env NODE_ENV=demo webpack-dev-server --open --con.原创 2021-04-08 16:35:36 · 1164 阅读 · 0 评论 -
vue3.0出现npm ERR! code ENOENT等一系列操作的解决办法
目录问题描述主要原因解决办法问题解决问题描述运行的时候会出现“npm ERR! Code ENOENT等”一系列的错误,主要原因使用vue-cli脚手架新建文件的时候,其实是在原先的文件夹下新建了个子文件夹解决办法关掉现在打开的文件夹,打开现在路径下的子文件夹即可报错的截图问题解决...原创 2021-04-07 20:11:46 · 2813 阅读 · 0 评论 -
vue3.0自己添加一个vue.config.js配置文件
vue3.0自己添加一个vue.config.js配置文件一、执行配置文件二、发布配置文件注意:vue-cli.3.3版本后后将baseUrl废除了,使用publicPath代替了,要将baseUrl换为publicPath。//vue3.0自己添加一个vue.config.js配置文件module.exports = { // 项目部署的基础路径 publicPath: './', // 将构建好的文件输出到哪里(或者说将编译的文件) outputDir: 'di.原创 2021-04-07 20:11:22 · 1516 阅读 · 0 评论 -
vue3.0出现无法加载文件 C:\Users\zjm\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本的解决办法
一、以管理员身份运行PowerShell搜索PowerShell,右键点击以管理员身份运行。进入命令界面。二、执行:set-ExecutionPolicy RemoteSigned三、输入Y问题解决。原创 2021-04-07 20:10:23 · 839 阅读 · 0 评论 -
vue3.0的安装以及vue的基本命令
一、下载vue可以去官网下载,也可以点击下面链接下载。链接:https://pan.baidu.com/s/1hY_LPPnsHE3I_yQ_Jv7LmA提取码:ahk8二、node安装检测node--------node -v检测npm---------npm -v安装淘宝镜像—npm i -g cnpm --registry=https://registry.npm.taobao.org检测cnpm--------cnpm -v三、安装vue-cli 环境支持安装最新版本的cnpm—原创 2021-04-07 20:10:07 · 2810 阅读 · 0 评论