vue
关注
分享
扫一扫
文章平均质量分 64
xuanwuziyou
程序媛，威武！~
展开
-
Vue.js - 模拟Vue.js响应式原理（2/2）
项目仓库：xxxxx一. 类的说明Vue类 ：保存传入的选项数据，把选项data中的成员注入vue实例（可用this.msg访问），调用observer对象监听数据变化，调用compiler对象解析指令和差值表达式。Observer类：把data选项中属性转换成响应式数据（若data某个属性是对象，该对象的属性也具有响应式），数据变化发送通知。Compiler类：负责编译模板并解析指令和差值表达式，负责页面视图首次渲染，以及数据变化后的重新渲染。Dep类：观察者模式中的发布者，用原创 2021-04-15 21:57:12 · 369 阅读 · 0 评论 -
Vue.js - Vue.js响应式原理（1/2）
一. 数据驱动数据响应式：数据改变，则视图改变，避免频繁的Dom操作，提高运行效率双向绑定：数据改变，则视图改变；视图改变，则数据也随之改变数据驱动：开发过程中只需关注数据本身，不用关心数据如何渲染出视图二. Vue.js 数据响应式原理2.1Vue2数据响应式原理 - Object.defineProperty - 兼容IE9及以上<html><head></head><body> <h1>Vue响应式..原创 2021-04-14 21:35:22 · 423 阅读 · 0 评论 -
Vue.js - VueRouter的Hash与History模式 / 手写VueRouter
一.Hash与History模式 Hash模式 History模式 url地址外观 http://localhost:8081/#/about http://localhost:8080/about 原理 基于锚点，监听锚点变化时触发的onhashchange事件 基于HTML5的 history.pushState()方法，该方法会向浏览器历史记录中加入一条数据，会改变当前地址栏的地址，但不去加载新地址 兼容性 对于IE，IE10及以...原创 2021-03-26 17:20:00 · 340 阅读 · 0 评论 -
vue-cli3配置rem
1.安装cnpm i postcss-pxtorem --save2.项目根目录下新建 postcss.config.js 文件postcss.config.js 内容：module.exports = { plugins: { autoprefixer: { browsers: ['Android >= 4.0', 'iOS >= 7'], ...原创 2019-11-28 11:59:56 · 1065 阅读 · 0 评论 -
Vue2 实例属性 实例方法 实例事件
一.实例属性 $el {{ message }} var vm2 = new Vue({ el:"#app2", data:{ message : "I am message." } }); console.log(vm2.$el); //vm2.$el === 原生j原创 2017-09-18 17:47:49 · 1391 阅读 · 0 评论 -
Vue2 标签内容拓展slot
slot 通过标签把内容传递到模板效果：slot是标签的内容拓展通过标签把内容传递到模板名称：pen 数量：20名称：car 数量：1代码：slot是标签的内容拓展通过标签把内容传递到模板 {{ aaa.name }} {{ aaa.num }} 名称： 数量：原创 2017-09-18 20:17:18 · 1057 阅读 · 0 评论 -
Vue axios设置访问基础路径
原文地址：http://blog.csdn.net/fengjingyu168/article/details/78120368看过axios的官方文档后配置变得简单：在main.js 做如下配置：import axios from 'axios'axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web'转载 2017-11-07 14:52:45 · 4718 阅读 · 0 评论 -
vue 动画之展开收起
亲测好用：https://www.hangge.com/blog/cache/detail_2386.html方法一 . 用css实现 高度已知的 内容区域的展开收起：<template> <transition name="myWrap" class="myWrap"> <div style="height: 54px;" v-if="...原创 2019-06-05 16:09:24 · 4217 阅读 · 1 评论 -
如何用vue-cli3创建项目（vue-cli 3.8.4）
如何用vue-cli3创建项目（vue-cli 3.8.4）Step1 安装vue-cli： cnpm install -g @vue/cliStep2 查看vue-cli版本： vue -V Step3用vue-cli快速创建一个项目： vue create vuex (now Iuse the default setting) ...原创 2019-06-29 21:04:32 · 1035 阅读 · 0 评论 -
如何使用vuex
如何使用vuex目标：在一个项目中使用vuex，并正确执行。如何使用vuex 项目实例之gitHub地址：https://github.com/WangShuangshuang/vuex项目截图：思路：1. 用 new Vuex.store({ }) 创建一个vuex的实例，并把这个实例传入到main.js中的new Vue({ })对象中。2. Vuex.store()...原创 2019-06-29 22:02:34 · 251 阅读 · 0 评论 -
Vue2 访问父级数据this.$parent 修改插值语法delimiters
效果：Hello Jack !My name is Jack ! This month is September .changeName代码： Vue.component("sayHello",{ template:"Hello ${this.$parent.username} !", //访问父实例(a原创 2017-09-18 15:59:08 · 8994 阅读 · 0 评论 -
Vue2 混入mixins
效果：native message您的代办事项有：3 件 + 控制台输出：created in overrallcreated in aaacreated in nativemounted in overrallmounted in aaamounted in native 点击+按钮，控制台输出：addItem in nat原创 2017-09-18 14:20:56 · 1774 阅读 · 0 评论 -
Vue2 监听属性改变watch
效果：幼儿园入学年龄（3～6）： + -代码： 幼儿园入学年龄（3～6）： + - {{ errMsg }} var app = new Vue({ el:"#app2", data:{ child:{age:2}, hasErr:false,原创 2017-09-18 11:52:29 · 5868 阅读 · 0 评论 -
Vue2 指令v-on v-model 各种表单控件
1.绑定事件指令v-ondiv id="app"> input type="number" v-model="myNumber"> button v-on:click="add">加1button> button @click="reduce">减1button> br>br> input type="number" v-model="one原创 2017-08-27 14:54:22 · 1887 阅读 · 0 评论 -
Vue2 指令v-bind v-pre v-cloak v-once
1.属性绑定指令 v-bindstyle> article{padding:20px;border:4px solid #ccc} .redColor{color:red} .blueColor{color:blue} .narrow{width:50%} .head{text-decoration:underline}style>原创 2017-08-27 16:01:00 · 1918 阅读 · 0 评论 -
Vue2 自定义全局指令Vue.directive和指令的生命周期
在Vue中，自定义指令的生命周期，有5个事件钩子：1-bind 被绑定， 2-inserted 被插入， 3-update 开始更新， 4-componentUpdated 更新完成，5-unbind 解除绑定。我们可以设置指令在某一个事件发生时的具体行为。例子如下：页面一进来：在控制台中设置一个新值：再设置一个新值：点击解绑，解除绑定(解除绑定之后，原创 2017-09-03 15:49:09 · 10143 阅读 · 0 评论 -
Vue2 全局-Vue.extend构造器拓展
下面用 Vue.extend 方法构造一个全局的网页底部。代码：我是内容，一大片内容。谢谢你了。 var Footer=Vue.extend({ template:"联系人：{{ contact }} 版权所有：{{ company }}", data:function () { return{原创 2017-09-03 16:00:28 · 2438 阅读 · 0 评论 -
Vue2 全局-Vue.set更新vue数据
代码： {{ name }} --- {{ price }} --- {{ count }} 减少 function reduceOne() { Vue.set(cartData, 'count', cartData.count-1); } var cartData={ name:"T-shirt原创 2017-09-03 16:06:43 · 4937 阅读 · 0 评论 -
Vue2 构造器的生命周期
{{ message }} increment销毁 var vm=new Vue({ el:"#app", data:{ message:1 }, methods:{ increment:function () { this.mes原创 2017-09-11 10:36:29 · 289 阅读 · 0 评论 -
Vue2 模板template的四种写法
我是直接写在构造器里的模板1 我是选项模板3 我是script标签模板4 var vm=new Vue({ el:"#app", data:{ message:1 }, //第2种模板 写在构造器里 //template:`我是选项模板2`原创 2017-09-11 10:50:39 · 36847 阅读 · 2 评论 -
Vue2 组件
一.全局组件和局部组件 全局注册的组件可以在全局使用；而局部注册的组件只能在其定义的实例内使用。 Vue.component("hello1",{ template:"这是全局化组件" }); worldworld={ template:"我是局部组件" }; var vm=new Vu原创 2017-09-11 14:42:48 · 375 阅读 · 0 评论 -
Vue2 向Vue.extend传参-propsData属性
效果：Vue.extend的propsData 用得很少，仅用于开发环境我是网站头部 I am message! -by wss代码：Vue.extend的propsData 用得很少，仅用于开发环境 var CommonHeader = Vue.extend({ template:"我是网站头部 {{ message }} -by {{ usern原创 2017-09-18 10:23:34 · 14917 阅读 · 0 评论 -
Vue2 计算属性computed
效果：点击增加数量按钮，计算属性-总价将自动变化；methods方法计算的属性也将自动变化单价： 数量： 总价： ¥600总价： ¥600代码： 单价： 数量： + 总价： {{ total }} 总价： {{ total2() }} var vm = new Vue({ el:"#app", dat原创 2017-09-18 10:42:26 · 499 阅读 · 0 评论 -
Vue2 指令v-if v-show v-for v-text v-html
1.插值指令{{ }} div id="helloWorld"> p>{{ msg + "!!!"}}p> p>input type="text" v-model="msg">p>div>script> var app=new Vue({ el:"#helloWorld", data:{ msg:"原创 2017-08-26 22:33:16 · 884 阅读 · 0 评论