首页 > 其他分享 >初识Vue

初识Vue

时间:2023-03-24 20:46:00浏览次数:58  
标签:容器 Vue el 初识 vue 实例

vue是动态构建用户界面的渐进式JavaScript框架:作者是尤雨溪
Vue的特点
遵循MVVM模式
编码简洁,体积小,运行效率高,适合移动/PC端开发
它本身只关注UI,可以引入其它第三方库开发项目
与其他前端框架的联系:
借鉴 Angular 的模板和数据绑定技术
借鉴 React 的组件化和虚拟DOM技术

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>初识Vue</title>
	<!--引入Vue-->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 
		准备好一个容器 
		容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法
		root容器里的代码被称为vue模板
	-->
	<div id="root">
		<!-- 
			注意区分:js表达式和js代码(语句)
				1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方;
					(1). a
					(2). a+b
					(3). demo(1)
					(4). x === y ? 'a' : 'b'
				2.js代码(语句)
					(1). if(){}
					(2). for(){}

			{{xxx}}中要写js表达式,且xxx可以自动读取到1data中的所有属性;
			一旦data中的数据发生改变,那么模板中用到该数据的地方也1会自动更新
		 -->
		<h1>Hello,{{name.toUpperCase()}},{{address}},{{1+1}}</h1>

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

		//创建Vue实例(实例和容器一一对应)
		new Vue({
			el:'#root',//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串
			data:{//data中用于存储数据,数据供el所指定的容器去使用,值暂时先写成一个对象
				name:'at尚硅谷',
				address:'重庆哪个'
			}
		})

	</script>

</body>
</html>

标签:容器,Vue,el,初识,vue,实例
From: https://www.cnblogs.com/wjqblog/p/17253258.html

相关文章

  • vue3报错 Vue received a Component which was made a reactive object.
    报错信息如下:VuereceivedaComponentwhichwasmadeareactiveobject.Thiscanleadtounnecessaryperformanceoverhead,andshouldbeavoidedbymarkingthe......
  • vue/html 日期与时间戳互相转换
    1、将日期转换成时间戳lettime=parseInt(newDate().getTime()/1000);console.log(time)2、接口传过来的UTC日期和13位时间戳格式化constformateDate=(time......
  • Vue2
    一、前端MVVM模式及Axios异步通信1.什么是MVVMMVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Si......
  • 关于在 vue 3 和 vue router 中使用 transition 过渡动效的 mode 属性导致页面跳转空
    先放结论:不要在路由组件的template块中使用多个根标签,注释也不行。今天碰到一个奇葩的问题,后端告诉我说,进入特定页面后,跳转其他页面均会白屏,刷新后就会加载。一开始我......
  • 使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore
    打包Vue项目1.在Webstorm中打开Vue项目,在下面的Terminal中输入:npmrunbuild2.等待build完成,双击项目,进入菜单选择RevealinFinder,打开项目的真实目录3.找到dist目录,进入4......
  • vue全家桶进阶之路5:DOM文档对象模型
     一、DOM对象DOM,全称“DocumentObjectModel(文档对象模型)”,它是由W3C组织定义的一个标准。在前端开发时,我们往往需要在页面某个地方添加一个元素或者删除元素......
  • vue全家桶进阶之路4:NPM包
    NPM(NodePackageManager)是Node.js的包管理工具,用来安装各种Node.js的扩展。NPM是JavaScript的包管理工具,也是世界上最大的软件注册表。有超过60万个Jav......
  • 一文详解vue-cli2.0与vue-cli3.0之间的区别
    我们之所以介绍vue-cli2和vue-cli3的使用和区别,是因为VUE脚手架工具从vue-cli3版本开始,在项目结构等诸多方面开始与vue-cli2版本相比,有较大的优化与调整。因此,在学习和工......
  • SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图
    场景若依前后端分离版本地搭建开发环境并运行项目的教程:若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-在上面搭建架构的基础上,实现使用Ele......
  • SpringBoot+Vue+Echarts实现双柱体柱状图
    场景 若依前后端分离版本地搭建开发环境并运行项目的教程:若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-在上面搭建架构的基础上,实现使用E......