目录
前提
1. 准备一个容器
2. 创建一个Vue实例
2.1 完整代码
3.注意事项
初始Vue：
1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2. 容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法
3. 容器里的代码被称为【Vue模板】
前提
从Vue官网下载
导入
<script src="" type="text/javascript"></script>1. 准备一个容器
-
<div id="root">
-
<h1>hello,{{name}}</h1>
-
</div>
2. 创建一个Vue实例
el :用于指定当前Vue实例为按个容器服务，值通常为css选择器字符串。
data：用于存储数据，数据供el所指定的容器去使用，值先暂定先写成一个对象。
-
new Vue({
-
el:'#root',
-
data: {
-
name:'lwh'
-
},
-
})
2.1 完整代码
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title></title>
-
<script src="" type="text/javascript"></script>
-
</head>
-
<body>
-
<div id="root">
-
<h1>hello,{{name}}</h1>
-
</div>
-
<script type="text/javascript">
-
new Vue({
-
el:'#root',
-
data: {
-
name:'lwh'
-
},
-
})
-
</script>
-
</body>
-
</html>
3.注意事项
表达式： 一个表达式会产生一个值，可以放在任何一个需要值得地方：
（1） a
（2） a+b
（3） demo（1）
（4） x===y ? 'a' : 'b'
1. 一个容器只能被一个Vue实例接管，容器与Vue实例是一一对应的。
2. {{ xxx }} 中的xxx要写 js 表达式，且xxx 可以自动读取到data中的所有属性。
2. 一旦data中的数据发生改变，那么模板中用到改数据的地方也会自动更新