vue.js学习笔记

参考资料 B站：表严肃

1.directive（指令）就是vue里面自定义的属性，比如v-model（v-model是可以指定所在标签中的内容是vue变量中的哪个属性，比如<input type="text" v-model="name">就是把这个input的内容指定为Vue变量中的name属性）

2.v-show和v-if的区别：
1）show是一直都在，只是显不显示的问题而已
2）if是如果不满足条件，那就没有这个组件了

3.HTML中的lang属性是用来告诉搜索引擎这个页面的内容是什么语言

4.vue变量示例：

var app=new Vue({//注意，这个new容易漏掉
  el:'#app',//el是指element，告诉vue它应该和HTML里面的哪个对象绑定
  data:{
    name:null,
    age:null,
    sex:null,
  }
});

5.v-bind是用来绑定数据和元素的属性的。但是我们通常会把v-bind省略掉，只写一个冒号，比如原来是v-bind:href="url"，可以简写成:href="url"。所以，如果我们在HTML页面的属性前面只看见一个冒号，那么就应该意识到，它代表v-bind:

6.<a>标签定义超链接，用于从一个页面链接到另一个页面；它最重要的属性是href属性，它指定链接的目标.此外，这个链接好像都得是HTTP开头的，www开头的不行.

7.v-on是用来绑定事件的

8.在js的函数中，行与行之间要用分号来间隔，比如：

methods:{
        onClick:function(){
            console.log('click me');
        }
    }

8.e,preventDefault能够用来阻止浏览器的默认行为，比如提交表单后的自动刷新

9.v-on、v-bind这些得带个冒号，冒号后头才是我们属性的名称

10.v-on:可简写成@

11.几乎用户的所有输入都要用v-model属性

12.<pre>可定义预格式化的文本，简单来说就是被包围在<pre></pre>中的文本是会保留空格和换行符的

13.v-model.trim使用情境：用户在姓名框输入姓名存到数据库里时，如果输入的姓名前后有空格，那么我们就可以用这个来删掉姓名前后的空格，这样提交上去的字符串就是前头后头都没有空格的正常字符串了

14.v-model.lazy使用：在输入框里输入字符串，输入完成后点击框外的其它选项，然后才开始绑定

18.v-model.number使用：把输入的字符类型的数字自动转换成数字，不需手动转换

19.input标签和textarea标签其实是一样的，只不过前者是单行，后者是双行

20.vue的computed属性里面的元素都得是函数

21.计算属性（computed属性）有一个好处就是它的计算结果是已经缓存下来的了，如果其它与之相关的数据没有变，那它就没有变。这样，就节省了部分计算的时间。

22.定义Vue全局组件代码示例：

Vue.component('alert',{
    template:'<button @click="on_click">糖糖糖</button>',
    methods:{
        on_click:function(){
            alert('Yo.');
        }
    }
});

23.vue局部组件示例
示例1：

new Vue({
    el:'#app',
    components:{//注意，这里是复数
        alert:{
            template:'<button @click="on_click">糖糖糖</button>',
            methods:{
                on_click:function(){
                    alert('Yo.');
                }
            }
        }
    }

})

示例2：

var alert_component2={
    template:'<button @click="on_click">糖糖</button>',
    methods:{
        on_click:function(){
            alert('Yo.');
        }
    }
}

24.在域中定义多个标签：

//这段代码相当于在app2这个域中定义了两个标签component1和component2，其中它们的键名分别为alert和alert2
new Vue({
    el:"#app2",
    components:{
        alert:alert_component1,
        alert2:alert_component2,
    }
})

25.我们给自定义组件加内容时，如果这个组件有数据，也就是data，那么这时候组件的data和普通的vue实例中的data是对象不同，组件的data是一个function。因为我们建的是一个对象，每用一次这个组件，就应该新实例化出一个对象，每一个对象都有一个新的数据，这时候，组件data中定义的function就是用来指定怎么去生成这些数据，一个例子如下：

//这里我们是直接返回一个对象
data:function(){
        return{
            likecount:10,
            liked:false,
        }
    },

26.如果出现前端页面无法改变数值的情况，那有可能是因为在js文件里没有绑定数据，也就是在数据前面没有加上this

27.自定义组件相当于一个HTML里面的template，所以我们也可以把这个组件的组成部分写到HTML里面，然后在js里面传选择器，例子如下：
//HTML

<div id="app">
        <like></like><!--这个like组件引用了下面js中的组件内容，js中定义like的内容时又反过来引用了本HTML中下面那个template的内容-->
</div>
    <template id="like-tpl">
        <button :class="{liked:liked}" @click="toggle_like()">?{{likecount}}</button>
    </template>

//javascript

Vue.component('like',{
    template:'#like-tpl',
    data:function(){
        return{
            likecount:10,
            liked:false,
        }
    },
    methods:{
        toggle_like:function(){
            if(!this.liked)
                this.likecount++;
            else
                this.likecount--;

            this.liked=!this.liked;//相当于点击后改变用户的点赞状态，未点赞-》点赞，点赞-》未点赞
        },
    }
    
})

