Vue的认识

最新推荐文章于 2024-11-08 00:07:28 发布

Eirunye

最新推荐文章于 2024-11-08 00:07:28 发布

阅读量896

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： HTML vue js

本文链接：https://blog.youkuaiyun.com/sinat_33381791/article/details/84890364

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍Vue.js，一种用于构建用户界面的渐进式框架，易于上手且能与第三方库整合。通过实例演示如何使用Vue填充数据，适用于复杂单页应用开发。

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

简介

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue在ES6语法也完全好用，这是一个非常便捷的方式。
使用一段时间之后，今天一起来记录和总结常用的开发的组件。
这里就在讲解的一些组件的时候就直接贴代码了，然后添加注释这样比较好了解，以后遇到相同的问题也好来浏览记录。

实例

如下代码，让我认识Vue是如何填充数据的。


<script>
   window.onload = function () {
       new Vue({
          el: "#box",//指定的跟元素Id
          data: {//填充的数据
               msg: "hello vue!",//key必须对应html里面的标识msg 必须用{{}}包围这个字段，这就是插值表达式，如下完整案例的代码{{msg}}
            }
         })
   }        
</script>

使用Vue步骤

1和我们平时开发的javascript的代码一样的，我们需要引入Vue.js的依赖库。下载到本地或者直接在<head></head>标签中添加
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2在<script></script>标签中书写Vue.js的代码
3.运行完成。

完整实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的简单实例</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            new Vue({
                el: "#box",//指定的跟元素Id
                data: {//填充的数据
                    msg: "hello vue!",//key必须对应html里面的标识msg 必须用{{}}包围这个字段，这就是插值表达式
                }
            })
        }
    </script>
</head>
<body>
<div id="box">

    {{msg}}

</div>
</body>
</html>