VUE
关注
分享
扫一扫
xiaohanzhu000
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue 组件 component
全局化注册组件Vue.component('panda',{ template:`<div style="color:red;">全局化注册的jspang标签</div>` })局部注册组件局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。 <script type="te...原创 2018-07-02 22:35:33 · 358 阅读 · 0 评论 -
VUE- Mixins 混入选项操作 和 extends
Mixins一般有两种用途：1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。一、Mixins的基本用法我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”.代码实现过程:123456789101112131415...原创 2018-07-03 11:04:44 · 596 阅读 · 0 评论 -
VUE- delimiters 选项
delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。1 delimiters:['${','}']现在我们的插值形式就变成了${}。代替了{{ }}...原创 2018-07-03 11:23:12 · 7130 阅读 · 0 评论 -
Vue和Jquery.js一起使用
1、下载并引入jquery框架下载可以去官网进行下载，我这里使用的版本是3.1.1，下载好后在需要的页面引入就可以了。当然你还有很多其它的方法引入jquery，只要可以顺利引入就可以了。1<script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>试着作一个案例，在DOM被挂载...原创 2018-07-03 12:33:15 · 8635 阅读 · 0 评论 -
VUE - 实例事件
实例事件就是在构造器外部写一个调用构造器内部的方法。这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据。我们还是写一个点击按钮，持续加1的例子。一、$on 在构造器外部添加事件。1234app.$on('reduce',function(){ console.log('执行了reduce()'); this.num--;});$on接收两个参数，第一个参数是调用时的事件名...原创 2018-07-03 13:29:18 · 290 阅读 · 0 评论 -
Vue - 内置组件 -slot 父组件向子组件传值
slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。先来定义一个<jspang></jspang>的组件，这个组件用来显示博主的一些信息。我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）1234567data:{ jspangData:{ bolgUrl:'http:/...原创 2018-07-03 13:57:43 · 6176 阅读 · 0 评论 -
Vue.js+Koa2电商实战笔记
1.项目初始化 npm -v //确认安装node基本环境npm i vue-cli -g //-g 全局安装vue-clivue init webpack //使用webpack模板安装 不安装eslint,eslint用于多人开发，按照谷歌和facebook的代码标准开发。unit --no //大公司有专门测试人员ese --no packa...原创 2018-08-15 00:58:54 · 2868 阅读 · 1 评论 -
vue实现原理
Vue 他的模型设计就是MVVM，分为视图view,数据模型层Model,视图数据层viewModel,视图数据层通过Ajax向数据模型层交互数据，通过对model层拿到的数据进行二次封装，然后渲染到视图层上面。MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终...原创 2018-08-15 11:19:49 · 1070 阅读 · 0 评论 -
v-else-if
<div id="app5"> <div v-if="status == 'loading'"> <div style="background-color:blue">loading</div> </div> <div v-else-if="原创 2018-08-29 15:02:18 · 434 阅读 · 0 评论 -
VUE - watch
数据变化的监控经常使用，我们可以先来看一个简单的数据变化监控的例子。例如天气预报的穿衣指数，它主要是根据温度来进行提示的，当然还有其它的，咱们就不考虑了。一、看一个监控变化的案例温度大于26度时，我们建议穿T恤短袖，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿棉衣羽绒服。先来模拟一个温度变化的情况：我们使用按钮来加减温度。<div id="app"> ...原创 2018-07-03 10:44:15 · 430 阅读 · 0 评论 -
VUE - Methods
一、methods中参数的传递使用方法和正常的javascript传递参数的方法一样，分为两部：1、在methods的方法中进行声明，比如我们给add方法加上一个num参数，就要写出add:function(num){}.2、调用方法时直接传递，比如我们要传递2这个参数，我们在button上就直接可以写。<button @click=”add(2)”></button>.现...原创 2018-07-03 10:22:17 · 509 阅读 · 0 评论 -
Template 制作模版
一、直接写在选项里的模板直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议这么写。javascript代码：123456789 var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, template:` <h1 s...原创 2018-07-02 21:14:00 · 344 阅读 · 0 评论 -
Vue的生命周期（钩子函数）
<script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:1 }, methods:{ jia:functio...原创 2018-07-02 20:54:12 · 340 阅读 · 0 评论 -
VUE directive 自定义指令
1.Vue.directive 自定义指令<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.min.js"&原创 2018-07-02 18:09:57 · 244 阅读 · 0 评论 -
Vue案例之拖拽
Vue拖拽<div id="box"> HTML 位置 <br>x:{{val.x}} <br>y:{{val.y}} <div v-drag="greet" id="drag" :style="style&am原创 2018-07-02 15:08:37 · 1190 阅读 · 0 评论 -
Vue2.0内部指令
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。1.v-if v-else v-show 指令v-if用来判断是否加载html的DOM<div id="app"> <div v-if="isLog...原创 2018-07-01 23:18:39 · 508 阅读 · 0 评论 -
Vuex 最简单有效的使用
安装、使用 vuex首先我们在 vue.js 2.0 开发环境中安装 vuex :npm install vuex --save然后 , 在 main.js 中加入 :import vuex from 'vuex'Vue.use(vuex);var store = new vuex.Store({//store对象 state:{ show:fal...原创 2018-06-13 11:14:54 · 905 阅读 · 0 评论 -
VUE - propsData Option 全局扩展的数据传递
propsData 不是和属性有关，他用在全局扩展时进行传递数据。扩展标签已经做好了，这时我们要在挂载时传递一个数字过去，我们就用到了propsData。我们用propsData三步解决传值：1、在全局扩展里加入props进行接收。propsData:{a:1}2、传递时用propsData进行传递。props:[‘a’]3、用插值的形式写入模板。{{ a }}<!doctype html&...原创 2018-07-03 09:30:10 · 821 阅读 · 0 评论 -
VUE - computed 计算属性 ( get set )
computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……。这样可以不污染数据源。<!doctype html><html><head><meta charset="utf-8"><title>vue</title><script src=&am原创 2018-07-03 09:43:10 · 941 阅读 · 0 评论 -
Vue动态组件
前面的话 让多个组件使用同一个挂载点，并动态切换，这就是动态组件。本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以实现动态组件<div id="example"> <button @click="change">切换页面</button> <c转载 2018-08-30 01:02:35 · 11383 阅读 · 2 评论