new Vue({
    el:'#app',
})

28.props属性为外部属性与组件内部的通信提供了桥梁,示例如下：

<div id="app">
        <user username="yuanzilin"></user>
    </div>

Vue.component('user',{
    template:'<a href="\'/user/\'+username">{{username}}</a>',
    props:['username'],//props属性为外部属性与组件内部的通信提供了桥梁
})

new Vue({
    el:"#app",

})

在这个例子中，HTML中的组件为组件内部提供了username字符串，而这个字符串是通过在props数组里注册一个同名元素，然后才传进去的

29.对象内部行的结尾是逗号，函数内部行的结尾是分号。例如第25点讲到的组件中的data是一个返回对象的函数，那么，return内部的数据应该以逗号分隔，return外部的花括号就应该用分号分隔：

data:function() {
        return{
            show_balance:false ,
        };
    }

30.另外，有一个好的习惯是写一个对象前，应该在写完花括号后在其后面加一个逗号，这样就不容易因为漏了逗号而出错.

31.现在来总结一下三种组件通信的方式：
1）父子间通信：
就是HTML里面的组件给js里面的组件传数据（我也不太懂为什么这种通信叫父子通信），用props数组，详见第28点

2）子父间通信：
就是子组件用$emit触发事件，然后父组件在相应的位置对该事件进行监听，例子如下：
//js

Vue.component('balance',{
    template:`
    <div>
        <show @show-balance="show_balance"></show>
        <div v-if="show">您的余额：98元</div>
    </div>
    `
    ,
    methods:{
        show_balance:function(data){
            this.show=true;
            console.log('data:',data);
        }
    },
    data:function() {
        return{
            show:false ,
        };
    },
});//这是父组件
Vue.component('show',{
    template:'<button @click="on_click()">显示余额</button>',
    methods:{
        on_click:function(){
            this.$emit('show-balance',{a:1,b:2});
        //    这里解释一下$emit，这个相当于一个触发器，结合onclick一起理解就是：
        //    鼠标点击button后，onclick函数开始运行，然后这个函数触发触发器，而
        //    这个触发器的作用就是触发自定义事件，也就是这里的show-balance这个事
        //    件,后面的a,b是传进去的数据。
        //    而这个触发的事件是在上面的balance组件里面的show组件中监听的。
        }
    }
});//这是子组件

3）任意组件通信：
新建第三方事件Event，发送消息的组件用Event.$emit触发事件，接受消息的组件用Event.$on接收信息，网课链接：Vue.js精讲 - 表严肃讲Vue，具体例子为：

var Event=new Vue()

Vue.component('huahua',{
    template:`
        <div >
            我说<input @keyup="on_change" v-model="i_said" >
        </div>
    `,
    data:function(){
        return {
            i_said:'',
        };
    },
    methods:{
        on_change:function(){
            Event.$emit("huahua-say-something",this.i_said);
        },
    }
})
Vue.component('shuandan',{
    template:`
    <div>huahua say:{{huahua_said}}</div>
    `,
    data:function(){
        return{
            huahua_said:'',
        };
    },
    mounted:function () {
        var me=this;
        Event.$on("huahua-say-something",function(data){
            me.huahua_said=data;//这一行尤其需要注意一下，可能一不留神就写成this.huahua_said=XXX了，
            //这时候的this其实是上面定义的Event
        });
    }
})

32.filter（过滤器）主要是用于在数据最后到达用户界面前，对数据的展示进行一些优化，使数据看起来更舒服一些。

33.自定义指令和自定义组件的不同之处在于自定义组件在定义和使用是都不需要加v-，但是自定义指令在使用时需要加v-，定义时就不需要了，比如：
定义pin指令：

Vue.directive('pin',function(el,binding){//el是元素，binding是这个元素的其它一些基本信息
    var pinned = binding.value;
    if(pinned){
        el.style.position='fixed';
        el.style.top='100px';
    }
})

使用pin指令：

//注意到，使用这个指令时pin指令前面加了v-
<div v-pin="true" class="card">
             lorwfvbe kashcu eryxcnrg
         </div>

34.在函数里面给组件的style的属性赋值时，注意不能像在HTML里面直接冒号+值，而是等号+‘值’,比如：

//el是元素
el.style.background='yellow';
el.style.bottom='50px';

35.mixins类似一种重复功能和数据的储存器

36.报错：template syntax error Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
大意是template里面只能有1个根元素，原来的错误代码如下：

template:`
        <button @click="toggle">显示</button>
        <div v-if="visible">
            利根川は大水上山を水源として関東地方を北から東へ流れ、太平洋に注ぐ河川。河川法に基づく国土交通省政令により1965年（昭和40年）に指定された一級河川・利根川水系の本流である。
        </div>
   `,

错误代码有两个根元素，应该把所有代码都用一个div包起来：

template:`
    <div>
        <button @click="toggle">显示</button>
        <div v-if="visible">
            利根川は大水上山を水源として関東地方を北から東へ流れ、太平洋に注ぐ河川。河川法に基づく国土交通省政令により1965年（昭和40年）に指定された一級河川・利根川水系の本流である。
        </div>
    </div>
    `,

