10 2020 档案

认识 Vue
摘要：vue 是一个渐进式的框架，什么是渐进式？ 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验 或者如果你希望将更多的业务逻辑使用Vue实现 MVVM特点 主要目的是分离视图 和模型 MVVM模式的组成部分 模型 是指代表真实状态内容的领域模型，或指代表内容的数据访问层 视图 阅读全文
posted @ 2020-10-31 14:58 眰 阅读(65) 评论(0) 推荐(0)
Vue 生命周期
摘要：var vm=new Vue({ }) 开始创建一个Vue实例对象 beforeCreate(){ 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它 在 beforeCreate生命周期函数执行的时候，data和methods中的数据还没有初始化 } created(){ 遇到 阅读全文
posted @ 2020-10-29 16:07 眰 阅读(92) 评论(0) 推荐(0)
Vue localStorage本地储存属性
摘要：localStorage的定义和使用 localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。 localStorage 属性是只读的 语法： 保 阅读全文
posted @ 2020-10-26 18:27 眰 阅读(605) 评论(0) 推荐(0)
vue-router 路由基本配置结构
摘要：配置路由相关信息import VueRouter from 'vue-router'import Vue from 'vue' 1.通过Vue.use(插件)，安装插件Vue.use(VueRouter) 2.创建VueRouter对象 const routes:[ ]const router =n 阅读全文
posted @ 2020-10-26 09:51 眰 阅读(342) 评论(0) 推荐(0)
slot 插槽
摘要：如何封装合适呢？抽取共性，保留不同。 最好的封装方法就是将共性抽取到组件中，将不同暴露为插槽。 预留插槽 如果有覆盖显示覆盖 没有就显示定义的内容 插槽可以插入多个标签 具名插槽是根据定义的name来指定替换插槽内容 基本使用插槽和 具名插槽 <!DOCTYPE html><html> <head> 阅读全文
posted @ 2020-10-23 20:52 眰 阅读(75) 评论(0) 推荐(0)
Vue组件化的基本使用
摘要：注册组件的基本步骤 组件的使用分成三个步骤 1、创建组件构造器 2、注册组件 3、使用组件 <!DOCTYPE html><html> <head> <title>组件</title> <meta charset="utf-8" /> </head> <body> <div id="app"> <! 阅读全文
posted @ 2020-10-23 17:46 眰 阅读(145) 评论(0) 推荐(0)
Vue 什么是组件
摘要：1、我们将一个完整的页面分成很多个组件 2、每个组件都用于实现页面的一个功能块 3、而每一个组件又可以进行细分 组件化是Vue.js中的重要思想 它提供了一种抽象，让我们可以开发一个个独立可复用的小组件来构造我们的应用 任何的应用都会被抽象成一颗组件树 阅读全文
posted @ 2020-10-23 17:35 眰 阅读(227) 评论(0) 推荐(0)
v-model修饰符
摘要：<!DOCTYPE html><html> <head> <title>组件</title> <meta charset="utf-8" /> </head> <body> <div id="app"> <!--.laze修饰符 可以让数据在失去焦点或者回车才会更新--> <input type=" 阅读全文
posted @ 2020-10-23 17:03 眰 阅读(96) 评论(0) 推荐(0)
v-model 值绑定
摘要：<!DOCTYPE html><html> <head> <title>组件</title> <meta charset="utf-8" /> </head> <body> <div id="app"> <h2> 爱好是：{{hobbies}}</h2> <label v-for="item in 阅读全文
posted @ 2020-10-23 16:43 眰 阅读(484) 评论(0) 推荐(0)
v-model的使用和原理
摘要：<div id="app"> <input type="text" v-model="mess">//双向绑定 {{mess}}</div><script> const app=new Vue({ el:"#app", data:{ mess:"哈喽" } })</script> 阅读全文
posted @ 2020-10-23 16:16 眰 阅读(411) 评论(0) 推荐(0)