vue 基础之el选项与data选项及method选项详解 |
您所在的位置：网站首页 › id选择器有什么特点吗 › vue 基础之el选项与data选项及method选项详解 |
vue 基础之el选项与data选项及method选项详解
|
文章目录
前言一、Vue基础知识1.最简单的vue实例2.el 又称vue的实例选项1.el的值可以是id选择器2.el的值也可以是class选择器，当dom元素中有多个同名的class选择器，vue作用于找到的第一个class选择器3.el的值也可以是dom元素，写法如下
3.data选项1.data 的作用2.访问data中的数据可以通过vue实例对象.属性名去访问数据，vue的实例代理data对象上的所有属性，因此vm.msg 等价于vm.$data.msg3.特点：响应式数据（当数据发生变化的时候，视图中的数据会自动发生变化）
4. method选项1.方法调用
总结
前言
学习Vue的基础知识el选项和data选项 提示：以下是本篇文章正文内容，下面案例可供参考 一、Vue基础知识 1.最简单的vue实例 {{this.$data.msg}} var vm = new Vue({ el:'#app', data:{ msg:1 } }); 2.el 又称vue的实例选项作用:指定设置当前vue管理的视图
温馨提示： el设置的dom元素不能是body标签，否则vue会报错，正确的设置的标签应该是body内部包含的子标签 3.data选项 1.data 的作用指定设置当前vue实例所使用的数据，data的值可以是一个对象 2.访问data中的数据可以通过vue实例对象.属性名去访问数据，vue的实例代理data对象上的所有属性，因此vm.msg 等价于vm.$data.msg 3.特点：响应式数据（当数据发生变化的时候，视图中的数据会自动发生变化）
1.methods的值可以为一个对象 2.可以直接通过VM的实例访问这些方法，或者在指令表达式中使用 3方法中的this自动绑定为vue实例 注意:不应该使用箭头函数来定义method函数(例如plus:9)=>this.a++).理由是箭头函数绑定了父级作用域的上下文，所以this将不会期望指想Vue实例,this.a将是undefined var vm =new Vue({ el:'#app', data:{ msg:I am hungry, }, methods:{ fn1:function() { console.log(vm); }, fn2:function() { console.log(this.$data.msg): } }); 1.方法调用1.可以在视图中通过{{}}的方式进行调用方法 2.可以通过vm对象调用vm.fn1()方法 注意：不推荐使使用箭头函数，因为箭头函数this指向的不是vm实例,如下 var vue = new Vue({ el:'#app', data:{ msg:'hi' }, methods:{ fn1:() => { console.log('Vm'); } } });4.在视图中可以通过@click=fn1()调用方法 学习vue中el 、data 、methods属性的具体用法 |
3.方法中的this指的是当前vue实例对象
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |