精华内容
下载资源
问答
  • 下面小编就为大家分享一篇vue获取当前点击的元素并传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • VUE-Vue实例

    2020-01-02 10:45:45
    4.Vue实例 4.1.创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括: el ...

    4.Vue实例

    4.1.创建Vue实例

    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

    var vm = new Vue({
      // 选项
    })
    

    在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:

    • el
    • data
    • methods

    等等

    接下来我们一 一介绍。

    4.2.模板或元素

    每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。

    我们可以通过el属性来指定。

    例如一段html模板:

    <div id="app">
        
    </div>
    

    然后创建Vue实例,关联这个div

    var vm = new Vue({
    	el:"#app"
    })
    

    这样,Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

    4.3.数据

    当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。

    html:

    <div id="app">
        <input type="text" v-model="name"/>
    </div>
    

    js:

    var vm = new Vue({
        el:"#app",
        data:{
            name:"刘德华"
        }
    })
    
    • name的变化会影响到input的值
    • input中输入的值,也会导致vm中的name发生改变

    4.4.方法

    Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue实例的作用范围内使用。

    html:

    <div id="app">
        {{num}}
        <button v-on:click="add"></button>
    </div>
    

    js:

    var vm = new Vue({
        el:"#app",
        data:{
            num: 0
        },
        methods:{
            add:function(){
                // this代表的当前vue实例
                this.num++;
            }
        }
    })
    

    4.5.生命周期钩子

    4.5.1.生命周期

    每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。

    生命周期:

    在这里插入图片描述

    4.5.2.钩子函数

    beforeCreated:我们在用Vue时都要进行实例化,因此,该函数就是在Vue实例化是调用,也可以将他理解为初始化函数比较方便一点,在Vue1.0时,这个函数的名字就是init。

    created:在创建实例之后进行调用。

    beforeMount:页面加载完成,没有渲染。如:此时页面还是{{name}}

    mounted:我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery,所以也可以理解为jquery中的$(document).ready(function(){….}),他的功能就是:在dom文档渲染完毕之后将要执行的函数,该函数在Vue1.0版本中名字为compiled。 此时页面中的{{name}}已被渲染成峰哥

    beforeDestroy:该函数将在销毁实例前进行调用 。

    destroyed:改函数将在销毁实例时进行调用。

    beforeUpdate:组件更新之前。

    updated:组件更新之后。

    例如:created代表在vue实例创建后;

    我们可以在Vue中定义一个created函数,代表这个时期的钩子函数:

        // 创建vue实例
        var app = new Vue({
            el: "#app", // el即element,该vue实例要渲染的页面元素
            data: { // 渲染页面需要的数据
                name: "峰哥",
                num: 5
            },
            methods: {
                add: function(){
                    this.num--;
                }
            },
            created: function () {
                this.num = 100;
            }
        });
    

    结果:
    在这里插入图片描述

    4.5.3.this

    我们可以看下在vue内部的this变量是谁,我们在created的时候,打印this

            methods: {
                add: function(){
                    this.num--;
                    console.log(this);
                }
            },
    

    控制台的输出:

    在这里插入图片描述

    展开全文
  • vue3获得当前组件的实例

    千次阅读 2020-10-13 21:38:01
    引入 getCurrentInstance方法 获取当前组件的实例 import {getCurrentInstance} from 'vue' 使用 const instance = getCurrentInstance() console.log(instance,'当前组件的实例')

    引入 getCurrentInstance方法 获取当前组件的实例

    import {getCurrentInstance} from 'vue'
    

    使用

    const instance = getCurrentInstance()
    console.log(instance,'当前组件的实例')
    
    展开全文
  • Vue3.0 获取 vue 实例

    千次阅读 2020-10-16 17:38:09
    import { createApp } from 'vue'
    import { createApp } from 'vue' 
    
    展开全文
  • getCurrentInstance方法只有在 development,即开发环境下才能获取当前组件的实例,换句话说就是这个方法只是在开发环境下用于调试使用的

    上一篇文章:快速使用Vue3最新的15个常用API(1W5+字详解,建议收藏),我向大家介绍了关于Vue3常用的15个API的使用详情,帮助大家快速上手Vue3,也很高兴收到大家的支持,同样也有一些人提出了疑问,尤其是对于 如何获取当前组件实例 这个问题的讨论最为激烈,这里我们就对其进行一些补充

    • 公众号:前端印象
    • 不定时有送书活动,记得关注~
    • 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

    在Vue2的各个组件中,我们频繁地使用 this ,即获取当前组件实例,是因为每个组件的数据变量、方法都要通过组件实例去获取。

    例如:

    <script>
    export default {
      name: 'App',
      data: {
      	return {
    		name: '前端印象',
    		age: 22
    	}
      },
      methods: {
    	increase() {
    		this.age += 1
    	}
      },
      mounted() {
      	this.increase()
      }  
    }
    </script>
    

    在上面这段代码中很清晰的看到,首先在 data 中声明了两个响应式数据,分别为 nameage;同时定义了一个方法 increase,该方法是将 age 的值 +1;在当前组件挂载后,调用 increase 方法

    无论是获取数据 age,还是获取方法 increase,我们都是从 this,即当前组件实例中获取的

    而到了Vue3,大部分甚至可以说全部的关键代码都集中写在了 setup 函数内,并且在该函数内是无法通过 this 获取到当前组件实例的,那是因为所有的变量、方法都可以直接使用

    例如:

    <script>
    import {ref, onMounted} from 'vue'
    export default {
      name: 'App',
      setup() {
      	const name = ref('前端印象')
      	const age = ref(22)
    
    	function increase() {
    		age.value += 1
    	}
    	
    	onMounted(() => {
    		increase()
    	})
    	
        return {name, age}
      }
    }
    </script>
    

    这段代码与上一段代码功能一模一样,但从始至终都没有通过组件实例去获取数据变量或方法,这无疑减少了很多的重复代码,例如多次使用 this,想必Vue3的初衷也不需要我们去获取当前组件实例

    但是上一篇文章讲到的 getCurrentInstance 这个方法确实是可以获取到组件实例的,如图

    在这里插入图片描述
    但这只有在 development,即开发环境下才能获取到当前组件的实例,换句话说就是这个方法只是在开发环境下用于调试使用的;

    那么在生产环境下是什么样的呢?我们把项目打包一下,并打印一下看看,如图所示:

    在这里插入图片描述
    很明显,在 ctx 中根本没有看到当前组件实例的影子,而只有一个 _,我们点进去看看里边是什么,如图所示

    在这里插入图片描述
    通过不断的点击,我们发现 _ 里面是无限循环的 getCurrentInstance 方法的返回结果,所以说该方法的返回结果在开发环境和生产环境下还是有所区别的

    那么,问题又来了,Vue3我们到底如何去获取组件实例呢?这里我想说哈,都这样了,还获取啥组件实例啊,不信我给你捋一遍

    1. 获取数据

    Vue2:

    <script>
    export default {
      name: 'App',
      data: {
      	return {
    		name: '前端印象',
    		age: 22
    	}
      },
      mounted() {
      	console.log(this.name)
      	console.log(this.age)
      }  
    }
    </script>
    

    Vue3:

    <script>
    import {ref} from 'vue'
    export default {
      name: 'App',
      setup() {
      	const name = ref('前端印象')
      	const age = ref(22)
    
    	console.log(name.value)
    	console.log(age.value)
    	
        return {name, age}
      }
    }
    </script>
    

    2. 使用方法

    Vue2:

    <script>
    export default {
      name: 'App',
      methods: {
    	show() {
    		console.log('show方法被调用')
    	}
      },
      mounted() {
      	this.show()
      }  
    }
    </script>
    

    Vue3:

    <script>
    import {onMounted} from 'vue'
    export default {
      name: 'App',
      setup() {
    	function show() {
    		console.log('show方法被调用')
    	}
    
    	onMounted(() => {
    		show()
    	})
      }
    }
    </script>
    

    3. 获取当前组件根元素

    Vue2:

    <template>
      <div id="app" ref="root">
    	<p class="child"></p>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      mounted() {
      	const el = this.$refs.root
      	console.log(el)
      }  
    }
    </script>
    

    Vue3:

    <template>
      <div id="app" ref="root">
    	<p class="child"></p>
      </div>
    </template>
    
    <script>
    import {ref, onMounted} from 'vue'
    export default {
      name: 'App',
      setup() {
    	const root = ref(null)
    
    	onMounted(() => {
    		console.log(root.value)
    	})
      }
    }
    </script>
    

    4. 子组件向父组件通信

    Vue2:

    <script>
    export default {
      name: 'App',
      methods: {
    	change() {
    		this.$emit('valueChange', 3)
    	}
      } 
    }
    </script>
    

    Vue3:

    <script>
    export default {
      name: 'App',
      setup(props, context) {
    	function change() {
    		context.emit('valueChange', 3)
    	}
      }
    }
    </script>
    

    5. 获取Vuex对象

    Vue2:

    <script>
    export default {
      name: 'App',
      mounted() {
      	console.log(this.$store.state.name)
    	this.$store.commit('show')
      } 
    }
    </script>
    

    Vue3:

    <script>
    import {onMounted} from 'vue'
    import {useStore} from 'vuex'
    export default {
      name: 'App',
      setup(props, context) {
      	const store = useStore()
      	
    	onMounted(() => {
    		console.log(store.name)
    		store.commit('show')
    	})
      }
    }
    </script>
    

    总结:

    大家不要依赖 getCurrentInstance 方法去获取组件实例来完成一些主要功能,否则在项目打包后,一定会报错的。

    关注公众号「前端印象」,每日更新高质量前端技术文章,还能领取完整版JS版的数据结构与算法代码、近年常考面试题等福利

    展开全文
  • 主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue的应用实例和组件实例 创建一个vue的应用实例 通过createApp函数创建 const app = Vue.createApp({}) //app就是应用实例 应用实例可以用于注册全局组件 app.component('组件名',Xcomponent) 应用...
  • VueVue实例创建整体流程

    千次阅读 2018-09-03 20:40:09
    上篇文章是Vue初始化加载的过程,主要的处理是对Vue实例方法以及静态方法的定义。 本篇是分析调用Vue构造函数的过程,实际上是主要分析大致流程、props、methods、data。 具体逻辑 使用Vue构造函数创建Vue实例,...
  • vue获取当前时间

    千次阅读 2019-08-26 16:49:02
    vue获取当前时间: <template> <div id="homeHeader" class="clearfix"> <div class="nav clearfix"> <a class="datastyle txt">{{date | formatDateTime}}</a> ...
  • Vue—组件实例详解

    2020-08-28 00:18:25
    获取Vue实例挂载的DOM元素,自mounted钩子函数开始生效,mounted之前的钩子函数内无效。 如下代码所示,Vue脚手架中,$el指向当前Vue组件模板中的根标签。 <template> <div id="root"> <h1 @...
  • vue实例属性和方法 Vue 实例暴露了一些有用的实例属性与方法。 这些属性与方法都有前缀 $,以便与代理的数据属性区分。 文章目录vue实例属性和...返回当前 Vue 实例正在管理的 DOM 元素。即:渲染出来的html元素
  • vue-入门实例

    2019-05-14 20:21:30
    vue-入门实例案例1--hello world案例2--数据显示的三种方式案例3--事件与方法案例4--事件修饰案例5--v-model双向数据绑定案例6--this的使用案例7--样式:class案例8-- :style案例9 --数据遍历案例10-- v-show与v-if...
  • Vue入门-Vue实例

    2019-06-12 18:00:06
    Vue入门-Vue实例4.Vue实例4.1.创建Vue实例4.2.模板或元素4.3.数据4.4.方法4.5.生命周期钩子4.5.1.生命周期4.5.2.钩子函数4.5.3.this 4.Vue实例 4.1.创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue ...
  • vm.$el:当前Vue实例使用的根dom元素 vm.$data:当前Vue实例观察的数据对象 vm.$options:当前Vue实例的初始化选项 vm.$refs:当前Vue实例容器中定义了ref属性的所有DOM元素 <!DOCTYPE html> <html>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,013
精华内容 12,805
关键字:

vue获取当前实例

vue 订阅