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的基础知识el选项和data选项
提示：以下是本篇文章正文内容，下面案例可供参考
一、Vue基础知识
1.最简单的vue实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>{{this.$data.msg}}</div>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:1
}
});
</script>
2.el 又称vue的实例选项
作用:指定设置当前vue管理的视图
1.el的值可以是id选择器
var vm = new Vue({
el:'#app'
});
2.el的值也可以是class选择器，当dom元素中有多个同名的class选择器，vue作用于找到的第一个class选择器
var vm =new Vue({
el:'.app'
});
3.el的值也可以是dom元素，写法如下
var vm = new Vue({
el:document.getElementById('#app')
})
温馨提示： el设置的dom元素不能是body标签，否则vue会报错，正确的设置的标签应该是body内部包含的子标签
3.data选项
1.data 的作用
指定设置当前vue实例所使用的数据，data的值可以是一个对象
2.访问data中的数据可以通过vue实例对象.属性名去访问数据，vue的实例代理data对象上的所有属性，因此vm.msg 等价于vm.$data.msg
3.特点：响应式数据（当数据发生变化的时候，视图中的数据会自动发生变化）
4. method选项
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()方法
3.方法中的this指的是当前vue实例对象
注意：不推荐使使用箭头函数，因为箭头函数this指向的不是vm实例,如下
var vue = new Vue({
el:'#app',
data:{
msg:'hi'
},
methods:{
fn1:() => {
console.log('Vm');
}
}
});
4.在视图中可以通过@click=fn1()调用方法
总结
学习vue中el 、data 、methods属性的具体用法
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)