Vue基础入门

最新推荐文章于 2024-07-10 18:13:56 发布
最新推荐文章于 2024-07-10 18:13:56 发布
阅读量248 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PavelH/article/details/130281480
版权

Vue

1. Vue概述

Vue（读音 /vjuː/，类似于 view）是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。

  • 遵循SOC原则：关注点分离原则

  • 视图层：HTML+CSS+JS

  • 视图：给用户看，刷新后台给的数据

  • 网络通信：axios

  • 页面跳转：vue-router

  • 状态管理：vuex

  • Vue-UI：ICE（飞冰：https://ice.work）, Element UI（https://element.eleme.cn/）

2. 第一个Vue程序

2.1 什么是MVVM

在之前的学习中，我们学过了MVC

M：模型

V：视图

C：控制器

MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互

当下流行的MVVM框架有Vue.js，Anfular JS
在这里插入图片描述

在这里插入图片描述

通信流程：

  1. View 接收用户交互请求
  2. View 将请求转交给ViewModel
  3. ViewModel 操作Model数据更新
  4. Model 更新完数据，通知ViewModel数据发生变化
  5. ViewModel 更新View数据

在Vue中：

  • model：对应的data中的数据
  • v：模板、UI界面
  • VM：Vue实例对象

2.2 为什么要送MVVC

  • 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
  • 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
  • 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
  • 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

MVVM组成部分

在这里插入图片描述

View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。

2.3 第一个Vue程序

哪些开发工具可以进行Vue程序的编写？

IDEA，VScode，HBuilder，Sublime，WebStorm

先用IDEA创建一个空文件，然后Settings–>Plugins 中搜索Vue 插件中下载Vue
在这里插入图片描述

下载地址：

  • 官方网站

​ https://cn.vuejs.org/

  • CDN

​ 1. <script src="https://cdn.jsdelivr.net/nmp/vue@2.5.21/dist/vue.js"></script>

​ 2. <script src="https://cdn.jsdelivr.net/nmp/vue@2.5.21/dist/vue.min.js"></script>

第一个程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue程序</title>
</head>
<body>

<div id="app">
    {{message}}
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm  = new Vue({
        //元素绑定app
        el: "#app",
        data:{
            message: "hello Vue!"
        }
    });
</script>
</body>
</html>

3. 基础语法指令

3.1 v-bind:绑定元素特性

简写：冒号 ：
title绑定message元素使得鼠标悬停可以显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue程序</title>
</head>
<body>

<div id="app">
    <h1>{{message}}</h1>
    <span v-bind:title="message">鼠标悬停几秒看提示信息</span>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm  = new Vue({
        //元素绑定app
        el: "#app",
        data:{
            message: "hello Vue!"
        }
    });
</script>
</body>
</html>

上面用到的v-bind等被称为指令。指令带有前缀v-，以表示他们是Vue提供的特殊特性。可能你已经猜到了，它们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。

如果再次打开浏览器的JavaScript控制台，输入vm.message = ‘XXX’，就会再一次看到这个绑定了title特性的HTML已经进行了更新。

3.2 v-if,v-else,v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h1 v-if="success">Yes</h1>
  <h1 v-else>No</h1>
  <h1 v-if="type==='A'">A</h1>
  <h1 v-else-if="type==='B'">B</h1>
  <h1 v-else>C</h1>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm  = new Vue({
    el: "#app",
    data: {
      success: true,
      type: 'A'
    }
  });
</script>
</body>
</html>

3.3 v-if 和 v-show的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1 v-show="success">111</h1>
    <h1 v-if="success">222</h1>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm  = new Vue({
    el: "#app",
    data: {
      success: false
    }
  });
</script>
</body>
</html>

1.原理
v-show指令：元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的CSS属性(display)来决定实现显示还是隐藏
v-if指令：满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示
2.应用场景
v-if需要操作dom元素，有更高的切换消耗，v-show只是修改元素的的CSS属性有更高的初始渲染消耗，如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好

