Vue.js 2——基础篇（1）

已于 2023-09-04 10:07:47 修改
阅读量560 收藏 2
点赞数
分类专栏： 前端 文章标签： 前端 html vue.js javascript 前端框架 开发语言
于 2023-08-08 09:08:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49171365/article/details/130538586
版权

目录

资源：🌟

一、初识Vue.js👋  

Vue.js是什么？🙇

 MVVM模式 ✍

Vue.js有什么不同 ☔

如何使用Vue.js?  ☁

传统的前端开发模式  ☀

Vue.js的开发模式 🗻

二、数据绑定和第一个Vue应用 🗼

Vue实例和数据绑定 🗽

实例和数据 🗿

生命周期 🦁

插值与表达式 ⌛

过滤器 ☕

指令与事件 ⚡

语法糖 🍬

三、计算属性 🌄

什么是计算属性 🌈

计算属性的用法 🍄

计算属性缓存 🍉

资源：🌟

 Vue 2.X 官网：Vue.js (vuejs.org)

深入理解Vue.js实战 (godbasin.com)

一、初识Vue.js👋  

Vue.js是什么？🙇

 MVVM模式 ✍

        与知名前端框架 Angular、Ember 等一样，Vue.js 在设计上也使用 MVVM（Model-View-View Model）模式。 MVVM 模式是由经典的软件架构 MVC 衍生来的。当 View（视图层）变化时，会自动更新到 ViewModel（视图模型），反之亦然。View 和 ViewModel 之间通过双向绑定（data-binding）建立联系，如图所示：

        在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。

        ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

        ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理。

Vue.js有什么不同 ☔

有关Vue与其他框架的区别可见官网描述：

对比其他框架 — Vue.js (vuejs.org)

如何使用Vue.js?  ☁

        每一个框架的产生都是为了解决某个具体的问题。在正式开始学习 Vue.js 前，我们先对传统 前端开发模式和 Vue.js 的开发模式做一个对比，以此了解 Vue.js 产生的背景和核心思想。

传统的前端开发模式  ☀

Vue.js的开发模式 🗻

        Vue.js 是一个渐进式的 JavaScript 框架，根据项目需求，你可以选择从不同的维度来使用它。 如果你只是想体验 Vue.js 带来的快感，或者开发几个简单的 HTML 5 页面或小应用，你可以直接 通过 script 加载 CDN 文件，例如

        对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

       对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

        两种版本都可以，如果你不太了解各版本的差别，建议直接使用最新的稳定版本。当然，你 也可以将代码下载下来，通过自己的相对路径来引用。引入 Vue.js 框架后，在 body 底部使用 new Vue()的方式创建一个实例，这就是 Vue.js 最基本的开发模式。现在可以写入以下完整的代码来快 速体验 Vue。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 示例</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="book in books">{{ book.name }}</li>
  </ul>
</div>
<script src="vue.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      books: [
        { name: '《Vue.js 实战》' },
        { name: '《JavaScript 语言精粹》' },
        { name: '《JavaScript 高级程序设计》' }
      ]
    }
  })
</script>
</body>
</html>

 

二、数据绑定和第一个Vue应用 🗼

        学习任何一种框架，从一个 Hello World 应用开始是最快了解该框架特性的途径，我们先从一 段简单的 HTML 代码开始，感受 Vue.js 最核心的功能。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 示例</title>
</head>
<body>
<div id="app">
  <input type="text" v-model="name" placeholder="你的名字">
  <h1>你好，{{ name }}</h1>
</div>
<script src="vue.min.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      name: ''
    }
  })
</script>
</body>
</html>

        这是一段简单到不能再简单的代码，但却展示出了 Vue.js 最核心的功能：数据的双向绑定。 在输入框输入的内容会实时展示在页面的 h1 标签内，如图所示 ：

Vue实例和数据绑定 🗽

实例和数据 🗿

生命周期 🦁

插值与表达式 ⌛

