Vue学习总结（二）——认识Vue.js

原创已于 2022-03-07 08:20:42 修改 · 403 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html5

于 2020-12-12 19:10:36 首次发布

Vue学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue.js的基本概念，包括其作为渐进式JavaScript框架的特点及如何通过简单的示例创建Vue实例来实现数据绑定、列表渲染及事件处理等功能。

1.Vue是一套用于构建用户界面的渐进式的JavaScript框架，什么是渐进式的呢？

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及生态系统是可以满足的。
比如Core+Vue+router+Vuex，也可以满足你各种各样的需求。

2.Vue有很多特点和Web开发中常见的高级功能

解耦视图额数据
可复用的组件（采用组件化模式，提高代码复用率，且让代码更好维护。）
前端路由技术
状态管理
虚拟DOM （使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。）
声明式编码，让编码人员无需直接操作DOM，提高开发效率。

3.HelloVue.js初体验

见下方代码，创建了一个vue对象，创建vue对象的时候，传入了一些options:{}

{}中包含了el属性，该属性决定了这个vue对象挂载到哪个元素上，很明显，我们这里挂载到了id为app的元素上。
{}中包含了data属性：该属性中通常会存储一些数据：

（1）这些数据可以是直接定义出来的，类似我们如下的代码。

（2）也可能是来自网络，从服务器加载的。

浏览器执行代码的流程，按顺序执行，先显示出对应的HTML，后面创建vue实例并且对原HTML进行解析和修改。是可以做到响应式的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script>
    // let用来定义变量
    // const用来定义常量
    // 编程范式：声明式编程
    const app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: { // 定义数据
            message:'你好，世界'
        }
    })

    // 传统命令式编程步骤
    // 1.创建div元素，设置id属性
    // 2.定义一个变量叫message
    // 3.将message变量放在前面的div元素中展示
</script>
</body>

4.Vue列表展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            movies: ['海贼王','蜡笔小新','我爱中国']
        }
    })
</script>
</body>

执行代码结果如下：

打开开发者模式，使用命令app.movies.push("建国大业")为movies数组增加一条数据：

页面的电影列表自动刷新增加了一条。

重点：可以看出vue.js是响应式的。也就是说，当我们数组中的数据发生改变时，界面会自动改变。

5.计数器案例：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{text}} {{counter}}</h2>
    <!-- 可以直接在click事件中定义简单实现，但是不建议这么做。
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button> -->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
    <!--  通常写法是下面这样的，@ 是v-on的语法糖
    <button @click="add">+</button> -->
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            text: '当前计数：',
            counter: 0
        },
        methods: {
            add: function() {
                this.counter ++;
                console.log('add被执行');
            },
            sub:function() {
                this.counter --;
                console.log('sub被执行');
            }
        }
    })
</script>
</body>

实现效果如下：