Vue&Element入门

    技术2025-04-18  6

    Vue

    Vue 介绍

    Vue 是一套构建用户界面的渐进式前端框架。只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合。通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。特点: 易用:在有 HTML CSS JavaScript 的基础上,快速上手。灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。性能:20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

    Vue holleworld

    选项列表 el 选项:用于接收获取到页面中的元素。(根据常用选择器获取)。data 选项:用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。methods选项:用于定义方法。方法可以直接通过对象名调用,this代表当前Vue对象。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异步操作</title> <script src="js/vue.js"></script> <script src="js/axios-0.18.0.js"></script> </head> <body> <div id="div"> {{name}} <button @click="show()">按钮</button> </div> </body> <script> new Vue({ el:"#div", data:{ name:"张三" }, methods:{ show(){ alert("hello"); } } }); </script> </html>

    指令介绍

    指令作用v-html把文本解析为HTML代码v-bind为HTML标签绑定属性值v-if条件性的渲染某元素,判定为true时渲染,否则不渲染v-else条件性的渲染某元素,判定为true时渲染,否则不渲染v-else-if条件性的渲染某元素,判定为true时渲染,否则不渲染v-show根据条件展示某元素,区别在于切换的是display属性的值v-for列表渲染,遍历容器的元素或者对象的属性v-on为HTML标签绑定事件v-model在表单元素上创建双向数据绑定

    Element

    Element 介绍

    Element:网站快速成型工具。是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。使用 Element 前提必须要有 Vue。组件:组成网页的部件,例如 超链接、按钮、图片、表格等等~Element 官网:https://element.eleme.cn/#/zh-CN

    Element 使用

    下载 Element 核心库。引入 Element 样式文件。引入 Vue 核心 js 文件。引入 Element 核心 js 文件。编写按钮标签。通过 Vue 核心对象加载元素。
    Processed: 0.008, SQL: 9