过滤器 ☕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
     {{ date | formatDate }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //在月份、日期、小时等小于 10 时前面补 0
    var padDate = function(value) {
    return value < 10 ? '0' + value : value;
    };
    var app = new Vue({
        el: '#app',
        data: {
            date: new Date()
        },
        filters: {
            formatDate: function (value) { // 这里的 value 就是需要过滤的数据
                var date = new Date(value);
                var year = date.getFullYear();
                var month = padDate(date.getMonth() + 1);
                var day = padDate(date.getDate());
                var hours = padDate(date.getHours());
                var minutes = padDate(date.getMinutes());
                var seconds = padDate(date.getSeconds());
                //将整理好的数据返回出去
                return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes
                    + ':' + seconds;
            }
        },
        mounted: function () {
            let _this = this; // 声明一个变量指向 Vue 实例 this，保证作用域一致
            this.timer = setInterval(function() {
                _this.date = new Date(); //修改数据 date
            }, 1000);
        },
        beforeDestroy: function () {
            if (this.timer) {
                clearInterval(this.timer); //在 Vue 实例销毁前，清除我们的定时器
            }
        }
    })
</script>
</body>
</html>

 过滤器应当用于处理简单的文本转换，如果要实现更为复杂的数据变换，应该使用计算属性。

指令与事件 ⚡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClose: function () {
                this.show = false;
            }
        }
    })
</script>
</body>
</html>

 

         在 button 按钮上，使用 v-on:click 给该元素绑定了一个点击事件，在普通元素上，v-on 可以监 听原生的 DOM 事件，除了 click 外，还有 dblclick、keyup、mousemove 等。表达式可以是一个方 法名，这些方法都写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向的是当 前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数据，如示例中的 this.show = false; 把数据 show 修改为了 false，所以点击按钮时，文本 p 元素就被移除了。 表达式除了方法名，也可以直接是一个内联语句，上例也可以改写为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="show = false">点击隐藏</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            show: true
        }
    })
</script>
</body>
</html>

        如果绑定的事件要处理复杂的业务逻辑，建议还是在 methods 里声明一个方法，这样可读性更强也好维护。 Vue.js 将 methods 里的方法也代理了，所以也可以像访问 Vue 数据那样来调用方法： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClose: function () {
                this.close();
            },
            close: function () {
                this.show = false;
            }
        }
    })
</script>
</body>
</html>

        在 handleClose 方法内，直接通过 this.close()调用了 close()函数。在上面示例中是多此一举的， 只是用于演示它的用法，在业务中会经常用到，例如以下几种用法都是正确的： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-if="show">{{ content }}</p>
    <button v-on:click="hideText">点击隐藏</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            show: true,
            content: '这是一段修改后的文本'
        },
        methods: {
            hideText: function() {
                this.show = false;
            }
        }
    });
</script>
</body>
</html>

         在此基础上继续完成，“再点击一次按钮点击隐藏按钮变成点击恢复的按钮，并且恢复隐藏的内容”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-if="show">{{ content }}</p>
    <button v-on:click="toggleText">{{ buttonText }}</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            show: true,
            content: '这是一段修改后的文本',
            buttonText: '点击隐藏'
        },
        methods: {
            toggleText: function() {
                this.show = !this.show;
                this.buttonText = this.show ? '点击隐藏' : '点击恢复';
            }
        }
    });
</script>
</body>
</html>

 

语法糖 🍬

 总结下来主要有以下几个指令有简写的操作：

v-bind 的简写方式是 :，用于动态绑定属性。例如：

<!-- 完整写法 -->
<img v-bind:src="imageUrl">

<!-- 简写 -->
<img :src="imageUrl">

v-on 的简写方式是 @，用于绑定事件。例如：

<!-- 完整写法 -->
<button v-on:click="handleClick">

<!-- 简写 -->
<button @click="handleClick">

v-for 的简写方式是 :key，用于列表渲染中指定唯一的 key。例如：

<!-- 完整写法 -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

<!-- 简写 -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

