一 Vue简介

最新推荐文章于 2025-05-21 00:57:37 发布

唯老

最新推荐文章于 2025-05-21 00:57:37 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_14943403/article/details/87826959

本文介绍Vue.js框架的核心概念，包括数据驱动的思想，如何在HTML中使用Vue指令，以及在浏览器中调试Vue应用的方法。同时，提供了Vue.js的引入方式，包括直接引入和使用命令行工具搭建项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架(部分使用,不是全家桶)。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。(官方文档)

它的中心思想就是数据驱动，不像jQuery是结构驱动，

结构驱动:先获取HTML的结构,然后再修改数据更新结构

数据驱动:简单的理解就是直接将数据同步到结构上,视图管理抽象为数据管理，而不是管理dom结构

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

二、前期准备工作

1、指令自动提示

指令自动提示

添加如下指令

v-text 
v-html 
v-once 
v-if 
v-show 
v-else 
v-for 
v-on 
v-bind 
v-model 
v-ref 
v-el 
v-pre 
v-cloak 
v-on:click 
v-on:keyup.enter 
v-on:keyup 
@click 
@change 
number 
debounce 
transition 
:is

2、消除未知指令的错误

使用 alt + 回车
在工具总设置

3、chrome游览器的调试插件

直接从谷歌市场

搜索 vue-devtools 然后添加插件(注意自备梯子)
从本地安装

三、基础使用

1、引入Vue

1.1、直接引入Vue

独立安装

Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入

开发版

生产环境

使用 CDN 方法推荐使用官方

1.2、命令行工具搭建脚手架

入门时不推荐使用具体查看单独的教程

2、引入Vue

2、基础实例

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>{{title}}</h1>
            <p>姓名: {{ name }}</p>
            <p>年龄: {{ age }}</p>
            <p>方法使用: {{test()}}</p>
        </div>
    </body>
</html>

js代码

<script>
    let app = new Vue({
        //作用的元素
        el: "#app",
        //数据绑定区
        data: {
            title: "Vue案例",
            name: "Vue",
            age: 15,
        },
        // 用于存储各种方法
        methods: {
            test: function () {
                return "我劝你善良!!!"
            }
        }
    });
</script>

显示效果