随笔分类 - vue
摘要：npm因为是国外的镜像源，所以在安装项目依赖的时候速度比较慢，但是不建议使用cnpm可能会出现一些bug,可以用yarn,也可以通过更换镜像源来提高npm的速度。 npm install --registry=https://registry.npm.taobao.org
阅读全文
摘要：vue的生命周期 1.beforeCreated 实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用，new Vue() 表示实例的初始化。 2.created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data
阅读全文
摘要：组件的使用 比如说将搜索框作为一个可复用的组件 理论知识： 父组件可以使用 props 把数据传给子组件。 子组件可以使用 $emit 触发父组件的自定义事件。 例子： 1.子组件：在components中新建一个.vue文件（最好带文件夹） <template> <view class="sear
阅读全文
摘要：vue.js中splice()方法实现对数组进行增删改的操作 语法： splice(index,len,[item]) index：必须是数字，该参数是开始插入或删除数组元素的开始下标。 len:替换或者删除的长度 当len=0时：插入； 当len=1时：删除指定index的数组元素，当后面没有it
阅读全文
摘要：需要在element-ui中按需导入 Vue.prototype.confirm = MessageBox.confirm 然后在删除方法中加入下面代码就行 /*提示消息*/ const confirmResult = await
阅读全文
摘要：vue学习12 v-model指令 v-model指令的作用是便捷的设置和获取表单元素的值 绑定的数据会和表单元素值相关联 绑定的数据<——>表单元素的值 代码练习： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
阅读全文
摘要：vue学习11 v-on补充 时间绑定的方法写成函数调用的形式，可以传入自定义参数 定义方法是需要定义形参来接收传入的实参 事件的后面跟上.修饰符可以对事件进行限制，.enter可以限制触发的按键为回车键，另外事件修饰符有很多种 代码练习： <!DOCTYPE html> <html lang="e
阅读全文
摘要：vue学习10 v-for指令 v-for指令的作用是：根据数据生成列表结构 数组经常和v-for结合使用，语法是(item,index) in 数据 数组长度的更新会同步到页面上，是响应式更新 练习代码： <!DOCTYPE html> <html lang="en"> <head> <meta
阅读全文
摘要：vue学习09 图片切换 定义图片数组:imgList:[]，列表数据使用数组保存 添加图片索引:index 绑定src属性:使用v-bind，v-bind指令可以设置元素属性，比如src 图片切换逻辑:按下按钮++ 切换显示状态：使用v-show，v-show和v-if都可以切换元素的显示状态，频
阅读全文
摘要：vue学习08 v-bind指令 v-bind指令的作用是为元素绑定属性 完整写法是v-bind:属性名，可简写为:属性名 练习代码为： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo
阅读全文
摘要：vue学习07 v-if指令 v-if 指令的作用是：根据表达式的真假切换元素的状态。 本质是通过操作dom元素来切换显示状态。 表达式的值为true,元素存在于dom中，为false,从dom树中移除。 练习代码为： <!DOCTYPE html> <html lang="en"> <head>
阅读全文
摘要：vue学习06 v-show指令 v-show指令是：根据真假切换元素的显示状态 原理是修改元素的display,实现显示隐藏 指令后面的内容，最终都会解析为布尔值（true和false） 练习代码： <!DOCTYPE html> <html lang="en"> <head> <meta cha
阅读全文
摘要：vue学习05 小小计数器 用前面学过的v-on指令来完成一个计数器的功能： 按加键数字加，按减键数字减，像添加商品数量一样加减 创建Vue示例时：需要创建el挂载点，data数据，methods方法。 v-on指令的作用是绑定事件，简写为@ 方法中通过this关键字来获取data中的数据 v-te
阅读全文
摘要：vue学习04 v-on指令 v-on的作用是为元素绑定事件，比如click单击，dbclick双击 v-on指令可简写为@ 代码测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor
阅读全文
摘要：vue学习03v-html v-html指令的作用是：设置元素的内部html链接 内容有html 的结构会被解析为标签 v-text指令无论内容是什么，只会解析文本 解析文本使用v-text，需要解析html结构使用v-html <!DOCTYPE html> <html lang="en"> <h
阅读全文
摘要：vue学习02-v-text 引入环境版本，cdn网络引用或者本地js应用 html的结构，一般是div 创建vue实例 el:挂载点 v-text指令的作用是设置标签的内容 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容 <!DOCTYPE html> <html lang="en
阅读全文
摘要：vue学习01 第一个vue程序 引入环境版本，cdn网络引用或者本地js应用 html的结构，一般是div 创建vue实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co
阅读全文
