Vue学习02_创建第一个Vue项目

创建第一个Vue项目

在这里，使用到的编译器软件为Vscode：

首先在软件的项目目录（在这里我得目录是VueProject）里面新建两个文件夹：js与demo
其中js用于存放vue的js文件夹，demo用于存放所编写的程序代码：

1. 下载vuejs文件：
   进入vue官网：https://vuejs.org/v2/guide/installation.html进行下载，右键开发版，点击链接另存为：
   将其保存到js文件夹之中：
   
2. 创建网页：
   在demo文件夹内创建我们的第一个vue网页项目demo01.html：
   
3. 在网页中引用vuejs文件夹：

    <script src="../js/vue.js"></script>

4. 编写我们的第一个vue程序，在网页中简易输出hello world字样：
   el：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上

    <div id="app">{{message}}</div>
    <script>
        const app = new Vue({
            el: '#app',//用于挂载要管理的元素
            // 定义一些数据
            data: {
                message: 'Hello World！'
            }
        })
    </script>

运行结果：

5. 第二个vue实例：

    <div id="app">
        <p>{{name}}</p>
        <p>{{author}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',//用于挂载要管理的元素
            // 定义一些数据
            data: {
                name : '三国演义',
                author : '罗贯中',

            }
        })
    </script>

运行结果：

**vue的好处：**实现数据与html的分离，界面依旧可以使用html代码，数据直接在Javascript中定义，要什么拿什么，需要放在哪个位置随便放
当然，你也可以为网页增加标签样式：
示例代码：

    <div id="app">
        书名:<span style="color: cornflowerblue;">{{bookname}}</span>
        作者：<span>{{author}}</span>
    </div>
    <script>
        const app = new Vue({
            el: '#app',//用于挂载要管理的元素
            // 定义一些数据
            data: {
                bookname : '三国演义',
                author : '罗贯中',

            }
        })
    </script>

运行结果：

vue还有一个好处就是响应式，传统的数据修改，你需要先更改变量的值，再将变量重新赋值重新添加到div元素之中，但是vue不需要，数据改变，界面展示的数据自动发生改变：
实例：

数据改变，网页显示的内容也跟着发生改变
6.Vue的数组展示：v-for：
示例代码：

    <div id="app2">
        <ul>
            <li v-for="item in books">{{item}}</li>
        </ul>
    </div>
    <script>
        const app2 = new Vue({
            el: '#app2',
            data: {
                books: ['三国演义', '水浒传', '红楼梦', '西游记']
            }
        })
    </script>

运行结果：

由于Vue是响应式的，因此可以往数组里动态添加数据：