引入Vue
基本的HTML代码这里就不再赘述
在上一篇文中提到了安装Vue，也就是下载开发版或生产版的vue.js
例如：将下载好的js文件放到根目录的js文件夹中，引入Vue的代码就为
<script type="text/javascript" src="../js/vue.js"> </script><!-- 引入Vue-->在实际生产环境中，可能为了追求访问速度或减轻服务器压力会将js文件放到cdn，再引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>准备好一个容器
这里使用一个div 并将id命名为root，以此来构建一个容器
<div id="root">
</div>创建Vue实例
要想Vue工作起来，就必须创建一个Vue实例，这个实例与上面构建的容器相对应
使用new Vue 创建Vue实例
el用于指定为哪个容器服务，刚刚我们创建的容器div的id为root 所以这里写#root
data用于存储数据
<script type="text/javascript">
// 创建Vue实例
new Vue({
el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串
data:{
//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
}
})
</script>实例中的data
实例中的data用于存储数据，也就是为我们刚刚的root容器提供数据
假设 此时我们的容器代码为
<div id="root">
<h1>hello {{text}}</h1>
</div>这里text会自动替换为创建的vue实例中data里的text，所以我们只需要在data中加上text即可，例如
<script type="text/javascript">
// 创建Vue实例
new Vue({
el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串
data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
text:"world"
}
})
</script>运行结果：
如果我们需要修改text的值，只需要在实例的data中进行修改
并且在整个容器中任意位置使用{{text}}都可以引用data里的text值（这里的概念有点像变量）
总结
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
- root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
- root容器里的代码被称为【Vue模板】
- Vue实例和容器是一一对应的；
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用
- {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新
注意区分js表达式和js代码（语句）
- 表达式：一个表达式会生成一个值 ，可以放在任何一个需要值的地方。
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b' - js代码（语句）
(1). if (){}
(2). for(){}