精华内容
下载资源
问答
  • Vue实例对象

    2020-09-12 09:05:58
    Vue实例对象 Vue()是一个构造函数,用new Vue(构造参数)得到的就是一个实例对象...el:即element,表示当前Vue实例对象的装载位置,装载在哪个元素上,也称为挂载点。装载的含义是将template中的内容替换挂载点元素所.
    1. Vue实例对象
      Vue()是一个构造函数,用new Vue(构造参数)得到的就是一个实例对象,Vue实例对象是Vue.js中最基本的单元。构造参数是一个对象,构造参数的属性即为参数选项,常见的参数选项有el、data、template、components等。
      在项目中, 在main.js中通过创建最外层的Vue实例对象来实现根结点、根组件的功能。

    参数选项:

    el:即element,表示当前Vue实例对象的装载位置,装载在哪个元素上,也称为挂载点。装载的含义是将template中的内容替换挂载点元素所对应的全部HTML代码。
    template:表示装载的内容,HTML代码、包含其他组件的HTML片段,称为模板。
    data:数据,是一个对象,表示该实例对象会用到的数据,其中的属性和属性值(字段)会被代理到当前实例对象。比如data中有一个属性为fruit,属性值为banana,那么可以在实例对象中直接用属性访问符号(·)来访问。也可以直接在template对应的HTML片段中引用相应字段,比如用{{变量名}}来实现数据渲染。例:
    var my = new Vue({
    el:"#app",
    template: “

    {{fruit}}}
    ”,
    data:{
    fruit:“banana”
    }
    });
    my.fruit;//“banana”
    1.1 完整测试代码

    新建index.html文件,其中采用

    index.html 渲染出来的页面可以发现整个div#app被替换成了template中的HTML片段

    也可以用class属性来获取挂载点,即el属性为.outerDiv,渲染结果与采用id来获取挂载点,即el属性为#app时的渲染结果相同。

        var my = new Vue({
            el:".outerDiv",
            template: "<p>{{fruit}}</p>",
            data:{
                fruit:"banana"
            }
        });
    

    1.2 Vue实例对象的生存周期

    https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

    2.Vue组件
    2.1 测试代码

      本节使用vue-cli生成一个项目Demo4,主要在main.js、index.html中操作>。首先清空main.js代码,接下来一步步写入代码。本项目已经安装了插件(cnpm install),因此启动时直接cnpm run dev(开发环境)即可。
    

    import Vue from “vue” ES6语法,引入vue这个库并赋值给Vue这个变量,类似于require(),这样Vue就引入到main.js的全局中。

    ----------index.html----------------

    demo4
    ------------main.js--------------

    import Vue from ‘vue’

    new Vue({
    el:"#app",
    template:“

    hello world{{word}}

    ”,
    data:{
    word:" nihao"
    }
    });
    2.2 组件的注册和引入

    (1)组件树

    (2)组件的注册和引入

    (2.1)全局注册:Vue.component(id,definition)

       全局注册的组件为全局组件。
    
        这里的id为组件名,也就是在index.html中使用标签所引用的名字,definition相当于new Vue(构造参数),只不过可以省略new Vue(),直接将构造参数填入即可,子组件一般就不需要挂载点el了,但是一般需要template、data。
    
        参数选项data有两种方式,一种是data:{},另一种是data:function(){return {};},后者不会出现单一引用问题(比如index.html中引入了多个<my-header>标签,那么这些标签所引用的data中的数据不会共享,不会发生影响彼此的情况),建议采用后者。
    

    ---------main.js------------

    import Vue from ‘vue’

    Vue.component(“my-header”,{
    template:"

    {{word}} This is my header

    ",
    data:function () {
    return {
    word:“hello word”
    }
    }
    });

    new Vue({
    el:"#app"
    });
    ----------index.html------------(仅显示body)

    结果

    (2.2)局部注册

          每个组件都是一个Vue实例对象,其中都有components参数选项,可以使用这个参数选项对当前实例对象(组件)注册其子组件。子组件又可以注册其子组件,进而形成了组件树。这里components是一个对象,其中的字段值我们一般抽象出来一个变量,比如myHeader和myHeaderChild,这些变量的值其实就是子组件(实例对象),只不过我们可以省略new Vue(),直接使用构造参数来表示。
    

    ------------main.js--------------

    import Vue from ‘vue’

    let myHeaderChild = {
    template:"

    {{fruit}}

    “,
    data:function () {
    return {
    fruit:“Apple”
    }
    }
    };
    let myHeader = {
    template:”

    {{word}} This is my header

    ",
    data:function () {
    return {
    word:“hello word”
    }
    },
    components: {
    “my-header-child”:myHeaderChild
    }
    };

    new Vue({
    el:"#app",
    components:{
    “my-header”:myHeader
    }
    });
    -------------index.html--------------

    结果
    展开全文
  • 1.传统方法(练习 小DEMO中用的这种) <script type="text/ecmascript"> var app=new Vue({ el:"#app", data:{ message:"hello world" ...

    1.传统方法(练习 小DEMO中用的这种)

        <script type="text/ecmascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        message:"hello world"
                    }
                })
            </script>

    2.带有返回值的方法(实际项目中大多用的这种,优点下面会讲到)

    <script type="text/javascript">
                    var app=new Vue({
                    el:'#app',
                        data: function(){
                    return {
                    message:"hello world"
                    }
            }
        })
    </script>

    第二种的es6写法:

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data() {
                return {
                    message:"hello world"
                }
            }
        })
    </script>

    html里面body部分:这里以helloworld 为例

    <div id="app">
                {{message}}
    </div>

    区别:

    传统的vue.js实例方法 即第一种方法,基本不会被复用,作为练习用较多。

    第二种第三种实际项目中用的比较多,因为可能在多处调用同一组件,为了不让多处的组件共享同一data对象,只能返回函数。

    export default{
        data(){
            return {
                ...
            }
        }
    }

    来源:之前看过一篇文章,大致是这么介绍的,今天想起来了更新下,项目中确实后两种用的较多。

    转载于:https://www.cnblogs.com/sxgxiaoge/p/9176721.html

    展开全文
  • VUE-Vue实例

    2020-01-02 10:45:45
    在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括: el data methods 等等 接下来我们一 一介绍。 4.2.模板或元素 每个Vue实例都需要关联一段Html模板,Vue会基于此...

    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);
                }
            },
    

    控制台的输出:

    在这里插入图片描述

    展开全文
  • 1. Vue实例对象 Vue()是一个构造函数,用new Vue(构造参数)得到的就是一个实例对象Vue实例对象Vue.js中最基本的单元。构造参数是一个对象,构造参数的属性即为参数选项,常见的参数选项有el、data、template、...

    1. Vue实例对象

    • Vue()是一个构造函数,用new Vue(构造参数)得到的就是一个实例对象,Vue实例对象是Vue.js中最基本的单元。构造参数是一个对象,构造参数的属性即为参数选项,常见的参数选项有el、data、template、components等。
    •  在项目中, 在main.js中通过创建最外层的Vue实例对象来实现根结点、根组件的功能。

    参数选项:

    • el:即element,表示当前Vue实例对象的装载位置,装载在哪个元素上,也称为挂载点。装载的含义是将template中的内容替换挂载点元素所对应的全部HTML代码。
    • template:表示装载的内容,HTML代码、包含其他组件的HTML片段,称为模板
    • data:数据,是一个对象,表示该实例对象会用到的数据,其中的属性和属性值(字段)会被代理到当前实例对象。比如data中有一个属性为fruit,属性值为banana,那么可以在实例对象中直接用属性访问符号(·)来访问。也可以直接在template对应的HTML片段中引用相应字段,比如用{{变量名}}来实现数据渲染。例:
    var my = new Vue({
      el:"#app",
      template: "<div>{{fruit}}}</div>",
      data:{
        fruit:"banana"
      }
    });
    my.fruit;//"banana"

    1.1 完整测试代码

    新建index.html文件,其中采用<script>标签引用CDN的形式来引入Vue

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index.html</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <div id="app" class="outerDiv">
            <span>sssssssss</span>
        </div>
        <script>
            var my = new Vue({
                el:"#app",
                template: "<p>{{fruit}}</p>",
                data:{
                    fruit:"banana"
                }
            });
            my.fruit;//"banana"
        </script>
    </body>
    </html>

    渲染出来的页面可以发现整个div#app被替换成了template中的HTML片段

    也可以用class属性来获取挂载点,即el属性为.outerDiv,渲染结果与采用id来获取挂载点,即el属性为#app时的渲染结果相同。

            var my = new Vue({
                el:".outerDiv",
                template: "<p>{{fruit}}</p>",
                data:{
                    fruit:"banana"
                }
            });

    1.2 Vue实例对象的生存周期

    https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

    2.Vue组件

    2.1 测试代码

          本节使用vue-cli生成一个项目Demo4,主要在main.js、index.html中操作>。首先清空main.js代码,接下来一步步写入代码。本项目已经安装了插件(cnpm install),因此启动时直接cnpm run dev(开发环境)即可。

    import Vue from "vue"  ES6语法,引入vue这个库并赋值给Vue这个变量,类似于require(),这样Vue就引入到main.js的全局中。

    ----------index.html----------------

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>demo4</title>
      </head>
      <body>
        <div id="app"></div>
      </body>
    </html>
    

    ------------main.js--------------

    import Vue from 'vue'
    
    new Vue({
      el:"#app",
      template:"<p>hello world{{word}}</p>",
      data:{
        word:" nihao"
      }
    });

    2.2 组件的注册和引入

    (1)组件树

    (2)组件的注册和引入

    (2.1)全局注册:Vue.component(id,definition)

           全局注册的组件为全局组件

            这里的id为组件名,也就是在index.html中使用标签所引用的名字,definition相当于new Vue(构造参数),只不过可以省略new Vue(),直接将构造参数填入即可,子组件一般就不需要挂载点el了,但是一般需要template、data。

            参数选项data有两种方式,一种是data:{},另一种是data:function(){return {};},后者不会出现单一引用问题(比如index.html中引入了多个<my-header>标签,那么这些标签所引用的data中的数据不会共享,不会发生影响彼此的情况),建议采用后者。

    ---------main.js------------

    import Vue from 'vue'
    
    Vue.component("my-header",{
      template:"<p>{{word}} This is my header</p>",
      data:function () {
        return {
          word:"hello word"
        }
      }
    });
    
    new Vue({
      el:"#app"
    });
    

    ----------index.html------------(仅显示body)

      <body>
        <div id="app">
          <my-header></my-header>
        </div>
      </body>

    结果

    (2.2)局部注册

              每个组件都是一个Vue实例对象,其中都有components参数选项,可以使用这个参数选项对当前实例对象(组件)注册其子组件。子组件又可以注册其子组件,进而形成了组件树。这里components是一个对象,其中的字段值我们一般抽象出来一个变量,比如myHeader和myHeaderChild,这些变量的值其实就是子组件(实例对象),只不过我们可以省略new Vue(),直接使用构造参数来表示。

    ------------main.js--------------

    import Vue from 'vue'
    
    let myHeaderChild = {
      template:"<p>{{fruit}} </p>",
      data:function () {
        return {
          fruit:"Apple"
        }
      }
    };
    let myHeader = {
      template:"<p>{{word}} This is my header <my-header-child></my-header-child></p>",
      data:function () {
        return {
          word:"hello word"
        }
      },
      components: {
        "my-header-child":myHeaderChild
      }
    };
    
    new Vue({
      el:"#app",
      components:{
        "my-header":myHeader
      }
    });
    

    -------------index.html--------------

      <body>
        <div id="app">
          <my-header></my-header>
        </div>
      </body>

    结果

     

    展开全文
  • (十)vue实例对象介绍

    千次阅读 2018-11-12 13:27:47
    前三个基本上已经讲了,我们直接来看实例对象的计算属性 (4)Computed 计算属性 1)什么是计算属性 1.计算属性即computed, 和前面我们讲的methods方法基本上一样。他们的写法都是函数形式。 2.不同的是,methods...
  • getCurrentInstance方法只有在 development,即开发环境下才能获取当前组件的实例,换句话说就是这个方法只是在开发环境下用于调试使用的
  • Vue3.0 获取 vue 实例

    千次阅读 2020-10-16 17:38:09
    import { createApp } from 'vue'
  • VueVue实例创建整体流程

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

    千次阅读 2020-06-15 15:30:03
    提供一个页面上的DOM对象作为Vue实例的挂载目标.可以是选择器或者或DOM元素实例 data data对象中的属性是响应式的,直接向vm实例设置属性不是响应式的 data的响应性可以被Object.freeze()打断 data属性的使用: ...
  • ####暂时整理这么多:(vm是vue实例名) 内外部调用属性: vm.属性名或者vm.$data.属性名 内外部调用方法: vm.方法名()或者vm.$option.methods.方法名()第二种调用方法在ajax请求时可能出现post/get方法不存在的...
  • 直接上代码, <!DOCTYPE html> <html> ...script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <h1>{{ greet('af
  • Vue.js 实例方法

    2017-11-15 19:09:00
    用来访问当前组件实例的父实例,如果当前实例有的话 1-2、vm.$root 当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自已 1-3、vm.$children 类型:Array<Vue instance> 当前实例的直接子...
  • res.data }) } } 需求:需要在actions中异步获取数据,因为我的axios挂载在Vue实例对象下,当我运行上面这段代码时报错了,发现在store中的this并不指向Vue实例对象, 解决方案1 const that = this this.$store....
  • Vue元素点击时获取当前对象

    千次阅读 2018-09-22 13:52:52
    vue中在元素点击时获取当前对象需要手动传入当前对象 更多精彩 更多技术博客,请移步 asing1elife’s blog 在点击时传入当前对象 $event 表示当前被点击的对象 &lt;el-menu-item v-for="submenu in ...
  • //通过Vue实例对象可以直接访问的属性,称为实例属性 实例属性都以$开头 vm.$el:当前Vue实例使用的根dom元素 vm.$data:当前Vue实例观察的数据对象 vm.$options:当前Vue实例的初始化选项 vm.$refs:当前Vue实例...
  • 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 ...
  • VUE基础-实例挂载

    2018-09-08 06:29:05
    实例的调用:实例对象.$+(实例中的属性或者方法) el 确定实例挂载的地方(DOM对象) var data = { a: 1 } var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 vm 实例 ...
  • vue获取实例元素的三种方法

    千次阅读 2019-10-07 14:25:47
    vue在开发组件中,获取组件实例是一个非常有用的方法。组件可以通过 $refs、$parents、$children等方式获得实例引用 $refs在组件(或者dom上)增加ref属性即可 $parents获取子组件挂载的父组件节点 $children获取...
  • 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.js实例学习:获取DOM元素

    万次阅读 2019-02-19 23:51:00
    Vue获取DOM元素,我们可以用ref。 用法(和React一样): (1)在组件的DOM部分,任意标签中 写上:ref=&quot;xxx&quot; (2)通过组件对象 this.$refs.xxx 获取到元素 1、获取HTML标签的DOM 例1: &...
  • Vue实例属性

    2020-05-21 23:55:23
    $root:用获取当前组件树的根vue实例 $attrs:可以获取组件的属性,但其获取的属性中不包含class、style以及被声明为props的属性。 1.$props 首先做一个小案例: <div id="app"> <p>vm.$props <
  • Vue 2.1.8 使用npm方法安装: 需要node.js环境/npm包管理,所以首先在cmd中node -v和npm --v检查一下是否安装了node。 npm install vue安装vue npm install -g vue-cli安装vue-cli 脚手架构建工具 选择项目...
  • Vue基础(Vue实例

    2020-04-15 19:46:44
    通过 vue 提供的构造函数可以实例化出来一个跟组件实例对象 let app = new Vue(创建组件所需要的一些配置选项); 组件配置选项: https://cn.vuejs.org/v2/api/ 组件内容渲染 渲染一个组件的内容可以通过两种方式...
  • vue - vue.$ref获取元素实例

    千次阅读 2019-06-19 19:04:40
    vue中使用通过ref来获取dom元素 ,如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例     当 v-for 用于元素或组件的时候,引用信息将是包含 DOM ...
  • 下面就用实际开发中的一个实例来讲解一下vue的双向绑定: 实例是新增一个保险方案,其中包含一个客户信息和多个被保险人信息,被保险人信息要实现动态的 增 、删、 改,这样看来使用vue的动态双向绑定是最合适不过...
  • vue的js文件中获取vue实例

    千次阅读 2019-04-02 16:59:00
    1.main.js导出vue实例: 1 var vue = new Vue({ 2 el: '#app', 3 router, 4 components: { App }, 5 template: '<App/>' 6 }) 7 export default vue 2.在需要使用的js中引入 1 import context ...
  • 场景还原: // 比如在uni.getLocation方法中使用this修改... console.log('当前位置的经度:' + res.longitude); console.log('当前位置的纬度:' + res.latitude); // 这里的this指向会出错,所以数据也不会修改成功
  • Vue 组件注册实例详解

    千次阅读 2019-04-02 20:32:51
    这篇文章主要介绍了Vue 组件注册,结合实例形式较为详细的分析了vue.js组件的常见分类、注册方法及相关操作注意事项,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎...
  • Vue组件跨层级获取组件实例

    千次阅读 2019-05-30 14:09:46
    this.$children 当前实例的直接子组件。(不保证顺序,不是响应式) this.$parent.$parent.$refs.xxx 跨级访问父组件 this.$children.$children.$refs.xxx 跨级访问子组件 这种递归的方式 代码繁琐 性能低效 ref 只能...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,286
精华内容 10,514
关键字:

vue获取当前实例对象

vue 订阅