vue入门及使用脚手架创建第一个vue项目

最新推荐文章于 2023-06-08 14:24:30 发布

最新推荐文章于 2023-06-08 14:24:30 发布

阅读量300

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_57712926/article/details/118656923

版权

本文是一篇Vue入门教程，详细介绍了Vue的定义、版本、MVVM原理及其特性。讲解了Vue的基本使用，包括指令、过滤器、侦听器和计算属性。还特别提到了vue-cli，解释了什么是单页面应用和vue-cli脚手架，指导如何使用脚手架创建第一个Vue项目。最后，文章讨论了Vue的组件化开发，阐述了组件的组成部分。

摘要由CSDN通过智能技术生成

前言
一、Vue
二、Vue的基本使用
四、Vue的指令
五、过滤器(filters)
六、侦听器
- 1. 什么是watch侦听器
- 2. 侦听器格式
七、计算属性
- 1. 什么是计算属性
- 2. 特点
八、vue-cli
九、组件化开发
- 1. 什么是组件化开发
- 2. Vue组件的组成部分
总结

前言

本文介绍vue入门，包含vue指令、过滤器、侦听器、计算属性等内容，最后会使用vue-cli脚手架工具创建一个自己的vue项目，刚学习vue的小伙伴儿快来看看~

一、Vue

1.什么是Vue

一套用于构建用户界面的前端框架

构建用户框架：
用Vue往HTML页面中填充数据，非常的方便
框架：
现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能
要学习Vue，就是在学习Vue框架中规定的用法
Vue的指令、组件（是对 UI 结构的复用）、路由、Vuex、Vue组件库

2. Vue版本

当前共有三个大版本

2.x版本是目前企业级项目开发中的主流版本
3.x版本于2020-09-19发布，生态还不完善，尚未在企业级项目开发中普及和推广
1.x版本几乎被淘汰，不再建议学习与使用

3. MVVM

是Vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model、View和ViewModel。

Model:表示当前页面渲染时所以来的数据源
View:表示当前页面所渲染的DOM结构
ViewModel:表示Vue实例，它是MVVM的核心,他把当前页面的数据源和页面结构连接到了一起

4. Vue的特性

数据驱动视图
在使用了Vue的页面中，Vue会监听数据的变化，从而自动重新渲染页面结构
注：数据驱动视图是单向的数据绑定

优点：当页面数据发生变化时，页面会自动重新渲染

双向数据绑定
js数据的变化，会被自动渲染到页面上
页面上表单采集的数据发生变化时，会被Vue自动获取到，并更新到js数据中

优点：

开发者把不再需要手动操作DOM元素，来获取表单元素最新的值！

在网页中，form表单负责收集数据，Ajax负责提交数据

二、Vue的基本使用

1. 基本使用步骤

导入vue.js的script脚本文件
在页面中声明一个将要被Vue所控制的DOM区域
创建VM实例对象(vue实例对象)

2. Vue初体验

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue初体验</title>
</head>

<body>
    <!-- 希望vue控制下面的这个div，帮我们把数据填充到div内部 -->
    <div id="app">{
  {username}}</div>
    <!-- 导入vue的库文件，在window全局就有了vue这个构造函数 -->
    <script src="./lib/vue-2.6.12.js"></script>

    <script>
        // 创建vue的实例对象
        const vm = new Vue({
     
            // el 属性是固定的写法，表示当前vm实例要控制页面上的那个区域，接收的值是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
     
                username: 'leo'
            }
        })
    </script>
</body>