Vue | （一）Vue核心（上） | 尚硅谷Vue2.0+Vue3.0全套教程-????初识Vue

关于官网（与视频p3已略有出入）：文档指南，API查字典，互动指南，示例…
Vue开发者工具安装
vscode插件安装，提效

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
root容器里的代码被称为Vue模板；
Vue实例和容器是一一对应的，容器设置好模板，实例给定数据；
真实开发中只有一个Vue实例，并且会配合着组件一起使用；
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root">
			<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
		</div>

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

			//创建Vue实例
			new Vue({
				//el用于指定当前Vue实例为哪个容器服务，这里用id选择器绑定，其他选择器也一样
				el:'#root', 
				//data存储数据，数据供el所指定的容器去使用
				//值我们暂时先写成一个对象。
				data:{
					name:'lalayouyi',
					address:'你好呀'
				}
			})

		</script>
	</body>
</html>

在这里插入图片描述

秒客网

Vue | （一）Vue核心（上） | 尚硅谷Vue2.0+Vue3.0全套教程-????初识Vue

相关文章