但需要注意的是 v-bind 和 v-model 在用法和作用上有一些区别 ：

  1. 用途：v-bind 主要用于动态绑定属性，将 Vue 实例中的数据绑定到 HTML 元素的属性上。它可以实现一次性的数据绑定，使 HTML 元素的属性值随着 Vue 实例数据的变化而更新。而 v-model 则是用于双向数据绑定，不仅可以将 Vue 实例中的数据绑定到 HTML 元素的属性上，还可以监听表单元素的值变化并将其同步到 Vue 实例的数据中。

  2. 语法：v-bind 使用冒号 : 进行简写，后面跟随需要绑定的 HTML 属性名称和绑定的表达式，例如 :src="imageUrl"。而 v-model 则直接使用 v-model 指令，并在其中指定一个 Vue 实例中的数据属性，例如 v-model="message"。

  3. 应用范围：v-bind 可以用于任何 HTML 元素的任意属性上，通过动态绑定可以实现灵活的属性设置。而 v-model 主要适用于表单元素，如文本输入框、复选框、单选按钮等，用于实现表单数据的双向绑定。

        综上所述，v-bind 用于动态绑定属性，实现数据与 HTML 元素属性之间的单向绑定；而 v-model 则是用于双向数据绑定，将数据与表单元素的值之间进行同步更新。两者在功能和应用场景上有所差异，需要根据具体需求来选择使用。

 

三、计算属性 🌄

        模板内的表达式常用于简单的运算，当其过长或逻辑复杂时，会难以维护，本章的计算属性 就是用于解决该问题的。

什么是计算属性 🌈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{ reversedText }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: '123,456'
        },
        computed: {
            reversedText: function () {
                // 这里的 this 指向的是当前的 Vue 实例
                return this.text.split(',').reverse().join(',');
            }
        }
    })
</script>
</body>
</html>

 所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果。

计算属性的用法 🍄

        在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结 果就可以。除了上例简单的用法，计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据 变化，计算属性就会重新执行，视图也会更新。例如，下面的示例展示的是在购物车内两个包裹的 物品总价：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    总价：{{ prices }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            package1: [
                {
                    name: 'iPhone 7',
                    price: 7199,
                    count: 2
                },
                {
                    name: 'iPad',
                    price: 2888,
                    count: 1
                }
            ],
            package2: [
                {
                    name: 'apple',
                    price: 3,
                    count: 5
                },
                {
                    name: 'banana',
                    price: 2,
                    count: 10
                }
            ]
        },
        computed: {
            prices: function () {
                let prices = 0;
                for (let i = 0; i < this.package1.length; i++) {
                    prices += this.package1[i].price * this.package1[i].count;
                }
                for (let i = 0; i < this.package2.length; i++) {
                    prices += this.package2[i].price * this.package2[i].count;
                }
                return prices;
            }
        }
    })
</script>
</body>
</html>

        当 package1 或 package2 中的商品有任何变化，比如购买数量变化或增删商品时，计算属性 prices 就会自动更新，视图中的总价也会自动变化。 每一个计算属性都包含一个 getter 和一个 setter，我们上面的两个示例都是计算属性的默认用 法，只是利用了 getter 来读取。在你需要时，也可以提供一个 setter 函数，当手动修改计算属性的 值就像修改一个普通数据那样时，就会触发 setter 函数，执行一些自定义的操作，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    姓名：{{ fullName }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            firstName: 'Jack',
            lastName: 'Green'
        },
        computed: {
            fullName: {
                // getter，用于读取
                get: function () {
                    return this.firstName + ' ' + this.lastName;
                },
                // setter，写入时触发
                set: function (newValue) {
                    var names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                }
            }
        }
    });
</script>
</body>
</html>

        当执行 app.fullName = 'John Doe'; 时，setter就会被调用，数据 firstName 和 lastName 都会相对 更新，视图同样也会更新。 绝大多数情况下，我们只会用默认的getter方法来读取一个计算属性，在业务中很少用到setter， 所以在声明一个计算属性时，可以直接使用默认的写法，不必将 getter 和 setter 都声明。 计算属性除了上述简单的文本插值外，还经常用于动态地设置元素的样式名称 class 和内联样 式 style，在下章会介绍这方面的内容。当使用组件时，计算属性也经常用来动态传递 props，这也 会在第 7 章组件里详细介绍。 计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性；二是 计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据，例如： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app1"></div>
