前端网页技术 Vue Day 1

---

概念

Vue是我们国人开发的，作者：尤雨溪，是一个基于Javascript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。

Vue3.0使用TypeScript编写，TypeScript是Javascript的超集，微软研发，语法更加细致严谨，改js脚本语言为向一线强语言java、c靠拢，可以构建大型项目，基于ES6标准。

特点

• 轻量级的mvvm框架，双向绑定，数据动态更新，gzip后大小只有20k+


• 渐进式框架，其核心思想是数据驱动、组件化的前端开发


• 原生html页面是通过js 操作的是dom，而vue.js操作的是数据


• 和传统前端开发开发的关注点完全不同，传统方式关注的是都像的document结构的api，而vue关注的是数据


• 屏蔽了使用复杂晦涩难记的dom结构api

渐进式框架

Vue是一个用于构建用户界面的渐进式 SPA （ Single-Page Applications ）**单一页面框架。与其它庞大而单一框架不同的是，Vue从一开始就被设计为按需搭建。

• 可以只使用核心vue.js


• 可以只使用核心vue.js + components组件


• 可以只使用核心vue.js + components组件 + router路由


• 可以只使用核心vue.js + components组件 + router路由 + vuex状态管理


• 构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）

MVVM框架

MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码。

入门例子

Hello Vue

methods测试

Note：

• 方法必须写在methods代码段中


• 方法体中访问数据代码段中声明的变量，前面加this


• 方法和属性声明方式的差异在于 function(){}


• 方法和属性调用的差异是 {{msg}} {{sayHello()}}，名称后加小括号

Vue解析数据

v-命令

v-if

v-bind

v-on

v-model(双向绑定)

v-for

Note:Vue框架需修改数据和展示数据，结构简单

Vue组件

概述

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

Vue的Ajax

概述

无需重新加载整个网页的情况下，能够更新部分网页的技术

语法

axios.get("url地址信息","参数信息").then(res=>{
console.log(res.data);
})


测试

Vue路由

概述

根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

测试

原文链接：https://www.cnblogs.com/HAN-LIN/p/15386383.html