随笔分类 - 前端 Vue
摘要：1 使用第三方插件 https://github.com/vuejs/awesome-vue#components--libraries 集合了来自社区贡献的数以千计的插件和库。 2 使用第三方UI框架 饿了么UED团队推出的vue 前端框架： PC（web端）框架： (element UI ， i
阅读全文
摘要：# 步骤 -安装 cnpm install -S axios -在组件中导入 import ajax from 'axios' -使用 created() { ajax.get('http://127.0.0.1:5000/').then(res => { console.log(res.data)
阅读全文
摘要：一、组件的使用 1 每个组件都有三部分 <template>写html内容，原来组件的template</template> <script> js,data,methods,created,</script> <style>样式</style> 注意：写的html要在div中，不然可能会报错 2
阅读全文
摘要：vue项目创建 1 vue环境 1.1 安装node: 直接下一步下一步 官网下载： https://nodejs.org/zh-cn/ 1.2 安装cnpm npm install 模块名 #npm比较慢，用某宝的cnpm来替换npm npm install -g cnpm --registry=
阅读全文
摘要：1 vue官方 https://cn.vuejs.org/cn.vuejs.org/ 2 Vue CLI # 创建vue项目，需要使用vue-cli ，vue脚手架：程序项目的骨架，只需要在固定位置写代码即可 # vue-cli需要基于源nodejs，安装 # python node python
阅读全文
摘要：插槽 # 在定义组件是，预留一个地方使用标签 <slot></slot> 占位# 以后在父组件中的子组件的标签内部写 内容，html内容 就会被替换到<slot></slot>中 1 slot插槽 (内容分发) a. 单个slot b. 具名slot *混合父组件的内容与子组件自己的模板-->内容分
阅读全文
摘要：1 动态组件 1 <component> 元素，动态地绑定多个组件到它的 is 属性2 <keep-alive> 保留状态，避免重新渲染 2 基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ref放
阅读全文
摘要：1 ref属性 ref放在普通标签上，拿到的就是普通标签本身（原生节点），原生节点的属性通过.获取ref放在子组件上，拿到的就是子组件对象-通过这种方式实现子传父（this.$refs.mychild.text）-通过这种方式实现父传子（调用子组件方法传参数） 2 ref放在普通标签上 <!DOCT
阅读全文
摘要：vue之组件通信 1 组件通信 1 组件通信 1 父子组件传值 (props down, events up) 2 父传子之属性验证props:{name:Number}Number,String,Boolean,Array,Object,Function,null(不限制类型) 3 事件机制a.使
阅读全文
摘要：一、组件化开发之定义局部组件 1.组件是什么？有什么用 扩展 HTML 元素，封装可重用的代码，目的是复用-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html-组件把js，css，html放到一起，有逻辑，有样式，有html 2.局部组件的定义和使用 定义局部组件：compon
阅读全文
摘要：1 计算属性computed 复杂逻辑,模板难以维护 (1) 基础例子 (2) 计算缓存 VS methods-计算属性是基于它们的依赖进行缓存的。-计算属性只有在它的相关依赖发生改变时才会重新求值 (3) 计算属性 VS watch - v-model3 2 通过计算属性实现名字首字母大写 <!D
阅读全文
摘要：1 fetch和axios axios与fetch实现数据请求 (1)fetch（不是所有浏览器都支持，谷歌浏览器支持）XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。 兼容性不好 2 axios的引入 <script src="h
阅读全文
摘要：1 钩子函数 create let vm = new Vue() mount 挂载，把div挂载到组件中 update let vm = new Vue({ el: '#box', data: { isShow: true // 修改这个内容 }, methods: { handleClick()
阅读全文
摘要：1 setInterval 2 setTimeout 3 关掉定时器 1 setInterval 定时任务 每隔3s执行一次 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sc
阅读全文
摘要：1 v-model 之 lazy、number、trim lazy：等待input框的数据绑定时区焦点之后再变化，（懒加载）number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留trim：去除首位的空格 2 lazy、number、trim <!DOCTYPE html> <html
阅读全文
摘要：1 checkbox 如果只有一个checkbox，绑定的值就是true和false <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cd
阅读全文
摘要：事件处理 1.事件 2 change 和 blur 的区别 change 和 blur 最本质的区别：如果输入框为空，失去焦点后，change不会触发，但是blur会触发 3 input事件、change事件、blur事件 当输入框进行输入的时候 触发的事件 <!DOCTYPE html> <htm
阅读全文
摘要：v-model数据双向绑定（值变--页面跟着变） input 框，使用 v-model="username" 绑定上变量，以后，只要变量变化，页面变化，页面变化，变量变化 v-model的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset
阅读全文
摘要：v-for遍历数组(列表)：<tr v-for="(book,index) in book_list"> # book是循环到的对象，index是数组的索引对象(字典)：<p v-for="(value,key) in person">{{key}}是：{{value}}</p># value是字典
阅读全文
