lihaoen666的博客

基本概念这是一个处理异步请求的插件。 APIget(url, [options])head(url, [options])delete(url, [options])jsonp(url, [options])post(url, [body],[options])put(url, [body],[options])patch(url, [body],[options])参数url

概念简单来说，就是当我们点击某些按钮时，去到不同的路径页。但其实它并没有刷新，还是单页面的。简单配置实例HTML <div id = 'app'> <!--这里的router-link to后面加上路径--> <router-link to="/">首页</router-link> <router-link to="/about">关于我们</r

使用方法我们平常内容，都是在template里面定义的。但在template里面使用slot以后，可以直接在html的组件标签内写内容。实例1<div id = 'app'> <panel> nsdjkfn </panel></div><template id="panel-tpl"> <div class="panel"> <div cla

基本使用首先，在JS里面声明一个变量，里面保存一些公共用的方法、数据。调用的时候，直接通过mixins调用。实例//定义变量var base = { methods: { toggle (){ if(this.visible){ this.visible = false; }else{

使用方法HTML里面，使用“v-”前缀自定义一个属性。JS里面使用directive设置。语法Vue.directive('属性名',function(所在元素,定义内容){})实例HTMLdiv v-pin="card1.painned" class="card">button @click="card1.painned =!card1.pa

current（货币相关）实例HTML<input v-model="price">{{ price | currency}}JS//名字 函数 html里的priceVue.filter('currency', function(val){ val = val || 0; return val + '元';});new Vue({

思路核心方法$emit() 触发事件$on() 监听事件核心思路定义一个调度器，其实就是new一个Vue。让这个调度器承载事件，也就是使用上面的两个方法。实例//第四步，定义一个调度器var Event = new Vue();//负责说Vue.component('tim',{ template:`<div> // 第一步，定义了一个keyup事件，触发

父子通信props实例1html（父）的数据 传到 js（子）里的数据propsHTML<div id = 'app'> //我们在这里定义了一个变量msg <alert msg="Yoooo"></alert></div>JStemplate: '<button @click="on_click()">弹框</button>' ,//在这里，props接收了变量msg

点赞功能小例子HTML<div id = 'app'> <like></like></div>JSVue.component('like',{ template: '<button @click="toggle_like()">赞 {{like_count}}</button>', data: function(){ return {

概念其实就是在标签调用变量，在computed里面定义函数进行相应运算。计算属性只有在它的相关依赖数据发生改变时才会重新求值。所以，性能较好。实例假设我们需要求出总分和平均分。<table border="1"> <thead> <th>学科</th> <th>分数</th> </thead> <tbody> <tr>

v-for专门用于迭代的指令。实例字符串假设我们有一个foodList在data里面，使用v-for进行迭代，变量名为food。记住，xxxList，变量名就是xxx。jsnew Vue({ el: '#app', data: { foodList: ['麦辣鸡腿堡','甜筒','薯条'], }})html<div id = 'app'> <u

计算属性其实就是在标签调用变量，在computed里面定义函数进行相应运算。计算属性只有在它的相关依赖发生改变时才会重新求值。所以，有时候能立即返回值。实例<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p>

事件绑定方法v-on 可以简写成@使用两种方式内联 直接把js写在标签上调用方法 调用methods里定义的方法事件修饰符.stop 阻止单击事件冒泡.prevent 提交事件不再重载页面.capture 使用事件捕获模式.self 当事件在该元素本身 (比如不是子元素) 触发时触发回调.once<!-- 修饰符可以串联 --><a v

文本渲染方法{{ }}把内容写在双话括号内，也可以写简单的js表达式。（加减乘除，三元运算符等） v-html 将模版便签内的内容展示到页面v-text 将模版便签以及内容展示到页面实例<template> <div> <p v-text = 'hello'></p> <p v-html = 'hello'></p> </div>

使用组件可以扩展 HTML 元素，封装可重用的代码。 全局注册语法Vue.component('组件名', {选项})实例html代码<div id = 'app'> //使用组件名标签 <my-header></my-header></div>js代码//注册my-header全局组件Vue.component('my-header',{ tem

使用每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始，使用new关键字可以实例化vue对象。基本语法new Vue({ el: '', template: '', data: { }})参数说明el: 挂载到哪个元素上，通过id、class或者标签名template: HTML片段data: 数据（会被代理到实例对象上）简单实例var my