Vue第二讲 ---> 引包、留坑、实例化 、插值表达式{{}}

  1. 引包

    • 确认已经下载了node,然后执行命令 npm install vue (如需下载自己要的版本在vue后面加上@版本号)
    • 页面引入刚下载的包

    ​ <script type="text/javascript" src="vue.js"></script>

  2. 留坑 即留一个vue模板插入的地方或者是vue代码对其生效的地方

  3. 实例化 即启动Vue

    启动： new Vue({el:目的地,template:模板内容});实例化传入的是一个对象options

    • options
      • 目的地 el 对应上面留坑的坑位，可通过id名，类名，标签名来查找 。方式和jq一样
      • 内容 template
      • 数据 data 值为函数形式也可是对象，但是都是用函数，因为用的函数最后也是return一个对象

  4. 插值表达式{{ }}

    • 插值表达式内填入data里面的变量即可在页面取到变量值{{ data里的变量 }}

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				template: `<div>
					<div>这里是模板</div>
					<div>111</div>
				</div>`,
				date: function() {
					return {
						msg: "Hello Vue"
					}
				}
			})
		</script>
	</body>
</html>
posted @ 2020-03-26 21:23  xl4ng  阅读(274)  评论(0)  编辑  收藏  举报