Vue
so_#
活到老,学到老
展开
-
Vue 一套构建用户界面的渐进式的框架
此文章知识来源:哔哩哔哩视频 codewhy + Vue官网 + 菜鸟教程此文章内容:基础语法+代码+图片+demo文章目录------------->知识了解篇------------->生命周期篇------------->模板语法篇------------->计算属性与监听属性篇------------->条件与循环篇------------->事件监听篇------------->表单篇------------->组件篇--.原创 2020-11-04 10:25:40 · 2042 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(知识了解篇~)
知识了解概念Vue是一个渐进式的框架。渐进式概念?1、可以将Vue作为应用的一部分嵌入其中,带来更丰富的交互体验2、可以将更多的业务逻辑使用Vue实现3、如 Core+Vue-router+Vuex,也可以满足各种各样的需求特点Vue很多特点和Web开发中常见的高级功能1、解耦视图和数据2、可复用的组件3、前端路由技术4、状态管理5、虚拟DOM安装1、直接CDN引入<!-- 开发环境版本,包含了有帮助的命令行警告--><script src="原创 2020-09-24 00:58:32 · 8341 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(生命周期篇~)
个人理解可能存在偏差,仅供参考~事物从诞生到消亡的整个过程每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。首先看一张图吧~这是官方文档上的图片:钩子就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去结婚,也是不行的。组件也是.原创 2020-09-24 17:22:36 · 2076 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(模板语法篇~)
模板语法代码规范:最好每次缩进俩个空格更符合规范哟~创建Vue实例传入的optionsel类型:string | HTMLElement作用:用于挂载要管理的元素节点,值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。 data类型:Object | Function(组件当中data必须是一个函数)作用:Vue实例对应的数据对象methods类型: {[key:string]:Function}作用:定义属于Vue的一些方法,可以在其他地方调用,也原创 2020-09-25 16:35:25 · 3405 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(计算属性与监听属性篇~)
计算属性概述计算属性是vue实例中的一个配置选项:computed通常里面都是一个个计算相关的函数,函数里头可以写大量的逻辑,最后返回计算出来的值即我们可以把这些计算的过程写到一个计算属性中去,然后让它动态的计算。优点:相比methods,不用调用方法,而是直接访问计算后的属性,可读性强些。计算属性有缓存所以性能比methods高例如:<body> <div class="app"> <h2>{{message}}&l原创 2020-11-02 08:49:49 · 1323 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(条件与循环篇~)
条件语句条件判断<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>条件语句</title></head><body> <div原创 2020-11-02 08:51:46 · 1522 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(事件监听篇~)
事件监听使用 v-on作用:绑定事件监听器语法糖:@参数:eventv-on 参数1、若方法不需要额外参数,那么方法后的() 可以不添加例如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-11-02 08:58:51 · 1346 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(表单篇~)
表单v-model可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源原创 2020-11-02 14:30:50 · 2173 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(组件篇★~)
概述将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树语法'Vue2.x 版本之前的写法:'组件使用三个步骤:创建组件构造器(调用Vue.extend())注册组件(Vue.component())使用组件(在Vue实例的作用范围使用组件,使用自定义的组件名)例如:<!DOCTYPE html>原创 2020-11-04 10:02:32 · 1229 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架 (路由篇~)
此块知识内容基础,没有官方文档全,仅供参考概述(了解)单页面富用阶段(SPA)SPA 主要的特点是在前后端分离(后端只提供API来返回数据,前端通过Ajax获取到的数据渲染到页面)的基础上加了一层前端路由也就是由前端来维护一套路由规则前端路由的核心:改变URL,但页面不进行整体的刷新(俩种方法:1、URL的hash 2、H5的history模式:pushState、replaceState)vue-router目前前端流行的三大框架,都有自己的路由实现:Angular的ngR原创 2020-11-04 20:45:11 · 1192 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架 (Webpack篇~)
友情提示:大部分loader可以在webpack官网中找到,并且学习对应的用法或直接copy配置。参考webpack中文网址:https://www.webpackjs.com/概述是一个现代化的JavaScript应用的静态模块打包工具webpack其中一个核心就是让我们能进行模块化开发,并且会帮助我们处理模块间的依赖关系(处理好生成浏览器能识别的内部代码,更好的高效让浏览器识别)像使用前端模块化的一些方案:AMD、CMD、CommonJS、ES6(浏览器对这些规范有的不支持,但用原创 2020-11-05 17:08:09 · 1255 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架 (Cli3 篇~)
脚手架概述Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统一个丰富的官方插件集合,集成了前端生态中最好的工具。一套完全图形化的创建和管理 Vue.js 项目的用户界面Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。用于快速生成 Vue 项目基础架构 , 其官方网址 : 'https:/原创 2020-11-05 21:13:28 · 1649 阅读 · 3 评论