![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
糖糖小姐
这个作者很懒,什么都没留下…
展开
-
ES6模块化:直接导入,默认导入导出,按需导入导出。
ES6的基本语法默认导入与默认导出按需导入与按需导出直接导入并执行模块中的代码默认导出// 默认导出export default { n1, show }默认导入// 默认导入import xxx from './默认导出'console.log(n1) 按需导出export let s1 = ‘aaa’按需导入import { s1,s2 } from './03'按需导出'直接导入并运行代码import './05直接导入并执行代码'一个模块只能使用一原创 2021-10-24 22:33:16 · 560 阅读 · 0 评论 -
vue中ref引用,this.$nextTick(cb)方法
this.$nextTick(cb方法)组件的$nextTick(cb)方法,会把cb回调推迟到下一个DOM更新周期之后执行,通俗的理解就是,等组件的DOM更新完成之后再执行cb回调函数,从而能保证cb回调函数可以操作到最新的DOM元素 showInput(){ //切换布尔值展示文本框 this.inputVisibie = true, //此时页面还未重新渲染 // this.$refs.iptRef.focus() this.$nextTick原创 2021-09-17 11:20:29 · 282 阅读 · 0 评论 -
Vue组件的生命周期
生命周期生命周期是一个组件从创建——>运行——>销毁的整个阶段,强调一个时间段生命周期函数是由vue框架提供的内置函数,会伴随着组件的生命周期自动按次序执行组件创建阶段(创建前,创建后,渲染前,渲染后) - befoCreate之前:props,data,method都不可用 - created:可用数据(在这个阶段发起ajax请求拿数据,不能操作DOM) - befoMout:将要把内存中编译好的HTML结构渲染到浏览器中,还没有当前组件的DOM结构(不能操作DOM)原创 2021-09-16 20:23:21 · 142 阅读 · 0 评论 -
vue组件的三个组成部分
vue组件的三个组成部分在template中只能出现一个根节点template组件—>模板结构script组件—>javacript行为style —>组件的样式<template> <div> <h3 class="h3-box">我是{{username}}同学, 今年{{age}}岁,请多多关照!</h3> </div></template>原创 2021-09-13 21:38:19 · 1524 阅读 · 0 评论 -
vue-cli的使用*
在终端创建项目 vue create **项目名称**vue中src目录的构成assets 文件夹:存放项目中用到的静态资源文件,例如css,imgcomponents文件夹:程序员封装的可复用的组件,都要放在components目录下mian.js是项目的入口文件,整个项目的运行,要执行main.jsvue项目的运行流程在工程化项目中,vue要做的事情:通过Main.js把App.vue渲染到index.html的指定区域中app.vueh会替换掉index.html里原创 2021-09-12 22:40:16 · 139 阅读 · 2 评论 -
在vue中使用axios
axios的定义一个专注于发起网络请求的库基本使用发起get请求<script> //http://www.liulongbon.top:3006/api/getbooks const result = axios({ method:'GET', url:'http://www.liulongbin.top:3006/api/getbooks', //URL中的查询参数 params:{原创 2021-09-12 20:22:28 · 376 阅读 · 1 评论 -
计算属性使用方法
计算属性的使用要定义成方法在使用的时候当作普通户型使用 computed:{ //所有计算属性都要定义到conputed节点之下 //计算属性在定义的时候要定义成方法格式 rgb(){ return `rgb(${this.r},${this.g},${this.b})` } }...原创 2021-09-12 17:02:37 · 549 阅读 · 0 评论 -
watch侦听器的用法
侦听器的格式watch侦听器用于监视数据的变化,从而针对数据的变化做特定的操作1.方法格式的侦听器缺点:1.无法在刚进页面的时候自动触发2.如果侦听的是一个对象,如果对象中属性发生了变化,不会触发侦听器 watch:{ username(newVal,oldVal){ if(newVal == ''){ return } console原创 2021-09-12 15:40:53 · 230 阅读 · 0 评论 -
filters过滤器的使用方法
过滤器(函数)过滤器(Filters)是Vue为开发者提供的功能,常用于文本的格式化,过滤器可以和v-bind属性绑定注:过滤器函数形参中的val永远都是管道符前面那个值ody> <div id="app"> <p> message的值是:{{message | capi}} </p> </div></body><script> const原创 2021-09-11 14:39:08 · 2257 阅读 · 0 评论 -
列表渲染 v-for的使用
<table class="table table-bordered table-hover table-striped" > <thead> <th>索引</th> <th>Id</th> <th>姓名</th> </thead>原创 2021-09-10 22:25:11 · 155 阅读 · 0 评论 -
条件渲染:v-if和v-show的区别
条件渲染指令v-if:动态的移除元素或者动态的创建元素当初始状态是flase,默认不需要展示,而且后期也很有可能不需展示时用v-if v-show:修改dispaly的属性值(适用于频繁切换元素)dispaly:none 实现元素的显示和隐藏3.在实际开发中,绝大多数时候不需要考虑性能问题直接使用v-ifv-if配套指令(v-else-if)注意:v-else-if必须配合v-if指令一起使用否则不会识别 <div v-if="type === 'A'">优</div原创 2021-09-10 15:42:24 · 105 阅读 · 0 评论 -
V-model双向绑定
v-model指令适用场景:1.input输入框2.textarea3.select修饰符.number 自动将用户输入值转为数值类型<input v-model.number="age">.trim 自动过滤用户输入的首尾空白字符.lazy 在‘change’时而非’input’时更新...原创 2021-09-10 15:20:40 · 77 阅读 · 0 评论 -
MVVM原理
Vue的特性数据驱动视图 当数据发生变化时,页面自动重新渲染!程序员只需维护好数据。 数据驱动视图是单向的数据绑定双向数据绑定 在网页中,form负责采集数据,ajax用于提交数据 **在填写表单时,双向数据绑定可辅助开发者在不操作dom的前提下,自动把用户填写内容同步到数据源** 页面表单采集数据发生变化时候,会被vue自动获取到同步到jsMVVMMVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model,View原创 2021-09-10 13:08:18 · 163 阅读 · 0 评论 -
plugin插件的安装和使用
安装npm install html-webpack-plugin@5.3.2 -D配置//使用node.js中的导出语法 向外到处一个webpack的配置对象const path = require('path')//导入 html-webpack-plugin 插件 得到插件的构造函数const HtmlPlugin = require('html-webpack-plugin')const htmlPlugin = new HtmlPlugin({ template:'./原创 2021-09-09 16:16:20 · 2272 阅读 · 0 评论 -
Vue事件修饰符
Vue事件修饰符.stop:阻止冒泡.capture:捕获出发事件.prevent:阻止事件默认行为capture:实现捕获触发事件的机制once:事件只触发一次//使用.self 实现只有点击当前元素,才会触发事件处理函数,阻止当前元素<div class = "inner" @click.once = "divHandler"> <input type="button" value="戳他" @click = "btnHanlder"></input&g原创 2021-08-18 16:15:10 · 103 阅读 · 0 评论 -
Vue基本使用
vue的基本代码//vue实例控制的这个元素区域就是V<div id="app"><p>{{msg}}</p></div><script>// 2.创建一个Vue的实例//导入包之后,在浏览器内存中就多了一个Vue构造函数//new出来的vm对象就是 MVVM中的 vm调度者 var vm = new Vue({el:'#app',//当我们new这个Vue实例,表示页面上控制哪个区域data:{//data属性中,存放的是原创 2021-08-17 23:12:42 · 196 阅读 · 0 评论