![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vuejs学习笔记
chengyu_wang
爱学习,爱编程,爱静静
展开
-
Vue组件与组件间通信
组件的用法注册之后才能使用,注册分局部注册和全局注册组件和Vue实例类似,基本可以使用其所有内容(data,computed,methods,filters,watch)与Vue实例不同,data是函数,输入需要return全局注册<!DOCTYPE html><html><head> <title>show</title> <meta charset="utf-8"></head><b原创 2017-12-28 19:53:25 · 453 阅读 · 0 评论 -
Vue组件实战之ivew源码button篇
源码template> div :class="wrapClasses"> template v-if="type !== 'textarea'"> div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotRead原创 2018-02-06 23:59:21 · 2906 阅读 · 0 评论 -
Vue组件实战之ivew源码Icon篇
源码template> i :class="classes" :style="styles">i>template>script> const prefixCls = 'ivu-icon'; export default { name: 'Icon', props: { type: String,原创 2018-02-06 23:58:10 · 3589 阅读 · 0 评论 -
Vue.js学习笔记(一)
Vue是构建用户界面的渐进式框架,可以根据需要选择使用的模块,只关注视图层Vue中的两个核心点:响应的数据绑定 就是当数据发生改变的时候,视图就可以自动更新,也就是利用Object.defineProperty中的setter/getter代理数据,监控对数据的操作, 因为IE8及以下不支持Object.defineProperty,所以Vue不兼容IE8及以下<div id="demo1>原创 2017-04-27 15:07:24 · 444 阅读 · 0 评论 -
Vue.js的生命周期
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head><body> <div id="demo"></div> <script src='https://cdn.bootcss.com/vue/2.3.2/vue.js'></script>原创 2017-05-05 13:10:25 · 664 阅读 · 0 评论 -
Vue.js 表单控件
表单控件 使用v-model实现数据的双向绑定,下面简单演示一下v-model的用法text <div id="demo"> <input type="text" v-model='message'> <p>You input is: {{message}}</p> </div> <script src="https://cdn.bootcss原创 2017-05-05 13:10:52 · 553 阅读 · 0 评论 -
Vue.js v-for的简单demo
v-for 命令主要用于列表渲染,将根据接收到的数组重复渲染 v-for 绑定到DOM元素及内部的子元素,并且可以通过设置别名的方式,获取数组内数据渲染到节点中.一个简单的demo <div id="demo"> <ul> <li v-for='data in aDatas'> <span>{{data.title}}</sp原创 2017-05-05 14:24:53 · 525 阅读 · 0 评论 -
Vue.js 过滤器
Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示:{{ message | filter }}<div :id="Id | filter"></div>new Vue({ // ... filters: { filterNa原创 2017-05-12 15:24:24 · 239 阅读 · 0 评论 -
Vue.js 计算属性
<div id="example"> {{ message.split('').reverse().join('') }}</div>正常情况可以这么用,但是有的时候计算太长了,不利于模板维护.这个时候,我们就可以使用计算属性了.<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reverse原创 2017-05-12 15:25:24 · 239 阅读 · 0 评论 -
vue-router 学习笔记
安装vue-routernpm install vue-router --save在main.js(应用的入口文件)中写入以载入vue-routerimport Vue from 'vue'import routes from './vue-router/vue-router-config.js'import vue-router from 'vue-router'Vue.use(vue原创 2017-09-11 13:26:27 · 1132 阅读 · 0 评论 -
Vue 动画(过渡)
也叫过渡,即某一个样式向另一个样式变化的过程本质上使用的是CSS3主要使用了 transition 主要使用transition组件.要给组件设置一个name.然后就可以使用 {name}-enter-active,{name}-leave-active,(这两个最常用),{name}-enter,{name}-enter-to,{name}-leave,{name}-leave-to 等几个原创 2017-11-09 14:10:38 · 300 阅读 · 0 评论 -
Vue 自定义指令
Vue.directive<!DOCTYPE html><html><head> <meta charset='utf-8' /> <title>自定义指令</title></head><body> <div id='app'> <h1 v-hello>{{msg}}</h1> <button @click='change'>改变msg内容原创 2017-10-31 12:11:08 · 633 阅读 · 0 评论 -
Vue自定义全局组件(插件)
全局组件: 就是指可以在main.js中使用Vue.use()进行全局引入,然后在其他组件中就可以使用了import VueRouter from 'vue-router'Vue.use(VueRouter)普通组件: 每次使用时都要引入如何自定义全局组件 首先写一个组件然后写一个引入文件// index.jsimport componentName from './src/compon原创 2017-11-24 10:55:12 · 4248 阅读 · 3 评论 -
Vuex 学习笔记
项目Github 地址https://github.com/BigFaceWangCY/web/tree/master/vuex-demo Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的原创 2017-11-23 16:38:37 · 256 阅读 · 0 评论 -
vuex 源码解析
目录分析# 首先 clone 一下项目git clone https://github.com/vuejs/vuex.git# 然后进入源码目录cd ./vuex/src# 源码目录结构.├── helpers.js // 提供 action、 mutations 以及 getters 的查找 API├── index.esm.js├── inde...原创 2018-03-01 10:56:12 · 3228 阅读 · 0 评论