vue：初识（概念、Vue初体验）

1、Vuejs

（1）渐进式

可以将vue作为应用的一部分嵌入其中，例如：在重构的时候可以一点一点的进行

（2）特点

解耦数据和视图

可复用的组件

前端路由技术

状态管理

虚拟DOM

2、Vuejs的安装

方式一：CDN引入（利用的是网络资源）

方式二：下载并引入

方式三：NPM安装

3、Vuejs初体验

（1）创建项目

（2）创建文件夹并将vuejs放入文件夹

（3）书写测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--去查询data里面的message-->
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script>
    <!--let定义的变量可以修改值/const定义的不可修改相当于常量-->
    const app=new Vue({
        el:"#app",//用于挂载要管理的元素
        data:{//定义数据
            message:"hello Vue"
        }
    })
</script>
</body>
</html>

（4）执行流程

创建一个Vue实例并传入一些options：{}
el属性决定了Vue对象挂载到哪一个元素上
data属性用于存储一些数据：数据可以是自定义的也可以来自服务器

（5）特点

以前利用js或jq开发是命令式编程：第一步、第二步... ...一步一步要非常清晰，Vue的编程范式是声明式范式，具体的内部实现不用关心

能够实现数据和显示的分离

响应式：当时据发生改变的时候界面会自动发生改变

4、列表展示

<body>
<div id="app">
    <ul>
        <li v-for="item in books">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",//用于挂载要管理的元素
        data:{//定义数据
            message:"hello Vue",
            books:["骆驼祥子","百年孤独","假如给我三天光明","水浒传","西游记"]
        }
    })
</script>
</body>

5、计数器

（1）普通方式

<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
                counter:0
        }
    })
</script>
</body>
</html>

（2）函数方式

<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
                counter:0
        },
        methods:{
            add:function () {
               console.log("加");//this代表当前对象
                this.counter++
            },
            sub:function () {
               console.log("减");
               this.counter--
            }
        }
    })
</script>
</body>