代码编织梦想

data与el的2种写法

                    1.el有2种写法

                                    (1).new Vue时候配置el属性。

                                    (2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值。

                    2.data有2种写法

                                    (1).对象式

                                    (2).函数式

                                    如何选择:目前在根组件中哪种写法都可以,使用到子组件时,data必须使用函数式,否则会报错。

                    3.一个重要的原则:

                                    由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el与data的两种写法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>你好,{{name}}</h1>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//el的两种写法
		/* const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'世界'
			}
		})
		console.log(v)
		v.$mount('#root') //第二种写法 */

		//data的两种写法
		new Vue({
			el:'#root',
			//data的第一种写法:对象式
			/* data:{
				name:'世界'
			} */

			//data的第二种写法:函数式
			data(){
				console.log(this) //此处的this是Vue实例对象 如果使用箭头函数this将指向window代码将会出错
				return{
					name:'世界
				}
			}
		})
	</script>
</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_54527592/article/details/119083681

关于html5中自定义属性data-*的总结-爱代码爱编程

一、关于html元素的特性 1.html元素都存在一些标准的特性: id 元素在文档中的唯一标识符title 有关元素的附加说明信息,一般通过工具提示条显示出来lang 元素内容的语言代码,很少使用dir 语言的方向,很

vue element使用icon图标教程详解(第三方)_前端kk的博客-爱代码爱编程

element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下 对于我们来说,首选的当然是阿里icon库 教程: 1.打开阿里icon,注册 >登录>图标管理>我的项目   图标管理>我的项目,点进去 新建项目   新建项目 项目名称随便写。前缀注意,不要跟el

data-id 和 id 的区别 data-id 的样式写法_zeropoint零点的博客-爱代码爱编程_css data-id

id是选择器 data-id只是行内存放数据的一个标签,跟input里面的value作用是一样的 同时在HTML5 中增加了一项新功能是 自定义数据属性 ,也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放。 例如: <style type="text/css">

vue element项目引入icon图标_想想就很棒的博客-爱代码爱编程

为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库.因为阿里巴巴海量的图标,所以决定

vue学习(二) vue element使用第三方icon图标教程详解_炫爱小七的博客-爱代码爱编程

Vue Element使用第三方icon图标教程详解 原帖1.打开阿里icon,注册 >登录>图标管理>我的项目>新建项目 原帖 链接: https://www.jb51.net/

element-ui组件(二)icon 图标_究极死胖兽的博客-爱代码爱编程

Element-Ui组件(二)Icon 图标 本文参考Element官方文档: http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标

element-card用法总结_spur_man的博客-爱代码爱编程_el-card 颜色

大神请移步,菜鸟可以参考一下。 在项目中,利用el-card实现了一个类似通知栏的功能,顺便总结了一些细节问题。老规矩,先上代码: <el-card> <div slot="heade

element-ui组件之数据data_法克__的博客-爱代码爱编程_element ui 组件表头数据绑定:data数据的几种写法

Element-UI组件之数据Data Table 表格基础表格带斑马纹表格带边框表格带状态表格固定表头固定列固定列和表头流体高度多级表头单选多选排序筛选自定义列模板展开行树形数据与懒加载自定义表头表尾合计行合并行或

Vue实例以及el-data使用介绍-爱代码爱编程

Vue实例以及el-data使用介绍 Vue实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的;var vm = new Vue({ //选项 参数 }) Vue选项 el提供一个在页面上已经存在的DOM元素作为Vue实例的挂载目标; 可以是CSS选择器, 也可以是一个HTMLElement实例;元素可以用vm.$e

element-ui_el-card-卡片-爱代码爱编程

element-ui_el-card-卡片 目录 文章目录 1、简介2、使用2.1、常用属性2.2、效果图源码***后记*** : 内容 1、简介 一种卡片容器。 应用场景:用于立体,有层次感的容器效果图1-1:2、使用 2.1、常用属性 el-card属性名类型可接受值默认描述headerstring--字符串

$refs,$el,$data,$options区别及用法-爱代码爱编程

1.$refs 作用跟jq的获取dom元素$一样有三种用法: 1.ref加在普通的元素上,用this.$refs.(ref值)获取到的是dom元素 2.ref加在子组件上,用this.$refs.(ref值)获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值).方法()就可以使用了。 3.如何利用v-for和

vue中data的两种写法-爱代码爱编程

vue中的data是写为对象好还是函数好 data为对象的写法data为函数的写法组件中访问data组件的data属性是一个对象的情况会访问不到data中的数据组件的data属性必须是一个函数且返回一个对象为什么组件的data属性必须是一个函数且返回一个对象 data为对象的写法 data:{ message: '此时mustache

java图表数据显示_【JavaWeb+Echarts+EL表达式】用图表形式展示数据-爱代码爱编程

1. Echarts环境配置 选择需要的,然后等待Build完成之后,就会自动弹出下载框啦! 把下载好的js放在web目录下~ 然后在对应的jsp内导入噢~ 2.Echarts代码 pageEncoding="UTF-8"%>Insert title here // 基于准备好的dom,初始化echarts实例 var m

04 data与el的2种写法-爱代码爱编程

data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 (2).先创建Vue实例,随后再通过vm.$mount(’#root’)指定el的值。 2.data有2种写法 (1).对象式 (2).函数式 如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。 3.一个重要的原则: 由Vue管理的

[vue] el与data的两种写法-爱代码爱编程

data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 new Vue({ el:'#root', //第一种写法 data:{ name:'尚硅谷' } }) (2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值。 const v = new Vue({ d

vue对象中data的几种写法-爱代码爱编程

4、vue对象中data的几种写法: 1)、直接用{} 一个object,在object里面写上属性(简单明了,直接进行操作) new vue({ el:"", data:{ name:"", age:"" } }) 2)、使用函数返回一个object对象(适用于组件传值,以及在返回之前进行一

vue中el与data的两种写法_el :data绑定两种-爱代码爱编程

data与el的两种写法             1.el有两种写法                      (1).new Vue时配置el属性 例: new Vue({             el:'#root',             data:{                 name:'尚硅谷'