1. 先展示测试文件内容
（1）html文件
<!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="demo">
<h1>Hello，{{name}}</h1>
</div>
<script type="text/javascript" >
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'小明'
}
})
</script>
</body>
</html>
（2）引入vue.js文件——官网文件
2. 解析语法
（1）插值语法
- 功能：解析标签体内容。
- 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
- 注意区分：js表达式 和 js代码(语句)
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? ‘a’ : ‘b’
2.js代码(语句)
(1). if(){}
(2). for(){}
（2）el
语法：值通常为css选择器字符串。（用" "包裹css的三个选择器（id选择器、class选择器、标签选择器））
作用：用于指定当前Vue实例为哪个容器服务（用于连接vue实例和div等容器）
（3）div容器和vue实例连接步骤：
1）代码从上至下，读取到el，
2）然后扫描div容器的内容，找插值语法{{js表达式}}
3）看vue实例中的data是否有对应的js表达式，
4）有的话，用data中的内容替换{{}}插值语法中的内容！
3. 注意
- 从div容器和vue实例连接步骤可看出，div容器中若有插值语法，要放在创建vue实例之前
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
