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>
1.2.2 初识
<!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>
这样我们就会获得一个Vue实例,那么我们创建一个Vue实例并进行配置。
<script type="text/javascript"> // 创建一个Vue的实例对象,并传入配置对象 new Vue({ el: '#root', // 用于指定当前vue实例为哪个容器服务,值是选择器字符串,选择的写法类似于JQuery data: { // data是存储数据的地方,为root容器提供数据,值为一个对象,相当于React中的state name: 'Vue' } }) </script>
根据vue的语法规则,使用双大括号来输出需要的变量。我们这里定义了一个名为name的变量,其值为vue。那么我们使用{{name}}来输出其值vue。
<div id="root"> <h1>Hello, {{name}}</h1> </div>
1.2.3 小结
-
<div id="root">是一个容器,容器中写的不是原始html代码,而是vue的模板代码。
-
所谓模板代码,类似于React中的jsx,是html+js的混合体。
-
{{xxx}} xxx会自动读取data中的xxx属性