37.data里的数据赋默认值用的是冒号

38.mixins使用示例：

var base={
    methods:{
        show:function(){
            this.visible=true;
        },
        hide:function(){
            this.visible=false;
        }
    },
    data:function(){
        return{
            visible:false,
        };
    }
}

Vue.component('tooltip',{
    template:`
    <div>
        <span @mouseenter="show" @mouseleave="hide">来来</span>
        <div v-if="visible"> 龟龟</div>
    </div>
    `,
    mixins:[base],
})

Vue.component('popup',{
    template:`
    <div>
        <button @click="show">显示</button>
        <button @click="hide">X</button>
        <div v-if="visible">
            利根川は大水上山を水源として関東地方を北から東へ流れ、太平洋に注ぐ河川。河川法に基づく国土交通省政令により1965年（昭和40年）に指定された一級河川・利根川水系の本流である。
        </div>
    </div>
        
    `,
    mixins:[base],
    
})

这个例子中，两个组件都用了base这个mixins的数据和功能，所以就不需要在组件中再去重复定义数据和功能了。另外，举个例子，如果mixins里面定义了visible这个数据，如果我们在popup组件中也定义了visible数据，那么在组件中定义的数据默认值会覆盖mixins中定义的同名数据的默认值

39.slot组件和其它组件的class属性类似的属性是name属性，似乎没有class属性，slot组件使用示例：

<div id="app">
    <panel>
        <div slot="title">
            Yo.
        </div>
        <div slot="content">
            Yo
            Yo
            Yo
        </div>
    </panel>
</div>
<template id="panel-tpl">
    <div class="panel">
        <div class="title">
            <slot name="title"></slot>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <div class="footer">
            <slot name="footer">
                更多信息
            </slot>
        </div>
    </div>
</template>

好处就是我们可以在使用模板（这个例子中使用的是panel-tpl，然后我还在js中自定义了一个组件panel）定义了基本框架后，在实际应用时还可以在panel中执行添加内容

40.export default用于导出一个默认的模块，这个模块可以是任意名字，比如：

//demo1.js
export default {

    a: 'hello',

    b: 'world'     

}

对应的引入方式

//demo2.js
import obj from 'demo1'

41.created和mounted的区别：
created函数是在模板渲染成HTML或者模板编译进路由前执行，mounted函数是在模板渲染完成或者对应的el渲染后才执行的

42.$router：我们可以通过$router 访问路由实例

43.this.$set(obj,propertyname,propertyvalue)：this.$set等价于Vue.set，这一串代码相当于给嵌套对象添加响应式属性。

44.:span属性：布局调整，一共分为24栏
代码示例：

<el-row>
  <el-col :span="24"><div class="grid-content"></div></el-col>
</el-row>           

效果：

<el-row>
  <el-col :span="12"><div class="grid-content"></div></el-col>
</el-row>

效果：

参考链接：https://blog.csdn.net/jack_bob/article/details/79813114

45.设置element菜单栏（el-menu）的属性，比如背景色，我们可以直接在它的标签上写上所需背景色，比如：

 <el-aside width="205px" >
       <el-menu v-on:select="handleSelect" :default-active="$route.path" router
                background-color="rgba(70, 76, 91, 1)" text-color="#ccc">
                <el-submenu index="1">
                        <el-menu-item index="/account">管理1</el-menu-item>
                        <el-menu-item index="/bhConfigure">配置1</el-menu-item>                        
                </el-submenu>
       </el-menu>
</el-aside>

修改子菜单栏背景色的链接：https://blog.csdn.net/FANKYIXUN/article/details/84099343

46.修改el-menu菜单栏中被选中后的文字颜色：在<el-menu>标签里修改active-text-color:

47.:class="{like:liked}"：在标签里面加一段这样的代码的用意是给这个标签绑定一个名为like的类，而如果liked取真，则like这个类及其样式生效；如果liked取假，则like这个类及其样式不生效

48.vue项目关闭eslint：在config目录下的index.js里把第32行的useEslint的值改为false

49.vue中的onclick事件报错XXX is not defined at HTMLButtonElement.onclick，错误原因是如果在vue的script部分定义的函数，那在template中使用该函数的话，应该用@click，而不是onclick

50.Invalid handler for event "click": got undefined：我定义的@click绑定的函数是有参数的，可能是在标签里用的时候没把参数传对

51.data必须是个函数，这样每个实例就可以单独维护一份被返回对象的独立的拷贝，这样，不同的组件就不会相互影响了

axios.post('/user', {//把下面的数据提交到/user这个地址，如果没有填地址，那就是提交到默认地址
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {//如果提交成功，会返回提交成功或者失败的信息
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

这里说一下get和post返回数据的区别。get就是数据库里面原来就有数据，然后你去请求这个数据，数据库如果有数据就会给你返回相应的数据，而post的返回数据是成功/失败的信息，就相当于你东西交上去了，接收方会和你说一声有没有提交成功