<div id="app2">
    {{ reversedText }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    var app1 = new Vue({
        el: '#app1',
        data: {
            text: '123,456'
        }
    });
    var app2 = new Vue({
        el: '#app2',
        computed: {
            reversedText: function () {
                // 这里依赖的是实例 app1 的数据 text
                return app1.text.split(',').reverse().join(',');
            }
        }
    })
</script>
</body>
</html>

        这里我们创建了两个 Vue 实例 app1 和 app2，在 app2 的计算属性 reversedText 中，依赖的是 app1 的数据 text，所以当 text 变化时，实例 app2 的计算属性也会变化。这样的用法在后面章节介绍的组件和组件化里会用到，尤其是在多人协同开发时很常用，因为你写的一个组件所用得到的数据需要依赖他人的组件提供。随着后面对组件的深入会慢慢意识到这点，现在可以不用太过了解。

计算属性缓存 🍉

        在上一章介绍指令与事件时，你可能发现调用 methods 里的方法也可以与计算属性起到同样的 作用，比如本章第一个示例可以用 methods 改写为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 注意，这里的 reversedText 是方法，所以要带()-->
    {{ reversedText() }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: '123,456'
        },
        methods: {
            reversedText: function () {
                // 这里的 this 指向的是当前 Vue 实例
                return this.text.split(',').reverse().join(',');
            }
        }
    })
</script>
</body>
</html>

        没有使用计算属性，在 methods 里定义了一个方法实现了相同的效果，甚至该方法还可以接受参数，使用起来更灵活。既然使用 methods 就可以实现，那么为什么还需要计算属性呢？原因就是 计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以 text 只要不改变，计算属性也就不更新，例如：

computed: { 
 now: function () { 
 return Date.now(); 
 } 
}

        这里的 Date.now()不是响应式依赖，所以计算属性 now 不会更新。但是 methods 则不同，只要重新渲染，它就会被调用，因此函数也会被执行。 使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用 计算属性，除非你不希望得到缓存。