3.4 v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 array in items 形式的特殊语法，其中 items 是源数据的数组，而 array 是迭代项的别名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <li v-for="array in items">
        {{array.message}}
    </li>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [{message: '华清远见'},
                    {message: 'Java开发'},
                    {message: 'Vue'},
                    {message: 'SpringBoot'}]
        }
    });
</script>
</body>
</html>

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <li v-for="(array,index) in items">
        {{array.message}}----{{index}}
    </li>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [{message: '华清远见'},
                    {message: 'Java开发'},
                    {message: 'Vue'},
                    {message: 'SpringBoot'}]
        }
    });
</script>
</body>
</html>

3.5 v-on:监听事件

缩写：@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="sayHi">点击我</button>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "你好啊"
        },
        methods: {
            //方法必须定义在Vue中的  Methods对象中
            sayHi: function () {
                alert(this.message);
            }
        }
    });
</script>
</body>
</html>

4. Vue双向绑定

4.1 什么是双向绑定

  • Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
  • 值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。

4.2 在表单中使用双向数据绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦，v-model 指令帮我们简化了这一步骤。v-model还可以用于各种不同类型的输入,textarea、select 元素。

它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

  • 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
  • <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
  • <select> 会绑定 value property 并侦听 change 事件。

注意：v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用data 选项来声明该初始值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  输入的文本：<input type="text" v-model="message">-----------{{message}} <br>
    多行文本：<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>--------{{message}} <br>

    性别：
    <input type="radio" name="sex" value="男" v-model="checked">男
    <input type="radio" name="sex" value="女" v-model="checked">女
    <p>
        选中了谁：{{checked}}
    </p>
    
    下拉框：
    <select v-model="alphabet">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>你选中了：{{alphabet}}</span>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "123",
            checked: '',
            alphabet: ''
        }

    });
</script>
</body>
</html>

5. Vue组件

5.1 什么是组件

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签等框架有着异曲同工之妙。通常一个应用会以一颗嵌套的组件树的形式来组成：
在这里插入图片描述

例如：页面会有页头、侧边栏、内容区等组件，每个组件又包含了其它像导航链接、博文之类的组件。

5.2 第一个组件

  • Vue.component()：注册组件
  • he：自定义组件的名字
  • template：组件的模板
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--组件：传递给组件中的值：props-->
    <he v-for="array in items" v-bind:zhao="array"></he>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    //定义一个Vue组件component
    Vue.component("he",{
        props: ['zhao'],
        template: '<li>{{zhao}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data: {
            items: ["Java","Linux","Web"]
        }
    });
</script>
</body>
</html>

使用props属性传递参数：

像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用props属性来！

说明：

  • v-for=“array in items” 遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
  • v-bind:zhao=“array” 将遍历的array项绑定到组件中props定义为zhao属性上；=号左边的zhao为props定义的属性名，右边的array为 array in items 中遍历的array项的值

6. Axios

6.1 什么是Axios

Axios是一个开源的key用在浏览器端和NodeJS的异步通信框架，它的主要作用就是实现AJAX异步通信，其功能特点如下：

  • 从浏览器发出XMLHttpRequest

  • 从node.js发出http请求

  • 支持Promise API

  • 拦截请求和响应

  • 转换请求和响应数据

  • 取消请求

  • JSON数据的自动转换

  • 客户端支持防止XSRF（跨站请求伪造）

GitHub：https://github.com/axios/axios

中文文档：http://axios-js.com/

6.2 为什么要使用Axios

由于Vue.js是一个视图层框架并且作者（尤雨溪）严格遵守SOC（关注度分离原则），所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一名为 vue-resource 的插件，不过在进入2.0版本后停止了对该插件的维护并推荐了Axios框架。少用jQuery，因为它操作Dom太频繁！

(先加载模板，再展示数据)

6.3 第一个Axios程序

创建data.json

{
  "name": "赵赫",
  "age": "24",
  "address": {
    "street": "光华路",
    "city": "陕西西安",
    "country": "中国"
  },
  "url": "https://www.baidu.com"
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.age}}</div>
    <div>{{info.address}}</div>

    <a v-bind:href="info.url">点我</a>
