vue php实例github,vue全家桶

vue-devtools

1.在vue中配置，是否允许使用vue-devtools检测代码

Vue.config.devtools = "true" //默认是true,生产时为false

Vue.config.productionTip = "false" //组织vue启动时生成消息提醒

2.全局配置自定义键盘事件keycode

Vue.config.keyCodes = {

a:65

}

复制代码

3.简写

事件的简写 v-on:click --->>> @click

属性的简写 v-bind:src --->>> :src

4.过滤filters

第三方库

自定义过滤器

全局过滤器

局部过滤器

5.axios API获取数据的https://api.github.com/users/zhusiming

get方法

方式1:

axios.get("server.php?name=lili&age=10")

方式2:

axios.get("server.php",{

params:{

name:lili,

age:19

}

})

.then(resp=>{

console.log(resp.data)

}).catch(err=>{

consolo.log("请求失败！")

})

复制代码post方式

方法一: axios.post("server.php","name=lili&age=10")

方法二: axios.post("server.php",transformRequerst)

vue-resource

跨域问题jsonp

this.http.jsonp("http://baidu.com",{

params:{

wd:a

},

jsonp:cd //百度使用的jsonp格式为cd，(正常的使用是callback方法)

})

复制代码

6.computed和methods的区别

computed它走的是缓存,也就是它依赖的data数据中的messageb发生变化的时候，他所有设计到messageb的值都会变化computed是属性调用:{{computedTest}}，而methods是函数调用:必须要加上()来调用，如{{methodTest()}}

1.计算属性是根据他得依赖进行更新的，只有在相关的依赖发生改变的时候才能更新

2.计算属性是缓存的，只有相关依赖没有改变，多次访问计算属性得到的值是之前缓存的值，不会多次执行

3.计算属性有set和get方法，但是实际的赋值是通过改变缓存来赋值的

7.vue实例的属性和方法

一：属性

vm.属性名 获取data中的属性 如vm.meg

vm.$el

获vue实例关联的元素 vm.$el 获取的书dom元素

用法

el.style = "corlor:red"

vm.$data

获取数据对象data

vm.$options

获取vue实例中的方法

用法

1.vm.

options.age;

3.vm.$options.show();

vm.$refs

获取dom元素

用法

1.在dom上绑定ref：

你好

2.取值：vm.

refs.hello.style = "red"

二：方法

一.$mount()

1.手动挂载 vm.$mount("#app")

2.初始化挂载

new vue({

data:{

mes:"欢迎来到vue"

}

}).$mount("#app")

复制代码二.$nextTick(callback)方法:在dom更新完成之后，在执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的dom

data：{

name:"汤姆"

}

//修改数据

vm.name = "tom"

//这里因为DOM还没有更新完，vue实现响应式并不是数据发生改变后dom立即变化(需要按照一定的策略进行更新，需要时间)，所以打出的还是汤姆

consolo.log(vm.$refs.title.texContent) ----------->>> 打出的还是汤姆

vm.$nextTick(function(){

consolo.log(vm.$refs.title.texContent) ----------->>> 打出的是tom

})

复制代码三:

1.$set(obj,key,val)

this.user.age = "20"//这是普通的方式为对象添加属性时,vue无法实时监控到(也就是添加不上)

this.$set(this.user,"age",20) 这种方法可以实现

也等同于这种 vue.set(this.user,"age",20)

2.$delete(obj,key)

this.$delete(this.user,"age")

3.$watch(data,callback,[options])

方式一：

vm.$watch("age",function(oldV,NewV){

console.log('计数器值的变化 :' + NewV + ' 变为 ' + oldV + '!');

})

方式二：

watch:{

//监听数据

kilometers:function(val){

this.kilometers = val;

this.meters = val*1000;

},

meters:function(val){

this.kilometers = val/1000;

this.meters = val;

},

age:(newval,oldval)=>{

consolo.log(newval,oldval)

},

//这里监听对象

user:{

handler:(newval,oldval)=>{

consolo.log(newval,oldval) //这里是引用类型 所以拿到的数据是相同的

},

deep:true //深度监听对象的变化

}

}

复制代码

8.自定义指令

全局自定义指令

Vue.directive()

{{mes}}

Vue.directive("hello",{

bind(el,binding){

consolo.log("指令所绑定的dom对象:"+ el);

el.style.color="red";

consolo.log("获取dom元素的信息:"+ binding)

alter("指令第一次绑定到元素上时调用,只调用一次，可执行初始化的操作")

},

inserted(){

alert("被绑定元素插入到dom中时调用")

},

update(){

alert("被绑定元素所在模板更新时调用")

},

componentUpdated(){

alert("被绑元素所在模板完成一次更新周期时调用")

},

unbind(){

alert("指令与元素解绑时调用，只调用一次")

}

})

复制代码

局部自定义指令

9.过度和动画

单元素动画

v-enter必须放在css的最后面，否则初始化的时候不出现

结合第三方库animate.css使用

enter-active-class="fateLeft" :进入的动画

leave-active-class="fateright" :离开的动画

变化的标签

复制代码多元素动画

变化的标签

复制代码

10.组件 1.组件名字要带 - 并且所有单词为小写 2.实例的vue对象vm也是一个组件 Root跟组件

创建组件(全局组件)

方法一：先创建组建的构造器，然后由组件构造器创建组件

var mycomponet = Vue.extend({

template:"

你好世界！！

"

})

Vue.component("my-hello",mycomponet)

复制代码方法二:直接创建组件

Vue.component("my-world",{

template:"

你好世界！！

"

})

复制代码

局部组件

new Vue({

el:"#app",

components:{

'my-world':"

我是局部组件"

}

})

组件的模板

我是模板的组件

• {{val}}

new Vue({

el:"#app",

components:{

'my-world':{

template:"#wbs",

data(){

return {

arr:["wq4","wer","wqerqwe"]

}

}

}

}

})

复制代码

动态组件

keep-alive用法:不用每次都重新创建组件，可以缓存下来component组件(dom不更新，数据缓存到本地)

复制代码

11.组件之间的传值

(1).父传子

父级传值:v:bind:codeList="dataList"

子级接收:props:[codeList]

(2).子传父级

子级传值

@click="btnSubmit"

btnSubmit(){

this.$emit("parentNum","我是传过来的值","我是传过来的第二个值")

}

父级接收

method(){

UpdataTitle(Newtitle,second){

this.title = Newtitle;

this.val = second;

},

}

复制代码

(3).单项数据流(传递)

父组件可以传递给子组件数据，反过来则不可以

解决方法：使用.sync，需要显示的触发一个更新事件：

子向父传值：$emit("update:name","我是更改的值")

复制代码

(4).非父子组件之间如何通信

a.全局声明cont Event = new Vue();

b.发送数据 Event.$emit("事件名称"，数据)

c.接收 Event.$on(事件名称,data=>{

consolo.log(data)

})

复制代码

12.slot内容分发

slot原意：位置，槽

作用：用来获取组件总的原内容

用法：

1.单slot 那里取值就在那里写这个组件

如

或者组件里面的值是空的，可以直接提醒：如果没有内容，则显示该内容

2.具名slot

• 1111
• 2222
• 3333
• 4444

1. 1111
2. 2222
3. 3333
4. 4444

复制代码

13给自定义的组件添加事件

自定义的组件是不能直接触发methods中的定义好的方法的，必须在点击事件的时候，添加事件修饰符

@click.native = 'send()'

14使用less

1.需要安装less 和 less-loader

2.在webpack的配置信息中配置

3.使用：

在style中指定lang="less"

复制代码

15自定义全局组件