1.2 初识Vue
1.2.1 引入js文件
进入官网——安装文档https://cn.vuejs.org/v2/guide/installation.html
根据自己的需求，选择开发版本或是生产版本下载。
官网明确指出，如果对于制作原型或学习需要，你可以这样使用cdn来使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初始vue</title> </head> <body> <div id="root"> <h1>Hello, World!</h1> </div> </body> </html>
这样的代码我们已经十分熟悉了。为了能让Hello, World!输出可以动态变化，我们引入vue
首先引入刚刚下载好的vue.js
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
// 创建一个Vue的实例对象，并传入配置对象
new Vue({
el: '#root', // 用于指定当前vue实例为哪个容器服务，值是选择器字符串，选择的写法类似于JQuery
data: { // data是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的state
name: 'Vue'
}
})
</script>
<div id="root"> <h1>Hello, {{name}}</h1> </div>
1.2.3 小结
-
<div id="root">是一个容器，容器中写的不是原始html代码，而是vue的模板代码。
-
所谓模板代码，类似于React中的jsx，是html+js的混合体。
-
{{xxx}} xxx会自动读取data中的xxx属性