1.普通插值表达式插入数据 <body> <div id="app"> <div>{{text1}}</div> <div>{{text2}}</div> </div> </body> <script> new Vue({ el:"#app", data:{ text1:"插入值一", text2:&qu
引起数据闪烁的原因:界面加载的时候会把节点直接挂载到文档树中,导致{{msg+"666"}}这个字符串会显示一下,vue对象生成data数据时候 回去刷新界面把{{msg+"666"}}字符串替换成结果字符串,导致界面第一次加载的时候会闪屏。 解决方案:使用v-html,v-text指令操作,或者css中加[v-cloak] {
什么是vue⽣命周期?vue⽣命周期都有哪些钩⼦函数?这些钩⼦函数如何触发? 项⽬开发过程中,在⽣命周期⾥⾯都分别做过什么功能? ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么? 所谓的vue⽣命周期就是vue实例从创建到销毁的整个过程我们称之为vue的 ⽣命周期,通过vue的⽣命周
created() { // 添加快捷键 document.addEventListener('keyup', this.handleKeyUp) }, destroyed() { // 删除快捷键 document.removeEventListener('keyup', this.handleKeyUp) }, methods: { // 添加快捷键的事件处理 handleKeyUp(e) {
vue3基础入门 官方网站:https://v3.vuejs.org/ 中文文档: https://staging-cn.vuejs.org/guide/introduction.html 1、简介 1.1、vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽
vue 添加监听事件addEventListener // vue 添加监听事件,addEventListener第二个参数要绑在this上,即需要在methods中声明,否则销毁的时候会报错 // 在mounted中监听,在beforeDestroy中销毁,绑定的事件在methods中声明 mounted() { // 监听 window.addEventListener('resize',
安装 yum install nginx 配置nginx 设置开机启动 systemctl enable nginx 启动服务 systemctl start nginx 停止服务 systemctl stop nginx 重启服务 systemctl restart nginx 修改配置后热重载 systemctl reload nginx nginx常用目录 路径 説明 /
vue 使用 vue-wechat-title 动态设置 title // 1.安装 vue-wechat-title yarn add vue-wechat-title // 2.在main.js import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) // 3.App.vue使用 <router-view v-wechat-title="$route.me
实现效果:通过点击选中的按钮控制左边的树是否进行展示 子组件篇: <el-button v-if="isShowTree&hasTree" type="text" icon="btn-arrow iconfont icon-icon_arrow_left" style="margin-left:-30px;margin-top:-15px;position:absolute"
记录自己经常用到的工具,换电脑时使用----------不定时更新 一:电脑相关 1.windows系统,安装nvm node包管理工具,可以切换多个node版本,以适应vue2,vue3,react等开发需求,安装前先卸载电脑里的nodejs版本,在安装nvm。 2.nrm,切换npm下载源 安装方法 npm i nrm -g 二:vscode相
Vue通过prop进行双向数据绑定。子组件数据变化,一般只能通过 this.$emit(func, val) 回调父组件函数来传值给父组件。 Vue2.3版本引入sync,作为一个事件绑定语法糖,当子组件触发事件时,父组件会响应事件并实现数据更新。 .sync 修饰符 this.$emit('update:title', newTitle)
Vue引入CSS样式的方法 https://blog.csdn.net/pick_ears/article/details/122214627
1、函数是以事件驱动的可重复调用的代码块,在组件复用时可以直接调用vue实例 2、每次组件复用都会重新调用data函数, 3、data在作为函数在数据调用时会return一个新对象使得每一个data都是(相当于scoped)互不干扰组件组件各自维护自己的data 4、函数的作用域使得不同组件之间因为存在
一、计算属性和监听器 1、计算属性 data中的属性可以通过声明获得,也可以通过在computed通过计算获得 特性: 计算属性所依赖的属性值发生变化会影响计算属性的值同时发生变化 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <d
看课 给了两个bug js的课,那今天开这个课,就把它学明白。 这个知识点是什么呢?把它弄明白。 今天我能学什么知识? 好好努力,顺其自然,自然社交,尊重别人,话说三分,得之我幸,失之我命。。。。努力过好今天,今天我有什么要学的? 二维码是怎么做的呢? 百度:vue-qr二维码插件安
在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复 在router文件夹下的index.js中加入如下代码,错误消失 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return origina
一.消息订阅与发布: 一种组件间通信的方式,适用于任意组件间通信 订阅消息:设置消息名==>接收数据的组件进行订阅消息 发布消息:传递消息内容==>传递数组的组件进行发布消息 二.使用步骤 安装pubsub:npm i pubsub-js 在使用订阅消息与发布消息的组件引入:import pubsub from 'pub
在 入口文件 main中引入bus new Vue({ render: h => h(App), //注册路由 router, //注册store store, //配置全局总线 beforeCreate() { Vue.prototype.$bus = this }, }).$mount('#app') 在需要调用传递的函数中 声明要调用的 bus名称 methods:{ remo
一、问题描述 开发的时候免不了有时候需要向某个节点appendchild,添加子节点, 但是如果是在vue中,就会发现通过操作dom的appendchild方式添加节点会出现样式对这些新增的节点无效。 二、解决思路 通过查看原始的节点与新增的节点发现,原始节点与新增节点的class都一样,但是原始的节点在
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象。每个对象都是局部的,可以获取当前路由的 path, name, params, query 等属性。 this.$router:全局的 router 实例。通过 vue 根实例中注入 router 实例,然后再注入到每个 子组件,从而让整
扯开怎么定义,为什么要定义props,相信小伙伴们都知道,都会用了,但是有个问题,为什么有时候定义的是数组形式,有时候是对象形式呢? 一句话: props对象形式才能给默认值和类型和必填项,数组形式不能设置这些。 使用数组类型的 props 节点的缺点:无法为每个 prop 指定具体的数据类型和默认值。
vue的8个⽣命周期函数? 1. beforeCreated 2. created 3. beforeMount 4. mounted 5. beforeUpdate 6. updated 7. beforeDestory 8. destoryed v-show 与 v-if的区别? 1、v-show: 是否显示,元素肯定已经渲染在dom节点上,然后通过样式来控制是否显示。 2、v-if: 是否渲染,如果
1使用 <ViualList :size="40" :remain="8" :dataList="dataList"> </ViualList> size:每个列表的高度Height remain:当前屏幕展示数据个数 dataList:当前数据 2自定义组件ViualList 根据size和remain确定内容区域height 根据size和dataList长度确定滚动条height <!-- 主高度
学习心得 今天主要学习了在html里面用Vue库,也是一个js文件,这个也是相当于写好的东西可以直接用。Vue.js的核心是一个采用简洁的模板语法来声明式地将数据渲染进DOM的系统。实现了双向数据绑定。Vue.js可以进行组件化开发,是代码编写量大大减少。 应用场景: 1.Web开发 2.移动端开发 3
1.使用官方引用静态资源处理,需要把图片放在public里面 getImageUrl(name) { return new URL(`./img/${name}.png`, import.meta.url).href } 2.本地运行项目中可以显示图片,但是发布后报Failed to construct ‘URL’: Invalid URL错误,是因为把 esbuild 构建目标设置为 es202