</div>
<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    var vm = new Vue({
        el: "#app",
        data() {
            return {
                //请求的返回参数格式，必须和json字符串一样
                info: {
                    name: null,
                    age: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
            }
        },
        mounted() {
            //钩子函数 链式编程
            axios.get('../data.json').then(res=>(this.info=res.data));
        }
    });
</script>
</body>
</html>

7. Vue生命周期

img

第一阶段（创建阶段）：

beforeCreate：在实例初始化之后，数据观测 (Data Observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)、属性和方法的运算，watch/event 事件回调；然而，挂载阶段还没开始，$el 属性目前不可见。

第二阶段（挂载阶段）：

beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

第三阶段（更新阶段）：

beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖DOM 的操作，然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之（PS：计算属性与 watcher 会在后面的篇幅中进行介绍）。

第四阶段（销毁阶段）：

beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <button @click="changeMsg">变变变</button>
</div>
<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    var vm = new Vue({
        el: "#app",
        data: {
            message: 'hello world'
        },
        methods: {
            changeMsg() {
                this.message = 'goodbye world'
            }
        },
        //生命周期函数，会自动调用
        beforeCreate() {
            console.log('----初始化前----')
            console.log(this.message)
            console.log(this.$el)
        },
        created() {
            console.log('----初始化完成----')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount() {
            console.log('----挂载前----')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted() {
            console.log('----挂载完成----')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeUpdate() {
            console.log('----更新前---')
            console.log(this.message)
            console.log(this.$el)
        },
        updated() {
            console.log('----更新完成----')
            console.log(this.message)
            console.log(this.$el)
        }
    });
</script>
</body>
</html>

8. Vue脚手架

8.1 先安裝node.js 文件

在这里插入图片描述

在这里插入图片描述

8.2 需要安裝npm镜像

我们可以把npm的镜像指定为淘宝镜像

npm confifig set registry https://registry.npm.taobao.org

同时，还可以安装一个cnpm指令来代替npm指令下载插件源文件，运行命令安装cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

设置cnpm的镜像：后续可以通过cnpm来代替npm的下载指令。

cnpm confifig set registry https://registry.npm.taobao.org

8.3 安装vue-cil

vue脚手架也分版本，早期的版本是2.0默认安装完nodejs自带的，现在的版本是vue-cli4版本

1：先卸载脚手架vue-cli2（如果有）输入命令：

npm uninstall vue-cli -g

2、装脚手架vue-cli3+,输入命令

npm install -g @vue/cli

安装成功之后可以通过命令查看：

在这里插入图片描述

注意： vue -V 这里的V是大写V

8.4 创建项目

vue create 项目名

先进入D盘，再进入项目文件夹里，然后vue create 项目名

在这里插入图片描述

控制键盘↑↓键，进行Vue版本的选择，按回车确定。

如果是选择Vue3快速安装或者，Vue2快速安装，直接等待就行，自动会安装成功，
在这里插入图片描述

如果选择自动安装：之后按回车确定

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

遇见选择题，选N，然后等待创建。

在这里插入图片描述

这就是创建完成。然后先 cd vue_study 再 npm run serve 是vue启动的命令，启动成功如下图

在这里插入图片描述
然后访问：http://localhost:8080,成功如下图
在这里插入图片描述

PavelH
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue基础入门
weixin_58470558的博客
05-13 6553
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
Vue基础（一）——入门
pro1822的博客
04-25 8750
Vue基础（一）——入门
VUE超详细入门
最新发布
zhangpeixuan的博客
07-10 1132
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架！
Vue 基础入门 - 看这一篇就够了！！！
niubiwhat的博客
09-05 5639
Vue 入门基础篇
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue入门教程
Zz1366的博客
05-08 6666
Vue快速入门
Vue基础入门源码-03
05-16
在“Vue基础入门源码-03”这个资源中，我们很可能会看到关于Vue核心概念的进一步讲解和实例代码。下面将深入探讨Vue.js的一些关键知识点，这些知识点可能是这个压缩包中的内容。 1. **组件化**：Vue的核心是组件...
Vue基础入门源码-02
05-11
在"Vue基础入门源码-02"这个资源中，我们可以期待学习到关于Vue的基础知识，包括但不限于以下几个方面： 1. **安装与设置**：Vue可以通过CDN链接直接引入，或者使用npm进行本地安装。在源码中，可能会展示如何在...
vue基础入门源码-01
05-10
在这个"vue基础入门源码-01"的资源中，我们可以期待学习到Vue.js的基础概念和核心用法。下面将详细介绍一些关键知识点： 1. **安装与设置**：首先，会介绍如何通过npm或CDN引入Vue.js到项目中，以及如何在HTML文件...
vue基础入门&demo.zip
02-18
"vue基础入门&demo.zip"这个压缩包很可能是为了帮助初学者快速入门Vue.js而准备的资源，其中包含了文档和可能的示例代码。 在“vue基础入门&demo.docx”这份文档中，我们可以预期找到关于Vue.js的基础知识，例如： ...
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
vue2 基础入门
ClearloveYt的博客
07-03 2818
目录vue 简介vue 的特性数据驱动视图双向数据绑定MVVMvue 的基本使用vue 的调试工具vue 的指令1、内容渲染指令2、属性绑定指令3、事件绑定 4、双向绑定指令 v-model5、 条件渲染指令 6 、列表渲染指令vue过滤器 定义过滤器基本使用 私有过滤器和全局过滤器过滤器的注意点watch 侦听器使用 watch 检测用户名是否可用 侦听器的格式对象侦听器deep 选项 计算属性计算属性的特点vue-cli 的使用 安装和使用vue 项目中 src 目录的构成：vue 项目的运行流程 vu
Vue快速入门
weixin_42732665的博客
01-31 1313
Vue快速入门
Vue学习-基础入门篇(三万字收藏篇)
林钟一的博客
07-27 6259
Vue是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。(1) Vue 的核心库只关注视图层。 (2) 不仅易于上手，还便于与第三方库或既有项目整合。 (3) 遵循 MVVM模式 ，能够实现视图与模型的 双向绑定。(4) 编码简洁，体积小，运行效率高，适合移动/PC端开发。Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的 冷服务器启动。它做到了 本地快速开发启动, 在生产环境下基于 Rollup 打包。通过在终端中
Vue介绍与入门（一篇就可入门）
weixin_57504000的博客
04-26 4万+
一、Vue.js是什么？ vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 渐进式我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/
vue基础详解（全）
梁婉玲krysliang的博客
02-14 1万+
一，VUE的核心 1.数据驱动（mvvm模型，只要改变model的数据，视图层就会自动更新） 2.视图组件： 把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。 二，使用vue 1.引入vue之后就可以进行下面的步骤 2.创建语法（创建 ，设置数据，挂载，渲染） var vm = new Vue（{}）//参数是一个对象 三、定义...
【Vue】基础入门学习
懂得一千零一种,赋予你失败的方法！
03-21 1530
文章目录一、介绍二、安装三、初步使用3.1 声明式渲染1、第一个程序2、响应式编程3、元素绑定4、术语el 挂载点data 数据对象5、疑问3.2 v- 指令1、v-if 条件指令2、v-for 循环指令3、v-on 事件绑定4、v-model 表单输入<=>应用状态3.3 组件化应用构建 一、介绍 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手..
Vue学习-Vue入门
weixin_59357453的博客
04-02 4317
这是一篇vue学习记录
Vue基础入门到组件开发全指南
1. **Vue基础**： - 开篇提供一个概览，让学习者对Vue有初步了解。 - **声明式渲染和组件化**：强调Vue通过模板语言表达状态变化，实现高效且易于维护的组件化开发。 - **开发模式**：包括了本地开发环境的配置和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值