vue基础

没实践之前总是只知道一点皮毛，似懂非懂，实践之后自己对vue有了更加深刻的认识。

内部指令：

基本

1、v-if/v-else  和v-show：

v-if用来判断是否加载html的DOM：用法v-if=“XXX”（XXX在data中）

v-show用来调整css中的display属性，DOM是已经加载出来了的，只是css控制没有显示出来。

区别：v-if：判断是否加载，可以减轻服务器的压力，在需要的时候加载。 v-show：调整的css属性，可以使客户端的操作更加流畅。

2、v-for指令循环渲染一组打他数组，指令需要以item in items形式的特殊语法，items是原数组，item是数组元素迭代的别名。

排序

computed：{sortItems：function（）{

return this.items.sort();}}  (一定要注意声明一个新的对象，因为sort方法直接在数组上重排序，不声明会污染原来的数据源。)

记住数组中即使每一项都是数值，但是比较的还是是字符串。所以数据位数不同会出现bug，但是具体的方法我们可以参见红宝书p93,其实就是sort参数里面加上compare函数）；

对象中排序：同样首先利用原生的对象形式的数组排序方法。

function sortbykey（array，key）{

return array.sort（function（a，b）{

var x=a[key];  var y=b[key];    return (xy)?1:0;

}）}

data里面items的值和computed是不允许相同的。

v-text和v-html

由于直接使用{{}}会在JavaScript出错的时候暴露（生产环境动态渲染HTML同意导致XSS攻击）

v-on绑定事件

键盘绑定事件

v-model双向数据绑定

使用范围：文本区域加入数据绑定、多选按钮绑定一个值、多选按钮绑定一个数组、单选按钮绑定数据

v-bind

一般用于处理HTML中的标签属性

用处：1、绑定属性值；2、直接绑定class样式；3、绑定class并进行判断；4、绑定class数组；5、绑定style（用对象写法）；6、绑定style样式（利用对象绑定）

其它指令

1、v-pre

{{message}}

跳过vue的编译，直接显示原始值

2、v-cloak

渲染完整个DOM后才能使用，必须和CSS样式一起使用

[v-cloak]{
display:none;
}

{{message}}

3、v-once

第一次DOM时进行渲染，渲染完成之后视为静态内容，跳出以后的渲染

第一次绑定的值：{{message}}

全局API

Vue.directive自定义指令

Vue.directive("XXX",function(el,binding,vnode){
   el.style='color:'+bonding.value;
});

之后就可以像v-bind一样使用了； v-XXX=“？？？”？？？为data中的键；

三个参数：el：指定所绑定的元素，可以直接用来操作DOM；binding；生成一个对象，包含指令的很多信息；vnode：vue编译形成的虚拟结点。

生命周期：bind；inserted；update；componentUpdated；unbind；

Vue.extend构造器的延伸

自定义无参数标签

和自定义组件很像，但是没有传递任何参数，只是一个静态标签。

var authorExtend=Vue.extend({
template:" 
{{authoreName}}
"
data:function(){
return{
authorName:'manyuyu',
authorUrl:"http://www.manyuyu.com"}
}
})

但是这个额时候html中这个标签还不起作用，可以参考一下vue的生命周期。所以我们还是需要一次挂载；

new authorExtend().$mount('author');

这样我们就可以直接在html中输入就是管用的。

挂载到普通的标签上

通过在html标签上的id或者class来生成扩展实力构造器，Vue.extend里的代码是一样的，在挂载的时候我们用类似jQuery的选择器方法进行挂载就可以

new authorExtend().$mount('#author')

Vue.set全局操作

作用即使在构造器外部操作构造器内部的数据、属性或者方法。

比如：在vue构造器内部定义了count为1的数据，我们在构造器外部定义了一个方法，每次点击按钮就给值加1，这时就需要Vue.set。

var outData={
count:1,
goodName:'car'
};
var app=new Vuee({
el:'#qpp',
data:outData;
})

在外部改变数据的三种方法：

1、利用Vue.set改变

function add(){
Vue.set(outData,'count',4);
}

2、用Vue对象的方法添加

app.count++

3、直接操作外部数据

outData.count++;

为什么要有Vue.set的存在？（其实我的个人理解是只对外部的游泳）

由于JavaScript的限（Vue数组变异方法的不足，修改数组中的值，值会修改，但是，渲染的视图并没有改变），Vue不能自动检测以下变动的数组：当利用索引值直接设置一个项时；修改数组的长度时；

tip：Vue.set()在methods中也可以写成this.$set()