白白白鲤鱼
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js实战案例
s8459的博客
09-18 665
姓名: {{name}} 年龄: {{age}}
Vue2学习（三）：Vue2.js基础
阿标的博客
07-02 701
自己学习的过程中所记录的一些学习过程
Vue.js 快速入门实战
最新发布
努力是为了站在万人之中，成为别人的光
06-12 2万+
通过这个简单的待办事项列表应用，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和列表渲染。Vue.js 的设计使得它非常易于上手，并且能够与其他库或已有项目无缝整合。希望这篇文章能帮助你快速入门 Vue.js，并为你的前端开发之旅打下坚实的基础。接下来，你可以继续学习 Vue 的其他特性，例如组件、路由和状态管理等，以便在更复杂的项目中更好地使用 Vue.js。祝你学习愉快！
Vue.js快速入门+项目实战（源码）
热门推荐
王俊的博客
06-12 3万+
Vue.js电影网站项目github 链接（如果觉得有用记得start哦~）:项目源代码链接 目录 前言 安装 Vue.js 1.Vue.js主要特性 2.Vue.js实例 3.Vue.js路由 4.Vue.js模板 5.条件渲染 6.列表渲染 7.事件处理 ES6常用语法 使用Babel进行ES6的转化 WebPack 构建第一个Vue.js项目 Vue......
【Vue2从入门到精通】详解Vue.js的15种常用指令及其使用场景
全栈弄潮儿
03-24 1969
Vue.js 是一款流行的前端框架，它通过指令（Directive）实现了对 DOM 元素的控制，使得开发者能够更加方便地管理页面的展示和交互。
全网最全的VUE2.js知识大总结来啦---第一部分
weixin_46146675的博客
04-14 1639
这是关于vue的一些基础知识的总结，由于时间有限，先总结一部分，剩下的下次在再总结。
vue2基础
pressure7的博客
12-03 595
vue2基础、指令，vue-cli
前端开发经典面试题及答案-Vue篇.zip
09-07
这份“前端开发经典面试题及答案——Vue篇.zip”压缩包内容可能包含了关于Vue.js的常见面试问题和解答，旨在帮助开发者准备Vue.js相关的面试。 一、Vue.js基础 1. Vue的生命周期：理解Vue实例从创建到销毁的过程，...
vue-cli配置文件——config篇
08-28
Vue CLI 是 Vue.js 的命令行工具，用于快速搭建基于 Vue.js 的项目。它提供了一套预配置的构建工具，使得开发者能够专注于编写应用的核心代码，而无需关心底层配置的复杂性。Vue CLI 使用 Webpack 作为默认的构建...
vite-recipe-book:使用Vue.js和Vite的食谱书应用
03-07
本篇文章将深入探讨如何利用Vue.js和Vite来构建一个实用的食谱书应用——vite-recipe-book。 1. **Vue.js简介**：Vue.js是一个轻量级的前端框架，它强调组件化开发，提供了声明式的数据绑定和事件处理，使得开发者...
vue初学者资料基础篇和项目学习
03-19
1. **Vue.js基础知识** - **安装与设置**：Vue可以通过CDN链接引入，或者使用npm进行全局安装。学习如何在HTML文件中创建`<script>`标签引入Vue.js，并理解Vue实例的基本结构。 - **模板语法**：Vue使用双大括号`{...
vue-router入门教程和总结1
08-03
Vue.js 是一个流行的前端框架，用于构建用户界面。Vue Router 是 Vue.js 生态系统中的官方路由库，它允许我们在单页面应用（SPA）中管理页面的导航和路由。本篇文章将深入探讨 Vue Router 的入门知识。 首先，安装 ...
《循序渐进Vue.js前端开发实战》电子书学习-第一章-从前端基础到Vue.js 3
m0_46614929的博客
06-03 2056
JavaScript的语法也是比较简单的，入门是很容易的。主要的特点是不像某些强类型语言那样严格，语句格式和变量类型都比较灵活。JavaScript使用var或者let来进行变量的定义。两者的差别是变量的作用域的不一样，定义变量的时候，无需关心变量的类型。函数是程序的功能单元，在JavaScript中定义函数主要有两种方法，一种是利用function关键字进行定义，另一种是es6新增的利用箭头函数进行定义。这两种定义函数，在调用的时候方式都是一样的。
Vue.js 2 —组件（Component）化编程
白白白鲤鱼的博客
09-23 1015
Vue.js 2.0 —组件（Component）化编程
Vue.js2 学习总结
m0_47671062的博客
09-08 308
Vue.js学习总结
Vue2基础框架（js）
qq_56632239的博客
05-04 146
- 2、引入vue使用开发版本 使用调试工具需要 -->// 挂载点 渲染 容器对应。// 数据 页面渲染的数据。-- 插值表达式 -->-- 1、创建渲染容器 -->-- 3、编写js代码 -->
Vue初级总结
LI1142878948的博客
10-20 446
vue初步总结
一、Vue简介及安装包
Lvruoyu的博客
04-21 883
01. Vue.js基础入门 01. 初识 前端技术的发展 HTML：HTML主要用来编写网页的结构，例如表示超链接。 CSS：CSS样式包括颜色、大小、字体等，布局合理的页面效果。 JavaScript：JavaScript的功能主要包括实现页面逻辑、行为、动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。 jQuery：通过对JavaScript代码的封装，使得DOM、事件处理、动画效果、Ajax交互等功能的实现变得更加简洁、方便，有效地提高了项目开发效率。 Vue：Vu
深入理解 Vue.js 2：构建现代化的前端应用程序
ashili7的博客
01-06 1389
Vue.js 2 是一个轻量级的渐进式 JavaScript 框架，用于构建用户界面和单页应用程序。它具有数据驱动、组件化和模板语法等核心概念，同时也提供了双向数据绑定、虚拟 DOM、单文件组件、插件系统等重要特性。Vue.js 2 的简单易学和灵活性使得它成为了众多前端开发者的首选框架。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值