- 博客(7)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue.config.js简单配置教程
process.env.NODE_ENV默认只有两种状态即development和production，可自行配置更多环境module.exports = { //部署应用包时的基本URL(./全部相对路径) 可使用process.env.NODE_ENV publicPath: process.env.NODE_ENV === 'production' ? '/production/' : './', //输出目录，默认dist outputDir:"dist", //放静态资源目录 as
2022-01-04 11:00:30
469
原创 Vue .sync修饰符
vue通信为单向传输，所以在父组件传递给子组件参数时，子组件不可随意去更改prop中的值通常做法：可通过自定义事件，通知父组件修改值://父组件<model :text="text" @update="text=$event"></model> //子组件 props 接收参数，emit提交事件props: { text: { type: String, default: "" }},//事件绑定 触发修改this.$emit('update',ne.
2021-11-03 22:39:53
152
原创 Vue 虚拟dom与diff算法，入门级理解
虚拟dom：用js模拟dom结构简单的流程为：数据改变 → 虚拟dom开始计算变更 → 根据变更结果操作对应dom → 视图改变虚拟dom的操作始终会在真实dom之前js是如何表达dom的//html结构树：<div class="container"> <ul> <li>1</li> <li>2</li> </ul></div>//js来表达以上结构（vnode）：{ tag:'d
2021-11-03 22:16:35
432
原创 Vue双向数据绑定：v-model、Object.defineProperty()、$set
v-model详解v-model本质上是一个语法糖，当绑定在input上后，实际被解析为绑定了value同时绑定了input事件：<input v-model="name"> //实际解析为 <input :value="name" @input="name=$event.target.value">Object.defineProperty()详解用四个字概括为：数据劫持即劫持一个对象的访问（get）和修改（set）对其进行拦截Object.definePrope
2021-11-03 21:35:01
729
原创 Vue $mount的用法以及render方法
通俗说：$mount方法是用来挂载我们定义好的模板（扩展）$mount的函数在Vue的原型链上，Vue的任何实例都可以直接调用vue挂载是替换对应节点vue挂载方式有两中：//el属性var app=new vue({ el:"#app", data(){}})//$mount挂载var app=new vue({ data(){}})app.$mount("#app")在新建项目时总会出现如下代码new Vue({ router, store, render: h
2021-11-03 21:06:16
1646
原创 vue 自定义指令案例：v-focus、v-has
案例1 实现一个v-focus的指令//定义一个全局指令 vue定义全局方法需要暴露一个 install 方法exports.install = function(Vue, options) { Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })}//在main.js中 使用Vue.use引入 即可在组件中使用 如&l
2021-11-03 20:58:11
1331
原创 Vue.extend详解，自定义toast弹窗
Vue.extend方法，返回的是一个扩展实例构造器可以理解为组件类的一个构造函数，其属性都为组件内的对应的属性//定义一个组件的构造函数const divComponent = Vue.extend({ template:`<div v-on:click="click">{ { text } }</div>`, data() { return { text: 'hello word' } }, methods:{ click(){ consol
2021-11-03 20:44:51
357
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人