Vue.js入门

最新推荐文章于 2024-09-14 09:50:15 发布

2224070142

最新推荐文章于 2024-09-14 09:50:15 发布

阅读量368

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/B2224070142/article/details/136559778

版权

本文介绍了Vue.js的优势，如轻量体积、组件化开发、双向数据绑定、响应式设计和高效的虚拟DOM，以及如何下载和在VSCode中使用Vue.js创建简单示例。

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

Vue.js

简单小巧的核心、渐进式技术栈，足以应付任何规模的应用

官网——v2.cn.vuejs.org

最新版本——cn.vue.js.org

Vue.js 的优势

轻量级框架：体积水，压缩后只有33KB。
组件化开发：组件是Vue.js最强大的特性之一。为了更好地管理一个大型的应用程序，往往需要将应用切割为小而独立、具有复用性的组件。在Vue.js中，组件是基于HTML元素的拓展，可方便地自定义其数据与行为，使代码编写量大大减少，读者更加易于理解。
双向数据绑定：即当数据发生变化的时候，视图也就随之发生变化；当视图发生变化的时候，数据也会跟着同步变化。这是Vue.js框架的精髓之处，尤其是在进行表单处理时，双向数据绑定非常方便。
响应式设计：专注于显示前端效果的Vue.js，其本身提供的大多数控件和内容都是基于响应式的设计，不仅如此，为了方便众多开发者的使用，Vue.js衍生出了很多美观又简洁的UI组件库，这使网页在各种设备上都能显示出非常好看的效果。
更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫作虚拟DOM。
生态丰富，学习成本低：Vue.js包括很多以“v-”开头的内置指令作用于HTML元素，也可以自定义指令。指令提供了一些特殊的特性，将指令绑定在HTML元素上时，指令会给绑定的元素添加一些特殊的行为。还可以应用插件对Vue.js框架的功能进行扩展，堂用的扩展插件有vue-router、Vuex等。

Vue.js 的下载

打开官网首页，选择【学习】菜单下的【教程】

单击【教程】下方的【安装】

单击【直接用<script>引入】，可选择【开发版本】或【生产版本】进行下载

Vue.js 的使用

先新建一个文件夹，打开【Visual Studio Code】，在【Visual Studio Code】打开文件夹并安装插件 Live Server

打开下载的【开发版本】Vue.js文件，复制此文件到【Visual Studio Code】里面新建文件夹的下方，并单击文件夹右边新建文件的小图标新建一个文件
打开Chrome 浏览器，选择右上角的三图标，选择“更多工具”→“扩展程序”→“管理扩展程序”(勾选“开发者模式”)→把解压后的插件拉至空白处→选择“添加扩展程序”

关闭chrome浏览器再重新打开

创建简单的Vue示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue框架的入门</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}

    </div>

    <script>
        //创建vue实例对象,{}表示对象的意思，传入配置对象，配置对象时vue的固定写法
        const x = new Vue({
            //键值对  :   
            el:"#app",    //表示当前vue实例对象为那个容器所服务，（相当于绑定制定div）
            data:{
                msg:"你好，vue"    //data表示当前vue实例所存储的数据
            }

        })
    </script>



 
</body>
</html>