网站建设 嘉兴,江苏省现代化实训基地建设网站,旅游网页设计说明,wordpress验证码无效一、什么是VueVue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建#xff0c;并提供了一套声明式的、组件化的编程模型#xff0c;帮助你高效地开发用户界面。无论是简单还是复杂的界面#xff0c;Vue 都可以胜任。1.构建用户界面传统方…一、什么是VueVue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建并提供了一套声明式的、组件化的编程模型帮助你高效地开发用户界面。无论是简单还是复杂的界面Vue 都可以胜任。1.构建用户界面传统方式vue方式使用 vue 构建用户界面解决了jQuery 模板引擎的诸多痛点Vue较于jQuery的优势使用指令而不是模板引擎数据驱动视图事件绑定的方式实现交互2.Vue全家桶官方给 vue 的定位是前端框架因为它提供了构建用户界面的一整套解决方案俗称 vue 全家桶vue核心库 vue-router路由方案 vuex状态管理方案 vue 组件库快速搭建页面UI 效果的方案以及辅助 vue 项目开发的一系列工具vue-clinpm 全局包一键生成工程化的vue 项目 - 基于webpack、大而全 vitenpm 全局包一键生成工程化的vue 项目 - 小而巧 vue-devtools浏览器插件辅助调试的工具 veturvscode插件提供语法高亮和智能提示vue-cli、vite帮助程序员一键生成工程化的Vue项目总的来说3.Vue特性与版本Vue特性1数据驱动视图什么是数据什么是视图数据指的是API接口返回的数据或者是“写死”的数据视图指的是页面渲染出来的DOM结构。在使用了 vue 的页面中vue 会监听数据的变化从而自动重新渲染页面的结构。注意点数据驱动视图是单向的数据绑定。即上图的“箭头”是单向的2双向数据绑定在填写表单时双向数据绑定可以辅助开发者在不操作DOM 的前提下自动把用户填写的内容同步到数据源中。这样子开发者不再需要手动操作DOM 元素来获取表单元素最新的值也就是说如果需要最新的值直接操作data即可Vue版本当前Vue的主流版本当前vue 共有 3 个大版本2.x 版本的 vue 是目前企业级项目开发中的主流版本 3.x 版本的 vue 于 2020-09-19 发布生态还不完善尚未在企业级项目开发中普及和推广但是Vue3.X必定是是未来企业级项目开发的趋势1.x 版本的 vue 几乎被淘汰不再建议学习与使用vue2.X与 vue3.X对比vue2.x 中绝大多数的API 与特性在 vue3.x 中同样支持。同时vue3.x 中还新增了3.x 所特有的功能、并废弃了某些2.x 中的旧功能新增的功能组合式API、多根节点组件、更好的TypeScript 支持等废弃的旧功能过滤器、不再支持$on$off 和 $once 实例方法等4.MVVMMVVC简介MVVM是 vue 实现数据驱动视图和双向数据绑定的核心原理。它把每个HTML 页面都拆分成了如下三个部分View表示当前页面所渲染的DOM 结构。 Model表示当前页面渲染时所依赖的数据源。ViewModelViewModel起到一个连接的作用表示 vue 的实例它是MVVM 的核心。MVVM工作原理ViewModel 作为MVVM 的核心是它把当前页面的数据源Model和页面的结构View连接在了一起。当数据源发生变化时会被ViewModel 监听到VM 会根据最新的数据源自动更新页面的结构。当表单元素的值发生变化时也会被ViewModel 监听到VM 会把变化过后最新的值自动同步到Model 数据源中。二、Vue的基本使用基本使用步骤① 导入 vue.js 的 script 脚本文件 ② 在页面中声明一个将要被vue 所控制的DOM 区域 ③ 创建vm 实例对象vue 实例对象!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbody!-- 2. 声明要被 vue 所控制的 DOM 区域 --div idapp{{username}} : {{age}}/div!-- 1. 导入 vue 的脚本文件 --script src../../lib/vue-2.6.12.js/script!-- 3. 创建 vue 的实例对象 --scriptconst vm new Vue({// 3.1 使用 el 属性指定 vue 要控制的区域el: #app,// 3.2 数据源data: {username: zs,age: 20},})/script/body
/html上述代码的效果就是将username和age的值渲染到页面上Vue代码解析上述代码是最基本的Vue的示例代码如果看不太明白的小伙伴也可以看看《书栈》上面的文章Vue.js 的Hello World解析基本代码与MVVM 的对应关系Vue的网页调式工具这边使用的浏览器是Edge反正现在也是google内核google的话安装插件如果之前没有配置“科学上网”可能会有一点麻烦。先到Edge应用商店下载Edge外接程序点击安装即可开启Vue插件点击详细信息并修改下述两个配置项点击F12最后有一个Vue的框框大致样式如下