但是最好不要再Vue实例化之后再为其添加修改属性：（https://www.cnblogs.com/leona-d/p/6708167.html?utm_source=itdadao&utm_medium=referral）

vue生命周期

Template制作模板：

有点类似于vue-cli中的XXX.vue写法，就是在构造器里面写上了template属性！

组件和指令的区别：

组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发过程中还是组件用的比较多，因为指令看起来封装的没那么好。

component组件props属性设置：

1、定义属性并获取属性值。

定义属性我们需要props选项，加上数组形式的属性名称，例如props：[’XXX‘]，在组件模板里面都出来需要用插值的形式，例如{{XXX}}

2、属性中带’-‘的处理方式，在标签中可以写，但是在props数组里面用这种写法是错误的，故利用小驼峰写法！

3、在构造器里面向组件传值

html

JavaScript

var app=new Vue({
el:"XX",
data:{
message:""
},
components:{
"panda":{
template:`
panda from {{here}}
`,
props:['here']
}}})

component标签

标签是Vue框架自定义的标签，它的用途是可以动态绑定我们的组件，根据数据的不同更换不同的组件

    
    
    


    
component-4
    

    

       
       changeComponent
    
 
    

选项：

watch：

        
今日温度：{{temperature}}°C
        
穿衣建议:{{this.suggestion}}
        

            添加温度
            减少温度

        

var suggestion=['T恤短袖','夹克长裙','棉衣羽绒服'];
        var app=new Vue({
            el:'#app',
            data:{
                temperature:14,
                suggestion:'夹克长裙'
            },
            methods:{
                add:function(){
                    this.temperature+=5;
                },
                reduce:function(){
                    this.temperature-=5;
                }
            },
            watch:{
                temperature:function(newVal,oldVal){
                    if(newVal>=26){
                        this.suggestion=suggestion[0];
                    }else if(newVal<26 && newVal >=0)
                    {
                        this.suggestion=suggestion[1];
                    }else{
                        this.suggestion=suggestion[2];
                    }
                }
            }
        })

Mixins

两种用途：1、已经写好构造器后需要增加的方法或者临时改动使用的方法；2、许多地方都公用的方法

})

mixins的调用顺序：混入的先执行，构造器中的后执行。http://jspang.com/2017/03/26/vue3/5/

混入方法和构造器的方法重名时，混入的方法无法展现，不起作用。

extends：

通过外部增加对象的形式，对构造器进行扩展。类似于混入

如果重名应该也是无效吧？

delimiters：

作用：改变差值的形式：(传统就是利用{{XXX}}插值)

delimiters:['${','}']

实例事件：

$mount挂载extend（等实践了再来补充）

在构造器外部写一个调用内部的方法，好处是通过这种写法在构造器外部调用构造器内部的数据。

app.$on('reduce',function(){
    console.log('执行了reduce()');
    this.num--;
});

//外部调用内部事件
function reduce(){
    app.$emit('reduce');
}

$once执行一次的事件

app.$once('reduceOnce',function(){
    console.log('只执行一次的方法');
    this.num--;
 
});

$off关闭事件

//关闭事件
function off(){
   app.$off('reduce');
}

slot：

slot时标签的内容扩展，也就是用slot就可以在自定义组件时传递给组建内容，组建接受内容并输出。

知乎大佬的解释十分清楚

slot的意思是插槽，想想你的电脑主板上的各种插槽，有插CPU的，有插显卡的，有插内存的，有插硬盘的，所以假设有个组件是computer，其模板是

<template>
<div>
  <slot name="CPU">这儿插你的CPUslot>
  <slot name="GPU">这儿插你的显卡slot>
  <slot name="Memory">这儿插你的内存slot>
  <slot name="Hard-drive">这儿插你的硬盘slot>
div>
template>

那么你要攒一个牛逼轰轰的电脑，就可以这么写：

<template>
<computer>
  <div slot="CPU">Intel Core i7div>
  <div slot="GPU">GTX980Tidiv>
  <div slot="Memory">Kingston 32Gdiv>
  <div slot="Hard-drive">Samsung SSD 1Tdivt>
computer>
template>

是不是很easy！

slot的使用需要两步：

1、在HTML的组件中用slot属性传递值。

1 2 3 5

slot = "bolgUrl" > {{jspangData.bolgUrl}}           slot = "netName" > {{jspangData.netName}}           slot = "skill" > {{jspangData.skill}}

2、在组件模板中用标签接收值。

1 2 3 4 5 6 7 8

推荐学习网站：

里面有vue各个属性的解释