精华内容
下载资源
问答
  • vuethis指向

    2020-07-25 13:35:00
    vuethis指向 1.在Vue所有的生命周期钩子方法   比如在mounted里使用thisthis指向调用它的Vue实例,如下列子: 2.vue组件生命周期钩子方法里面还有方法使用this   在函数内部使用this时,this指向window...

    vue中this的指向

    1.在Vue所有的生命周期钩子方法

      比如在mounted里使用this,this指向调用它的Vue实例,如下列子:
    在这里插入图片描述

    2.vue组件生命周期钩子方法里面还有方法使用this

      在函数内部使用this时,this会指向window,而非vue实例。所以除了vue组件自身方法外,在别的地方调用this时, 首先需要在最外部,设置一个变量,将其绑定上vue实例。
    在这里插入图片描述

    3.vue普通方法中使用this

      this指向调用它的Vue实例
    在这里插入图片描述

    4.vue箭头方法中使用this

      箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window;

    在这里插入图片描述

      完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
          <button v-on:click="show" >按钮1</button>
          <button v-on:click="show2" >按钮2</button>
          <p>{{date}}</p>
        </div>
        <script src="vue.js"></script>
        <script>
            var name = 'hello';
            var app = new Vue({
                el:'#app',
                data:{name:"你好",date:new Date()},
                methods:{
                    show:function()
                    {
                        console.log('普通方法.............................');
                        console.log(this.name);
                        console.log(this);
                    },
                    // 箭头方法
                    show2 :() =>
                    {
                        console.log('箭头方法.............................');
                        console.log(this.name);
                        console.log(this);
                    }
                },
                mounted:function()
                {
                    console.log('Vue所有的生命周期钩子方法.............................');
                    console.log(this);
                    console.log(this.name);
                    _this = this;
                        this.timer = setInterval(function(){
                       
                            _this.date = new Date();
                            console.log('vue组件生命周期钩子方法里面还有方法使用this.............................');
                            console.log(_this.name);
                            console.log(_this);
                            console.log(this.name);
                            console.log(this);
                        },10000);
    
    
    
                }
            
            })
        </script>
    </body>
    </html>
    
    展开全文
  • 组件 this指向vue VUE表组件 (vue-table-component) A straightforward Vue component to filter and sort tables. 一个简单的Vue组件,用于过滤和排序表。 This repo contains a Vue component that can render a...

    组件 this指向vue

    VUE表组件 (vue-table-component)

    A straightforward Vue component to filter and sort tables.

    一个简单的Vue组件,用于过滤和排序表。

    This repo contains a Vue component that can render a filterable and sortable table. It aims to be very lightweight and easy to use. It has support for retrieving data asynchronously and pagination.

    此仓库包含一个Vue组件,该组件可以呈现可过滤和可排序的表。 它的目标是非常轻巧且易于使用。 它支持异步检索数据和分页。

    Here's an example of how you can use it:

    这是一个如何使用它的示例:

    <table-component
         :data="[
              { firstName: 'John', lastName: 'Lennon', instrument: 'Guitar', birthday: '04/10/1940', songs: 72 },
              { firstName: 'Paul', lastName: 'McCartney', instrument: 'Bass', birthday: '18/06/1942', songs: 70 },
              { firstName: 'George', lastName: 'Harrison', instrument: 'Guitar', birthday: '25/02/1943', songs: 22 },
              { firstName: 'Ringo', lastName: 'Starr', instrument: 'Drums', birthday: '07/07/1940', songs: 2 },
         ]"
         sort-by="songs"
         sort-order="asc"
    >
         <table-column show="firstName" label="First name"></table-column>
         <table-column show="lastName" label="Last name"></table-column>
         <table-column show="instrument" label="Instrument"></table-column>
         <table-column show="songs" label="Songs" data-type="numeric"></table-column>
         <table-column show="birthday" label="Birthday" data-type="date:DD/MM/YYYY"></table-column>
         <table-column label="" :sortable="false" :filterable="false">
             <template slot-scope="row">
                <a :href="`#${row.firstName}`">Edit</a>
             </template>
         </table-column>
     </table-component>

    A cool feature is that the table caches the used filter and sorting for 15 minutes. So if you refresh the page, the filter and sorting will still be used.

    一项很酷的功能是该表将使用的过滤器和排序缓存15分钟。 因此,如果刷新页面,则仍将使用过滤器和排序。

    演示版 (Demo)

    Want to see the component in action? No problem. Here's a demo.

    是否希望看到实际的组件? 没问题。 这是一个演示

    安装 (Installation)

    You can install the package via yarn:

    您可以通过yarn安装软件包:

    yarn add vue-table-component

    or npm:

    或npm:

    npm install vue-table-component --save

    Next, you must register the component. The most common use case is to do that globally.

    接下来,您必须注册该组件。 最常见的用例是全局执行此操作。

    //in your app.js or similar file
    import Vue from 'vue';
    import { TableComponent, TableColumn } from 'vue-table-component';
    
    Vue.component('table-component', TableComponent);
    Vue.component('table-column', TableColumn);

    Alternatively you can do this to register the components:

    或者,您可以执行以下操作来注册组件:

    import TableComponent from 'vue-table-component';
    
    Vue.use(TableComponent);

    浏览器支持 (Browser Support)

    vue-table-component has the same browser support as Vue (see https://github.com/vuejs/vue). However, you might need to polyfill the Array.prototype.find method for IE support.

    vue-table-component与Vue具有相同的浏览器支持(请参阅https://github.com/vuejs/vue )。 但是,您可能需要为IE支持多Array.prototype.find方法。

    用法 (Usage)

    Here's a simple example on how to use the component.

    这是有关如何使用组件的简单示例。

    <table-component
         :data="[
         { firstName: 'John', birthday: '04/10/1940', songs: 72 },
         { firstName: 'Paul', birthday: '18/06/1942', songs: 70 },
         { firstName: 'George', birthday: '25/02/1943', songs: 22 },
         { firstName: 'Ringo', birthday: '07/07/1940', songs: 2 },
         ]"
         sort-by="songs"
         sort-order="asc"
         >
         <table-column show="firstName" label="First name"></table-column>
         <table-column show="songs" label="Songs" data-type="numeric"></table-column>
         <table-column show="birthday" label="Birthday" :filterable="false" data-type="date:DD/MM/YYYY"></table-column>
     </table-component>

    This will render a table that is both filterable and sortable. A filter field will be displayed right above the table. If your data contains any html we will filter that out when filtering. You can sort the table by clicking on the column headers. By default it will remember the used filter and sorting for the next 15 minutes.

    这将呈现一个既可过滤又可排序的表。 表格上方会显示一个过滤字段。 如果您的数据包含任何html,我们将在过滤时将其过滤掉。 您可以通过单击列标题对表进行排序。 默认情况下,它将在接下来的15分钟内记住使用的过滤器和排序。

    道具 (Props)

    You can pass these props to table-component:

    您可以将这些道具传递给table-component

    • data: (required) the data the component will operate on. This can either be an array or a function

      data :(必需)组件将在其上运行的数据。 这可以是数组或函数

    • show-filter: set this to false to not display the filter field.

      show-filter :将其设置为false以不显示filter字段。

    • show-caption: set this to false to not display the caption field which shows the current active filter.

      show-caption :将其设置为false以不显示显示当前活动过滤器的caption字段。

    • sort-by: the property in data on which to initially sort.

      sort-by :数据的初始排序属性。

    • sort-order: the initial sort order.

      sort-order :初始排序顺序。

    • cache-lifetime: the lifetime in minutes the component will cache the filter and sorting.

      cache-lifetime :组件将缓存过滤器和排序的生存时间(以分钟为单位)。

    • cache-key: if you use multiple instances of table-component on the same page you must set this to a unique value per instance.

      cache-key :如果您在同一页面上使用table-component多个实例,则必须将其设置为每个实例的唯一值。

    • table-class: the passed value will be added to the class attribute of the rendered table

      table-class :传递的值将添加到呈现表的class属性中

    • thead-class: the passed value will be added to the class attribute of the rendered table head.

      thead-class :传递的值将添加到呈现的表头的class属性中。

    • tbody-class: the passed value will be added to the class attribute of the rendered table body.

      tbody-class :传递的值将添加到呈现的表主体的class属性中。

    • filter-placeholder: the text used as a placeholder in the filter field

      filter-placeholder :在过滤器字段中用作filter-placeholder的文本

    • filter-input-class: additional classes that you will be applied to the filter text input

      filter-input-class :将应用于过滤器文本输入的其他类

    • filter-no-results: the text displayed when the filtering returns no results

      filter-no-results :过滤不返回任何结果时显示的文本

    For each table-column a column will be rendered. It can have these props:

    对于每个table-column列,将呈现一列。 它可以具有以下道具:

    • show: (required) the property name in the data that needs to be shown in this column.

      show :(必需)需要在此列中显示的数据中的属性名称。

    • formatter: a function the will receive the value that will be displayed and all column properties. The return value of this function will be displayed. Here's an example

      formatter :一个函数,它将接收将要显示的值和所有列属性。 将显示此函数的返回值。 这是一个例子

    • label: the label that will be shown on top of the column. Set this to an empty string to display nothing. If this property is not present, the string passed to show will be used.

      label :将在列顶部显示的标签。 将此设置为空字符串不显示任何内容。 如果不存在此属性,则将使用传递给show的字符串。

    • data-type: if your column should be sorted numerically set this to numeric. If your column contains dates set it to date: followed by the format of your date

      data-type :如果您的列应按numeric排序,则将其设置为numeric 。 如果您的列中包含日期,则将其设置为date:后跟date:格式

    • sortable: if you set this to false then the column won't be sorted when clicking the column header

      sortable :如果将其设置为false则在单击列标题时不会对该列进行排序

    • sort-by: you can set this to any property present in data. When sorting the column that property will be used to sort on instead of the property in show.

      sort-by :您可以将其设置为data存在的任何属性。 对列进行排序时,将使用属性代替show中的属性进行排序。

    • filterable: if this is set to false than this column won't be used when filtering

      filterable :如果将其设置为false ,则过滤时将不使用此列

    • filter-on: you can set this to any property present in data. When filtering the column that property will be used to filter on instead of the property in show.

      filter-on :您可以将其设置为data存在的任何属性。 过滤列时,将使用属性代替show中的属性进行过滤。

    • hidden: if you set this to true then the column will be hidden. This is useful when you want to sort by a field but don't want it to be visible.

      hidden :如果将其设置为true则该列将被隐藏。 当您想按字段排序但不希望其可见时,此功能很有用。

    • header-class: the passed value will be added to the class attribute of the columns th element.

      header-class :传递的值将添加到th列的class属性。

    • cell-class: the passed value will be added to the class attribute of the columns td element.

      cell-class :传递的值将添加到td列元素的class属性中。

    听众 (Listeners)

    The table-component currently emits one custom event:

    table-component当前发出一个自定义事件:

    • @rowClick: is fired when a row is clicked. Receives the row data as it's event payload.

      @rowClick :单击某行时将触发。 接收行数据作为事件有效负载。

    修改使用的文本和CSS类 (Modifying the used texts and CSS classes)

    If you want to modify the built in text or classes you can pass settings globally. You can use the CSS from the docs as a starting point for your own styling.

    如果要修改内置文本或类,则可以全局传递设置。 您可以将文档中的CSS用作自己样式的起点。

    import TableComponent from 'vue-table-component';
    
    TableComponent.settings({
        tableClass: '',
        theadClass: '',
        tbodyClass: '',
        filterPlaceholder: 'Filter table…',
        filterNoResults: 'There are no matching rows',
    });

    You can also provide the custom settings on Vue plugin install hook:

    您还可以在Vue插件安装挂钩上提供自定义设置:

    import Vue from 'vue';
    import TableComponent from 'vue-table-component';
    
    Vue.use(TableComponent, {
        tableClass: '',
        theadClass: '',
        tbodyClass: '',
        filterPlaceholder: 'Filter table…',
        filterNoResults: 'There are no matching rows',
    });

    异步检索数据 (Retrieving data asynchronously)

    The component can fetch data in an asynchronous manner. The most common use case for this is fetching data from a server.

    该组件可以异步方式获取数据。 最常见的用例是从服务器获取数据。

    To use the feature you should pass a function to the data prop. The function will receive an object with filter, sort and page. You can use these parameters to fetch the right data. The function should return an object with the following properties:

    要使用该功能,您应该将一个函数传递给data道具。 该函数将接收带有filtersortpage的对象。 您可以使用这些参数来获取正确的数据。 该函数应返回具有以下属性的对象:

    • data: (required) the data that should be displayed in the table.

      data :(必需)应在表中显示的数据。

    • pagination: (optional) this should be an object with keys currentPage and totalPages. If totalPages is higher than 1 pagination links will be displayed.

      pagination :(可选)这应该是一个具有键currentPagetotalPages的对象。 如果totalPages大于1,则将显示分页链接。

    Here's an example:

    这是一个例子:

    <template>
       <div id="app">
           <table-component :data="fetchData">
               <table-column show="firstName" label="First name"></table-column>
           </table-component>
       </div>
    </template>
    
    <script>
        import axios from 'axios';
    
        export default {
            methods: {
                async fetchData({ page, filter, sort }) {
                    const response = await axios.get('/my-endpoint', { page });
    
                    // An object that has a `data` and an optional `pagination` property
                    return response;
                }
            }
        }
    </script>

    If you for some reason need to manually refresh the table data, you can call the refresh method on the component.

    如果出于某种原因需要手动刷新表数据,则可以在组件上调用refresh方法。

    <table-component :data="fetchData" ref="table">
        <!-- Columns... -->
    </table-component>
    this.$refs.table.refresh();

    格式化值 (Formatting values)

    You can format values before they get displayed by using scoped slots. Here's a quick example:

    您可以使用作用域槽将值格式化后再显示。 这是一个简单的例子:

    <table-component
         :data="[
              { firstName: 'John', songs: 72 },
              { firstName: 'Paul', songs: 70 },
              { firstName: 'George', songs: 22 },
              { firstName: 'Ringo', songs: 2 },
         ]"
    >
    
         <table-column label="My custom column" :sortable="false" :filterable="false">
             <template slot-scope="row">
                {{ row.firstName }} wrote {{ row.songs }} songs.
             </template>
         </table-column>
     </table-component>

    Alternatively you can pass a function to the formatter prop. Here's an example Vue component that uses the feature.

    或者,您可以将一个函数传递给formatter prop。 这是使用该功能的Vue组件示例。

    <template>
        <table-component
            :data="[{ firstName: 'John' },{ firstName: 'Paul' }]">
            <table-column show="firstName" label="First name" :formatter="formatter"></table-column>
        </table-component>
    </template>
    
    <script>
    export default {
        methods: {
            formatter(value, rowProperties) {
                return `Hi, I am ${value}`;
            },
        },
    }
    </script>

    This will display values Hi, I am John and Hi, I am Paul.

    这将显示值Hi, I am JohnHi, I am Paul

    添加表页脚<tfoot>信息 (Adding table footer <tfoot> information)

    Sometimes it can be useful to add information to the bottom of the table like summary data. A slot named tfoot is available and it receives all of the rows data to do calculations on the fly or you can show data directly from whatever is available in the parent scope.

    有时,将信息(如摘要数据)添加到表的底部非常有用。 一个名为tfoot的插槽是可用的,它可以接收所有rows数据以进行即时计算,或者您可以直接从父级作用域中的任何内容显示数据。

    <table-component
        :data="[{ firstName: 'John', songs: 72 },{ firstName: 'Paul', songs: 70 }]">
        <table-column show="firstName" label="First name"></table-column>
        <table-column show="songs" label="Songs" data-type="numeric"></table-column>
        <template slot="tfoot" slot-scope="{ rows }">
            <tr>
                <th>Total Songs:</th>
                <th>{{ rows.reduce((sum, value) => { return sum + value.data.songs; }, 0) }}</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
            </tr>
        </template>
    </table-component>

    OR

    要么

    <template>
        <table-component
            :data="tableData">
            <table-column show="firstName" label="First name"></table-column>
            <table-column show="songs" label="Songs" data-type="numeric"></table-column>
            <template slot="tfoot">
                <tr>
                    <th>Total Songs:</th>
                    <th>{{ totalSongs }}</th>
                </tr>
            </template>
        </table-component>
    </template>
    <script>
    export default {
        computed: {
            totalSongs () {
                return this.tableData.reduce(sum, value => {
                    return sum + value.songs;
                }, 0);
            }
        },
        data () {
            return {
                tableData: [{ firstName: 'John', songs: 72 },{ firstName: 'Paul', songs: 70 }]
            }
        }
    }
    </script>

    Note: rows slot scope data includes more information gathered by the Table Component (e.g. columns) and rows.data is where the original data information is located.

    注意: rows槽位作用域数据包括由表组件(例如columns )收集的更多信息,而rows.data是原始data信息所在的位置。

    翻译自: https://vuejsexamples.com/a-straight-to-the-point-vue-component-to-display-tables/

    组件 this指向vue

    展开全文
  • Vuethis指向

    2019-01-28 10:10:30
    Vuethis指向
                   

    一、普通函数中的this 

    这是vue文档里的原话:

    All lifecycle hooks are called with their 'this' context pointing to the Vue instance invoking it.

    意思是:在Vue所有的生命周期钩子方法(如created,mounted, updated以及destroyed)里使用this,this指向调用它的Vue实例,即(new Vue)。 

    <div id="app">    <button class="btn btn-primary" v-on:click="on()">点击添加并查看this</button>    <ul class="list-group" v-for="item in list">        <li class="list-group-item">{{item}}</li>    </ul></div><script>    new Vue({        el: "#app",        data: {            list: ["banner", "orange", "apple"]        },        methods: {            on: function() {            alert(this.list);            this.list.push("Potato")        }})</script>

    实例:这里的this指向的是new Vue这个对象。new Vue也可以写成var C=new Vue({}).所以这里的this指向的是C。


     

    二、箭头函数中的this

    箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this。

    这里箭头函数指向window。




               

    再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

    展开全文
  • vuethis指向问题

    2020-11-20 09:52:53
    vue中的created、computed等中定义的方法(如A:function)中this指向这个Vue实例,但如果在A方法中又定义了一个B方法,此时B方法中的this不再指向这个Vue实例,而是指向window对象。 解决方法: 此时就需要在A方法...

    问题描述:

    在vue中的created、computed等中定义的方法(如A:function)中this指向这个Vue实例,但如果在A方法中又定义了一个B方法,此时B方法中的this不再指向这个Vue实例,而是指向window对象。

    解决方法:

    此时就需要在A方法里定义var _this = this,用来改变this的指向,然后在B方法里使用_this调用Vue实例

    展开全文
  • 普通函数中的的this指向取决于运行该函数的作用域,而箭头函数的this是定义时就固定了。然而在vue中有一事不明:惊喜点击惊喜点击1varapp=newVue({el:"#app",data:{},methods:{onSurprise:()=>{...
  • 这次给大家带来vue使用axios时this指向哪里,使用vue调用axios时的this注意事项有哪些,下面就是实战案例,一起来看一下。vue使用axios时this指向哪里本文主要介绍了关于vue使用axios时this指向问题,下面话不多说...
  • Vuethis指向问题

    2020-09-09 21:25:30
    实际项目过程中。在data里面定义好了 phone的值。在发送ajax请求后,this.phone的值便拿不到了。这里我axios去请求。then的回调是用es5的写法写的。 发送请求前,this.phone还有...所以this 当然指向的是vue实例,再用th
  • 前言众所周知axios是vue-resource后出现的vue请求数据的插件。vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的...1.解决办法在vue中使用axios做网络请求的时候,会遇到this指向vue,而为unde...
  • vuethis指向问题以及具体实例展示。
  • Vue基础this指向

    万次阅读 2017-06-01 10:11:58
    刚刚学习了一个基础教程是讲vuethis指向,下面用实例说明。 点击添加并查看this {{item}} new Vue({ el: "#app", data: { list: ["banner", "orange", "apple"] }...
  • Vuethis指向和js的this指向的问题 - 幕布 Vuethis指向和js的this指向的问题js函数的this指向1.1:js中的this指向记住一个原则:一般情况下(箭头函数除外)this是在执行时才能确认,定义时没有办法...
  • js的this指向问题和Vue指向问题详细解析 文章地址:https://blog.csdn.net/qq_40976761/article/details/96148607
  • Vue axios中this指向问题

    万次阅读 2017-11-02 21:06:34
    Vuethis始终指向Vue,但axios中this为undefined,例如若需要赋值给变量用以渲染数据,可以通过=>函数,这时thisVue
  • 1.解决办法在vue中使用axios做网络请求的时候,会遇到this指向vue,而为undefined,可以使用箭头函数"=>"来解决。如下:methods:{loginAction(formName){this.$axios.post('http://127.0.0.1/u/subLogin',{...
  • vue函数中this指向

    2019-08-19 17:44:02
    在下面的例子中可以看出,普通函数的this指向的就是Vue的实例,this.message可以获取到data中的值,而箭头函数的this指向了window,不能获取到值 <script> new Vue({ el : '#app', data : { message : ...
  • Vuethis指向问题

    2020-10-31 22:19:15
    一、methods中this 1.通常methods属性中的回调函数的this都会指向vue实例 //第一种写法: var vm = new Vue({ el:'app', data:{ name:'', list:[], }, methods:{ handle :function(){ // this.list.push
  • vuethis指向问题

    2020-06-02 19:23:24
    普通函数指向vue的实例对象 箭头函数指向window 注意子件中的this
  • (1),非严格模式下,this 默认指向全局对象window(2),而严格模式下, this为undefined对象中的this对象内部方法的this指向调用这些方法的对象,函数的定义位置不影响其this指向this指向只和调...
  • 这说明了showMessage1()里的this指的是window,而showMessage2()里的this指的是vue实例。※ 对于普通函数(包括匿名函数),this指的是直接的调用者,在非严格模式下,如果没有直接调用者,this指的是window。...
  • vue框架this指向问题

    2020-07-11 15:13:59
    代码块 methods: { getMessage: function() { console.log(this); // 指向Vue的实例① let shsh = function() { console.log(this) //指向window② } shsh()
  • vuethis到底指向

    2020-03-19 22:31:49
    今天,在练习代码的时候遇到了关于this指向谁的问题,因一直都未曾深究,始终处于懵懂状态,这次决定把他弄明白,故有此笔记。 问了前辈,前辈告诉我:“现在前端有两种this: 1. 普通的this始终指向调用者 2. 而...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,243
精华内容 497
关键字:

thisvue指向

vue 订阅