您现在的位置是:首页 > Javascript
当前栏目
vue el 和 data的两种写法
2023-02-25 18:16:27 时间
这是我参与8月更文挑战的第30天,活动详情查看:8月更文挑战
el
第一种写法
我们前几篇文章都是通过 el 使 实例和容器进行绑定的。
<div id="root">
<h1>Hello,{{name}}</h1>
</div>
<script>
// 创建vue实例
new Vue({
el: '#root',
//写成对象
data: {
name: '孙尚香',
}
})
</script>
第二种写法
我们现在不用 实例中的el了。我们先打印一下vue实例来看一下
const newVue = new Vue({
data: {
name: '孙尚香',
}
})
console.log(newVue)
所有红色框中的带 $
的属性都是给程序员使用的。不带 $
的都是底层使用的。
我们现在要用的东西不在实例身上,而在实例的缔造者身上,也就是它原型对象上的方法。如下图
newVue.$mount('#root')
$mount
也能指定容器。
data
第一种写法
对象式
data:{
name:'yyds'
}
第二种写法
函数式
并且这个函数要有返回值。在组件中只能使用函数式的写法。
new Vue({
el: 'root',
data: function () {
return {
name: '孙尚香',
}
}
})
? 这个函数是我们调用的吗?
不是,是Vue的实例调用的。那我们看一下这个函数当前的this指向。
new Vue({
el: 'root',
data: function () {
console.log(this,"this")
return {
name: '孙尚香',
}
}
})
可以看到当前的this指向是Vue的实例
? 我们把普通函数写法换成箭头函数
new Vue({
el: 'root',
data :()=> {
console.log(this,"this")
return {
name: '孙尚香',
}
}
})
可以发现当前的this指向变成了 window。因为箭头函数没有自己的this,它会找到它外层的this。
我们不能使用箭头函数
最后
- el的两种写法:
new Vue 时配置el属性
先创建vue实例,随后通过vm.$mount('#root')绑定el的值
- data的两种写法
对象式
函数式 组件写法必须使用这个,否则报错
- 一个重要的原则
由Vue管理的函数,一定不要写箭头函数,一旦写了,this 就不再是Vue实例了。
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项