1、想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2、root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
3、3.root容器里的代码被称为[Vue模板] ;
4、Vue实例和容器是一一对应的;
5、真实开发中只有一个vue实例,并且会配合着组件一起使用;
6、{{xxx11中的xxx要写is表达式,且xxx可以自动读取到data中的所有属性;
7、一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新;
注意区分: js表达式 和 js代码(语句)
1.js表达式
一个表达式会产生一个值,可以放在任何一个需要值的地方:
例:(1). a (2). a+b (3). demo(1) (4). x===y ? 'a' : 'b'
2.js代码(语句)
例:(1). if(){} (2). for(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识vue</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>hello,{{name}}</h1>
<h1>hello,{{address}}</h1>
</div>
<script type="text/javascript">
const x = new Vue({
el:'#root',
data:{
name:'尚硅谷123',
address:'北京'
}
})
</script>
</body>
</html>