0102引包、留坑、实例化

最新推荐文章于 2024-04-18 16:13:22 发布

wnashi_万石

最新推荐文章于 2024-04-18 16:13:22 发布

阅读量103

点赞数

分类专栏： 002_Vue零基础

本文链接：https://blog.youkuaiyun.com/w_wangewanbuhuidege/article/details/114334800

版权

002_Vue零基础专栏收录该内容

14 篇文章

订阅专栏

001_0102引包、留坑、实例化(h3)

引包
- 确认已经下载了node,然后执行命令 npm install vue
- 页面引入刚下载的包
```
<script type="text/javascript" src="vue.js"></script>
```
留坑即留一个vue模板代替的地方或者是vue代码对其生效的地方
实例化即启动Vue
- 启动： new Vue({el:目的地,template:模板内容});实例化传入的是一个对象options
- options
  - 目的地 el 对应上面留坑的坑位，可通过id名，类名，标签名来查找。方式和jq一样
  - 内容 template
  - 数据 data 值为函数形式也可是对象，但是都是用函数，因为用的函数最后也是return
    一个对象
插值表达式{{ }}
- 插值表达式内填入data里面的变量即可在页面取到变量值{{ data里的变量 }}

源代码

<html>
<head>
	<title></title>
</head>
<body>
	<!-- 002 留坑 -->
	<div id="app"></div>


	<!-- 001 引包 -->
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		// 003 实例化启动vue
		new Vue({
			/* ---------------------------------------------------- */
			el:'#app',
			/*
				options one 目的的，可以识别类名、id名和标签名，
				如果做到极致优化可以直接用document.getElementById获取
			*/
		   /* ---------------------------------------------------- */
			template:`     
			<div>
				<div>我这里是模板内容{{ msg_dl }}</div>
				<div>111</div>
			</div>
			`,
			//options two 模板内容,根节点只能有一个
			//插值表达式{{}}内填入data里面的变量即可在页面取到变量值{{ data里的变量 }}
			/* ---------------------------------------------------- */
/* 			data:function(){
				return {
					msg_dl:'Hello Vue!'
				}
			}, */
			data(){
				return {
					msg_dl:'Hello Vue!'
				}
			}
			//options three 数据 data
			/* ---------------------------------------------------- */
		})
	</script>
</body>
</html>

浏览器界面