首页 > 其他分享 >vue基础用法-初步使用vue

vue基础用法-初步使用vue

时间:2023-05-31 23:55:09浏览次数:37  
标签:username vue vm 用法 初步 实例 data 页面

1.基本使用步骤

  1. 导入vue.js的script脚本文件
  2. 在页面中声明一个将要被vue所控制的DOM区域
  3. 创建vm实例对象(vue实例对象)
<!DOCTYPE html>
<html lange="en">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 希望 Vue 能够控制下面的这个div,帮我们在把这个数据填充到 div 内部 -->
		<div id="app">{{username}}</div>

		<!-- 1.导入Vue的库文件,在weindow全局就有了Vue这个构造函数 -->
		<script src="lib/vue-2.6.12.js"></script>
		<!-- 2.创建Vue的实例对象 -->
		<script>
			//创建Vue的实例对象
			const vm = new Vue({
				// el 属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器
				el: '#app',
				// data对象就是要渲染到页面上的数据
				data: {
					username: 'zhangsan'
				}
			})
		</script>
	</body>
</html>

标签:username,vue,vm,用法,初步,实例,data,页面
From: https://www.cnblogs.com/yang-young-young/p/17447719.html

相关文章

  • Font-AweSome在Vue中的使用
    Font-AweSome在Vue中的使用yarnaddfont-awesome或者npmifont-awesome-S在main.js中引入import'font-awesome/css/font-awesome.min.css'Vue中使用<iclass="fafa-camera-retro"></i> ......
  • Canvas API初步学习
    1.字体 在canvas中最常见的字体表现形式有填充字体和漏空字体。   漏空字体用方法:strokeText(Text,left,top,[maxlength]);  填充字体用方法:fillText(Text,left,top,[maxlength]);上面的两个方法的最后一个参数是可选的,四个参数的含义分为是:需绘制的字符串,绘制到画布中时......
  • Vue2实现双向数据绑定原理
    Vue2.x采用数据劫持结合发布订阅模式(PubSub模式)的方式,通过Object.defineProperty来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。当把一个普通Javascript对象传给Vue实例来作为它的data选项时,Vue将遍历它的属性,用Object.defineProp......
  • DATA_FORMAT用法
     定义和用法DATE_FORMAT()函数用于以不同的格式显示日期/时间数据。语法DATE_FORMAT(date,format)date参数是合法的日期。format规定日期/时间的输出格式。可以使用的格式有:格式描述%a缩写星期名%b缩写月名%c月,数值%D带有英文前缀的月中的天%......
  • VUE
    一、Vue程序初体验学习源:动力节点老杜课程1.1下载并安装vue.js第一步:打开Vue2官网,点击下图所示的“起步”:https://v2.cn.vuejs.org/第二步:继续点击下图所示的“安装”第三步:在“安装”页面向下滚动,直到看到下图所示位置:第五步:安装Vue:使用script标签引入vue.j......
  • Python中的join()函数和split()函数的用法
    题目:CFUltra-FastMathematician 题意:给两个长度相等的0,1字符串,在相同的位置的两个字符不同就输出1,否则输出0.比如:10101000100101就输出:1110001代码:print''.join("10"[i==j]fori,jinzip(raw_input(),raw_input()))join()函数的用法就是把一个list中所有的串按照你定义的分隔......
  • vue-route路由meta对象参数说明
    /***路由meta对象参数说明*meta:{*title:菜单栏及tagsView栏、菜单搜索名称(国际化)*isLink:是否超链接菜单,开启外链条件,`1、isLink:true2、链接地址不为空`*isHide:是否隐藏此路由*activeMenu菜单高亮(详......
  • 在 nginx 服务器上发布vue项目 步骤与配置
    1.在vscode中使用yarnbuild:prod进行vue项目的发布2.进入发布文件3.下载nginx的windows版https://nginx.org/en/download.html4.将发布好的文件放入nginx解压后的html文件夹中5.修改nginx的配置文件打开nginx的配置文件配置完成使用命令打开nginx至此发布......
  • 负载均衡集群ipvsadm命令及基本用法
     ipvsadm是LVS在应用层的管理命令,我们可以通过这个命令去管理LVS的配置。需要使用yum单独安装。基本用法:ipvsadmCOMMAND[protocol]service-address        [scheduling-method][persistenceoptions]ipvsadmcommand[protocol]service-address  ......
  • HTML 全屏水印 vue 全屏水印
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>水印</title><style>#water-div{pointer-events:none;position:fixed;top:0;left:0;right:0;bottom:0;}.mask_div{pointer-......