vue培训基础学习

如果想要将共同的方法进行封装：

 

直接在所写的组件中引入，比如将共同的方法写在commen.js中，则在commen.js中写

const app = new Vue({
el:"#app"
.....

})

和在组件中写的一样，这里的el中所写的是组件中的id

1.NPM进行下载安装

2.生命周期：

3.代码规范：进行缩进两个空格

找到settings----》Css---》Tab size 2 indent 2

4.Mustache语法 {{}}

5.指令

v-model:

相当于v-bind绑定一个value属性   v-on指令给当前元素绑定一个input事件

v-once

如果对message进行绑定的值发生变化，在渲染的时候不随着变化

v-bind:     语法糖： ：

动态绑定一些值 也可以绑定Class 

绑定的Class可以是对象  以键值对的形式存在  根据true或false来进行判断是否加入Class

 如果绑定的值太多，也可以放在methods方法里面或者compute计算属性里面

6.filters过滤器                    高阶函数

返回值有两种，true 或 false 。 返回值为true时，将符合要求的该内容加到数组中，若返回值为false则将该内容过滤掉，最后过滤成一个符合要求大的数组

本人理解相当于methods方法，在需要过滤的元素后面加上过滤器

然后在filters中写过滤器

第一种写法：

    <Table border ref="selection" :columns="columns4" :data="data1">
        <template slot-scope="{row}" slot="price">
                {{row.price |showPrice }}
            </template>
        <template slot-scope="{row,index}" slot="action">
            <Button type="primary" @click="add(index)">+</Button>
            <!-- <template slot-scope="{row}" slot="sum">
                {{row.sum}}
            </template> -->
            <Button type="primary" @click="sub(index)" :disabled="row.sum<=0">-</Button>
            <Button type="error" @click="remove(index)">删除</Button>
        </template>
     </Table>
        <h2>总收入为：{{totalPrice |showPrice }}</h2>


      filters:{
                showPrice(price){
                    return "￥"+ price.toFixed(2)
                }

        },
过滤器不是写在methods方法里面，和methods方法同级

第二种写法： 

.toFixed（2)  作用是保留两位小数

7.for循环

for（let i =0 ;i<...;i+=)  i 为索引值

for(let i in ...)               i为索引值

for (let i of ...)               i为数组中的对象

8.map：map必须有返回值，并且返回值是一个数组                   高阶函数

 

 9.find：只会找到第一个符合的，找到之后就直接返回

此案例是从数组对象中过滤掉重复的元素

思路：1.将原数组进行reverse倒置  2.然后从正向进行find遍历 3.找到index==_index 便可以过滤掉重复的元素

topo(this.param).then(res=>{
          if(res.data){
             var list = res.data.reverse().filter((item,index)=>{
              const _index = res.data.findIndex((_item)=>{
                 return item.toponodeModel == _item.toponodeModel
               })
               return index == _index
             })

10. reduce  高阶函数        作用：是对数组中所有的内容进行汇总，比如进行相加或者进行相乘 

 至少传两个值：function一个参数 0 为一个参数

var a = arr.reduce(function(preValue,n){

        return preValue+n

},0)   比如 arr=[1,2,3]  执行第一次： preValue：0  (因为第二个参数起始值为0，相当于我们的初始化 var sum = 0）n：1   2次：preValue：1，n:2  3次  preValue:3 n:3 最终 a = 3+3=6

路由：

配置路由  

路由中的children

title作用：在导航栏头部悬空出现

在配置路由时，所有的数据都要设置name和title属性

如果是菜单项，必须写type属性 type属性的属性值为 menu

import在引入时加不加｛｝,如果想要使用其中一种方法，则在括号里直接指定，如果使用文件夹里的所有，直接使用文件夹名称

从后台拿的数据已经封装过了，使用时需使用data.data

外边距合并解决的方法：

在元素上设置overflow:hidden   尝试一下

浏览器对象  BOM  后退、前进、浏览器地址、关闭和打开浏览器窗口

文档对象   DOM  增删改查  所写的内容

Window对象方法

定时器 setInterval setTimeout clearTimeout  clearInterval  history