工作总结以及学习总结和整理的链接-CSDN博客

碰到父组件的数据通过props传递给子组件，结果子组件没有接收到已经解决

// 子组件监听
watch: {
    getSelect(obj) {
        // console.log(obj)
        this.$emit('select', obj)
    },
    // 监听数据变化
    schedule(val){
        this.parentSchedule = val;
    },
    // 将监听到的数据变化，传到父组件
    parentSchedule(val) {
        this.$emit('changeSchedule', val);
    }
},
// 父组件
// 获取可预约日期时间
_getModelVisitorTime(){
    api.getModelOrder({
        model_id:this.$route.params.id,
    }).then(res=>{
        var obj = {}
        var data = res.data
        for(var i in data){
            var dateArr = data[i].days.split(' ')[0]
            var times = data[i].times.split('#')
            obj[dateArr] = times;
            
        }
        // this.$set(this.schedule,obj)
        this.schedule = obj
        // console.log(this.schedule)
        // console.log("getMOdelVisitor");
        // console.log(this.$refs.timeSelect.getTimeList(obj))
    })
},
// 
changeSchedule(val){
    this.schedule = val;
},
复制代码

今天解决了游客选择数据提交预约成功

	// 将字符串转换成datetime格式
 _getDateTime(dateTimeStr){
     var date = new Date(dateTimeStr).getDate()
     var month = new Date(dateTimeStr).getMonth()+1
     var Year = new Date(dateTimeStr).getFullYear()
     var datetime = Year + '-' + month +'-' + date + ' ' + '00:00:00.000000'
     return datetime
 },
复制代码

今天处理好了schecle数据的处理

// 获取可预约日期时间
_getModelVisitorTime(){
    var that = this;
    api.getModelOrder({
        model_id:this.$route.params.id,
    }).then(res=>{
        console.log(res)
        var obj = {}
        var data = res.data
        for(var i in data){
            var dateArr = data[i].days.split(' ')[0]
            var times = data[i].times.split('#')
            obj[dateArr] = times;
            
        }
        this.schedule = obj
        console.log(this.schedule)
        console.log("getMOdelVisitor");
        console.log(this.$refs.timeSelect.getTimeList(obj))
    })
},
复制代码

git使用

为什么git每次git push 的时候要重复的输入用户名

 [winUpdater]
 	recentlySeenVersion = 2.18.0.windows.1
 [filter "lfs"]
 	clean = git-lfs clean -- %f
 	smudge = git-lfs smudge -- %f
 	process = git-lfs filter-process
 	required = true
 [user]
 	email = m13425477079@163.com
 	name = kennana
 //.gitconfig 添加一下配置
 [credential]
     helper = store

复制代码

查询状态 git status
添加到本地仓库 git add . 添加所有文件，但是这样有点粗暴，我们修改了那个文件就可以 git add src/api/api.js
然后就是添加注释，你最近解决了什么问题 git commit -m"解决了问题的注释"
更新到码云，github上面去，git push
更新到本地，就可以是 git pull

最近在自学vue,照着网上例子写了一个父子组件的双向绑定，只实现了单向绑定。父组件的数据不能随子组件变化，只能是子组件数据随父组件变化；在官网看了文档一时还是无法理解其思路。请各位前辈帮忙看看是哪里出的问题，谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue "></script>
</head>
<body>
    <div id="app">
        <div>
            <span>父：{{value}}</span>
            <input type="text" v-model='value' v-on:click="c_lick">
        </div>
        <my-com v-model="value"></my-com>
    </div>
    <template id="template1">
        <div>
            <span>子：{{childvalue}}</span>
            <input type="text" v-model='childvalue' v-on:click="f_click">
        </div>
    </template>
    <script>
        new Vue({
            el: '#app',
            data: {
                value: ''
            },
            methods: {
                c_lick() {
                    //this.value--;
                }
            },
            components: {
                'my-com': {
                    template: '#template1',
                    props: ['value'],
                    data: function () {
                        return {
                            childvalue: this.value
                        }
                    },
                    methods: {
                        f_click() {
                            //this.currentvalue++;
                            this.$emit('input', this.childvalue);
                        }
                    },
                    watch: {
                        value(val) {
                            this.childvalue = val;
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>
复制代码

vue双向绑定，首先来说要搞懂单向传递的原理，逐渐深入。父传子用props,子传父用 emit。父传子还好说，在父级里把要传入的值，在子组件上动态绑定（v-bind）一个属性，把值传进去，然后子级用props来接受这个属性。子传父的话有点复杂，首先来说子级在一个方法methods里，用this. emit('属性名',传的值)来传给父级，而父级需要用一个v-on来接收这个值。下述为双向传递，我自己写了一篇笔记，分享给你，对你学习vue很有帮助，好好研读

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>baidu</title>
        <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
       <switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
       <input type="button" value="change" @click="change">
    </div>
</body>
<script type="text/javascript">
        Vue.component("switchbtn", {
        template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
        props: ["result"],
        data: function () {
            return {
                myResult: this.result//①创建props属性result的副本--myResult
            }
        },
        watch: {
            /* 此处是重点 */
            result(val) {
                this.myResult = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
            },
            myResult(val){
                this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
            }
        },
        methods: {
            change() {
                this.myResult = !this.myResult;
            }
        }
    });
 
    new Vue({
        el: "#app",
        data: {
            result: true
        },
        methods: {
            // 外部触发方法
            change() {
                this.result = !this.result;
            },
            // 接收
            onResultChange(val){
                this.result=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
            }
        }
    });
</script>
</html>
复制代码

ubantu14.0.4 部署laravel5.7 博客系统

安装php7.2

 配置环境前下好language-pack-en-base这个包，解决不同语言之间可能发生的冲突，-y参数的意思是直接安装无需确认
 sudo apt-get update
 sudo apt-get install -y language-pack-en-base

 安装完成后运行locale-gen en_US.UTF-8

 再在服务器上安装Git sudo apt-get install git



 sudo apt-get install software-properties-common python-software-properties 

 sudo add-apt-repository ppa:ondrej/php && sudo apt-get update

 sudo apt-get -y install php7.2

  # 如果之前有其他版本PHP，在这边禁用掉
 sudo a2dismod php5
 sudo a2enmod php7.2

 # 安装常用扩展
 sudo -y apt-get install php7.2-fpm php7.2-mysql php7.2-curl php7.2-json php7.2-mbstring php7.2-xml  php7.2-intl 

 #  安装其他扩展（按需安装）
 sudo apt-get install php7.2-gd
 sudo apt-get install php7.2-soap
 sudo apt-get install php7.2-gmp    
 sudo apt-get install php7.2-odbc       
 sudo apt-get install php7.2-pspell     
 sudo apt-get install php7.2-bcmath   
 sudo apt-get install php7.2-enchant    
 sudo apt-get install php7.2-imap       
 sudo apt-get install php7.2-ldap       
 sudo apt-get install php7.2-opcache
 sudo apt-get install php7.2-readline   
 sudo apt-get install php7.2-sqlite3    
 sudo apt-get install php7.2-xmlrpc
 sudo apt-get install php7.2-bz2
 sudo apt-get install php7.2-interbase
 sudo apt-get install php7.2-pgsql      
 sudo apt-get install php7.2-recode     
 sudo apt-get install php7.2-sybase     
 sudo apt-get install php7.2-xsl
 sudo apt-get install php7.2-cgi        
 sudo apt-get install php7.2-dba 
 sudo apt-get install php7.2-phpdbg     
 sudo apt-get install php7.2-snmp       
 sudo apt-get install php7.2-tidy       
 sudo apt-get install php7.2-zip
复制代码

成功后运行php -v查看版本，应显示类似信息 PHP 7.2.12-1+ubuntu14.04.1+deb.sury.org+1 (cli) (built: Nov 12 2018 10:58:25) ( NTS ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies with Zend OPcache v7.2.12-1+ubuntu14.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies

安装mysql

sudo apt-get install mysql-server mysql-client过程中输入密码，确定后安装完成。 
mysql -u root -p再输入密码测试，能成功登陆即安装完成。exit退出mysql

因为上线的应用为laravel 5.5版本开发的，为了之后的兼容性问题，ubuntu14.04直接安装的mysql不是较新版本，因此要升级一下mysql：

cd ~
wget https://dev.mysql.com/get/mysql-apt-config_0.8.1-1_all.deb
sudo dpkg -i mysql-apt-config_0.8.1-1_all.deb

解压安装包后会弹出框，选择好mysql 5.7版本后选择ok 然后继续

然后,更新包索引:sudo apt-get update

然后,安装MySQL-server:sudo apt-get install mysql-server

然后,升级全部的Mysql数据库:sudo mysql_upgrade -u root -p

最后,重启mysql server:sudo service mysql restart

登陆一下mysql看看是否已经升级完毕，成功了进入下一步
mysql -uroot -p密码
复制代码

由于apache2指向的网站根目录是/var/www/html/,要修改配置文件000-default.conf

vim /etc/apache2/sites-enabled/000-default.conf
使网站根目录指向 /var/www/html/public/

然后再修改/etc/apache2/apache2.conf的这里

<Directory /var/www/>
         Options Indexes FollowSymLinks
         AllowOverride None
         Require all granted
</Directory>
将AllowOverride None 的None改为All.保存重启apache2

这时访问网址,如果出现500错误.那就是由于storage目录没有 777 权限。

到/var/www/html/目录 执行

chmod -R 777 storage

复制代码

在Unbuntu中重启Apache服务器出现错误：AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1.等等。解决方法：

   $ sudo vim /etc/apache2/apache2.conf
 
  最后加入一句: ServerName localhost:80
复制代码

sudo apache2ctl -k restart

今天的修改

submit() {
    // 提交数据，user_id,manager_id,days,times;
    var days_times = this.dateSelect;
    if (!days_times) {
        // 如果没有选择就不提交了
        return;
    }
    for (let val in days_times) {
        // 以#号传字段
        var str = "";
        var arr = days_times[val];
        // 减少for循环的嵌套
        for (let i = 0; i < arr.length; i++) {
            str += arr[i];
            str += "#";
        }
        var newstr = str.substring(0, str.length - 1);
        // console.log(newstr);
        api.userOrder({
            user_id: localStorage.getItem("user_id"),
            model_id: this.$route.params.id,
            days: val,
            times: newstr
        }).then(res => {
            console.log(res);
            if (res.code === 1) {
                // 成功
                MessageBox({
                    title: "",
                    message: res.msg,
                    showCancelButton: false
                });
            }
        }).catch(e => {
            // 失败
            if (e.code === 0) {
                MessageBox({
                    title: "",
                    message: e.msg,
                    showCancelButton: false
                });
            }
        });
    }
},
复制代码

$refs ,ref 使用

我们在更新数据属性时覆盖了我们对DOM所做的更改。这样做的原因是，当访问DOM元素并直接操作它们时，实际上跳过了前面文章中讨论到的虚拟DOM。因此，Vue仍然控制着h1元素，甚至当Vue对数据中的做出更新时，它会更新虚拟DOM，然后更新DOM本身。因此，你应该小心使用对DOM的直接更改，就算是你不小心做了相应的修改，你所做的任何更改都将可能会被覆盖。虽然在使用refs时应该小心更改DOM，但是做只读操作相对来说比较安全，比如从DOM中读取值。

一个vue组件只有一个id=app

<div id="app"> 
    <h1>{{ message }}</h1> 
    <button ref='myButton' @click="clickedButton">点击偶</button> 
    <ul> 
        <li v-for="todo in todos" ref='todos'>
          {{ todo.text }}
        </li>
    </ul>
</div>
复制代码

下面这种情况是渲染不出来的

<div id="app"> 
    <h1>{{ message }}</h1> 
    <button ref='myButton' @click="clickedButton">点击偶</button> 
    
</div>
<ul> 
    <li v-for="todo in todos" ref='todos'>
      {{ todo.text }}
    </li>
</ul>
复制代码

子组件向父组件传值使用this.$emit("事件名","传递的参数")

fileChange(e) {
    let file = e.target.files[0];
    if (file.size > this.maxSize) {
        MessageBox("提示", "图片太大了噢");
    } else {
        let formData = new FormData();
        formData.append("img", file);
        api.upload(formData).then(res => {
            console.log(res);
            if (res.host) {
                this.icon = res.host + res.path;
            } else {
                this.icon = res.path;
            }

            this.$emit("changeIcon",res.path);
        })
    }
},
changeName() {
    MessageBox.prompt("输入昵称", "")
        .then(({ value, action }) => {
            if (!value) {
                return;
            }
            this.name = value;
            // 
            this.$emit('changeName',this.name);
        })
        .catch(() => {});
},
changePhone() {
    MessageBox.prompt("输入联系方式", "")
        .then(({ value, action }) => {
            if (!value) {
                return;
            }
            this.phone = value;
            this.$emit("changePhone",this.phone);
        })
        .catch(() => {});
},
复制代码

父组件向子组件传值使用props:["数据名称"]

mint-ui 头部组件的使用 Header

<mt-button 
    v-if="icon" 
    class="right-icon"
    // @click.native="$emit('right-click')"
    // 跟原生的onclick="change()"一样的形式，可以不用this
    @click.native="$emit('right-click')">
    <img 
        :src="icon" 
        height="20" 
        width="20" 
        slot="icon">
    {{ right }}
</mt-button>
复制代码

子组件中获取父组件传来的值提示undefined

segmentfault.com/q/101000001… www.jb51.net/article/117… blog.csdn.net/qq_39894133…

是哪个组件传给那个组件
怎么传的，哪些必要的参数
怎么处理
怎么回显，数据检测

js时间戳问题

一：时间转时间戳：javascript获得时间戳的方法有四种，都是通过实例化时间对象 new Date() 来进一步获取当前的时间戳

1.var timestamp1 = Date.parse(new Date()); // 结果：1477808630000 不推荐这种办法，毫秒级别的数值被转化为000

  console.log(timestamp1);

2.var timestamp2 = (new Date()).valueOf(); // 结果：1477808630404 通过valueOf()函数返回指定对象的原始值获得准确的时间戳值

console.log(timestamp2);

3.var timestamp3 = new Date().getTime(); // 结果：1477808630404 ，通过原型方法直接获得当前时间的毫秒值，准确

console.log(timestamp3);

4.var timetamp4 = Number(new Date()) ; //结果：1477808630404 ,将时间转化为一个number类型的数值，即时间戳

console.log(timetamp4);



二，时间戳转时间

var timestamp4 = new Date(1472048779952);//直接用 new Date(时间戳) 格式转化获得当前时间
console.log(timestamp4);
console.log(timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8)); //再利用拼接正则等手段转化为yyyy-MM-dd hh:mm:ss 格式
复制代码

有些时候每次都要发请求

for(var i in days_times){
    // 选中多少个就给他发送多少个请求
    days = this._getDateTime(i)
    console.log("days",days)
    times = days_times[i].join("#")
    console.log("times",times)
    api.userOrder({
        user_id: localStorage.getItem('user_id'),
        model_id: this.$route.params.id,
        days: days,
        times: times
    }).then(res=>{
        console.log("submit",res)
        if(res.code===1){
            // 成功
            MessageBox({
              title:'',
              message: res.msg,
              showCancelButton: false
            });
        }
    }).catch(e=>{
        // 失败
        if(e.code===0){
            MessageBox({
              title:'',
              message: e.msg,
              showCancelButton: false
            });
        }
    })
}
复制代码

解决异步加载过程中子组件接受不了父组件传值的情况

<TimeSelect ref="timeSelect" v-if="schedule" :schedule="schedule" @select="select"/>
可能因为在异步加载时需要判断一下那个schedule是否为空，
复制代码

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated
复制代码

父组件更新过程

父beforeUpdate->父updated
复制代码

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
复制代码

created mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作


其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。下面看一个例子（用组件）


Vue.component("demo1",{
    data:function(){
        return {
            name:"",
            age:"",
            city:""
        }
    },
    template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
    created:function(){
        this.name="唐浩益"
        this.age = "12"
        this.city ="杭州"
        var x = document.getElementById("name")//第一个命令台错误
        console.log(x.innerHTML);
    },
    mounted:function(){
        var x = document.getElementById("name")//第二个命令台输出的结果
        console.log(x.innerHTML);
    }
});
var vm = new Vue({
    el:"#example1"
})
复制代码

程序对比

// 我写的
for(let i=0; i<res.data.length; i++){
    if(res.host){
        res.data[i].img = res.host + res.data[i].img;
    }else{
        res.data[i].img = res.data[i].img;
    }
    res.data[i].days = res.data[i].days.split(' ')[0];
    let arr = res.data[i].times.split('#');
    let str = '';
    arr.forEach(element => {
        str += element+':00、'
    });
    res.data[i].times = str;
}

// 别人写的
if (res.host) {
    for (let i = 0; i < res.data.length; i++) {
        res.data[i].img = res.host + res.data[i].img;
        res.data[i].days = res.data[i].days.split(' ')[0];
        let arr = res.data[i].times.split('#');
        let str = '';
        arr.forEach(element => {
            str += element+':00、'
        });
        res.data[i].times = str;
    }
} else {
    for (let i = 0; i < res.data.length; i++) {
        res.data[i].img = res.data[i].img;
        res.data[i].days = res.data[i].days.split(' ')[0];
        let arr = res.data[i].times.split('#');
        let str = '';
        arr.forEach(element => {
            str += element+':00、'
        });
        res.data[i].times = str;
    }
}
复制代码

注意引入scss文件的时候末尾要加入 ;,不然会报错

@import "@/common/css/var.scss";
复制代码

HTML5 文件上传

fileChange(e) {
    let file = e.target.files[0]
    if (file.size > this.maxSize) {
        MessageBox('', '图片太大了噢')
    } else {
        let formData = new FormData()
        formData.append('img', file)
        api.upload(formData).then(res => {
            this.path = res.path
            if (res.host) {
                this.show = res.host + res.path
            } else {
                this.show = res.path
            }
        })
    }
},
复制代码

SQL触发器实例讲解

www.cnblogs.com/yuxiaohui/p…

router基本使用

blog.csdn.net/qq_39894133…

vue2中的路由定义层：<router-linkto="/goods">商品</router-link> 这里用to指向路径表现层
1.1、<keep-alive>如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令
<keep-alive><router-view:seller="seller">content</router-view></keep-alive>

1.2使用router的过程中出现的报错情况 提示 （Unknown custom element: <router-view> - did you register the component corre）出现的问题可能有以下几个情况：

1.2.1 <router-link to="/goods">商品</router-link> to不能少 不能少

1.2.2在main.js中   import VueRouter from 'vue-router' 注意大小写的区分

1.2.3 Vue.use(VueRouter) 当然这句也是不能少滴 因为在一个模块化工程中使用router，必须要通过Vue.use() 明确地安装路由功能

1.2.4  剩下的就是按照api来写

const routes = [
      { path:'/goods', component: Goods },
      { path:'/ratings', component: Ratings },
      { path:'/seller', component: Seller }
]
const router = new VueRouter({
  routes
})

1.2.5 最后一句

new Vue({
  el: '#app',
  router ,
  render: h => h(App)
})

2.对router的定义与理解

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮  => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 

&emsp;&emsp;点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。

&emsp;&emsp;路由中有三个基本的概念 route, routes, router。

&emsp;&emsp;&emsp;&emsp;1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮  => home内容， 这是一条route,  about按钮 => about 内容， 这是另一条路由。

&emsp;&emsp;&emsp;&emsp;2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

&emsp;&emsp;&emsp;&emsp;3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

&emsp;&emsp;&emsp;&emsp;4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

vue-router中的路由也是基于上面的内容来实现的
&emsp;&emsp;在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。

&emsp;&emsp;1， 页面实现（html模版中）

&emsp;&emsp;&emsp;&emsp;在vue-router中, 我们看到它定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方。所以 <router-link> 还有一个非常重要的属性 to，定义点击之后，要到哪里去， 如：<router-link  to="/home">Home</router-link>

&emsp;&emsp;2， js 中配置路由

&emsp;&emsp;&emsp;&emsp;首先要定义route,  一条路由的实现。它是一个对象，由两个部分组成： path和component.  path 指路径，component 指的是组件。如：{path:’/home’, component: home}

&emsp;&emsp;&emsp;&emsp;我们这里有两条路由，组成一个routes:

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]
&emsp;&emsp;最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。

const router = new VueRouter({
      routes // routes: routes 的简写
})
&emsp;&emsp;配置完成后，把router 实例注入到 vue 根实例中,就可以使用路由了

const app = new Vue({
  router
}).$mount('#app')
&emsp;&emsp;执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性， 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home}  path 一一对应，从而找到了匹配的组件， 最后把组件渲染到 <router-view> 标签所在的地方。所有的这些实现才是基于hash 实现的。

 vue-cli 创建一个项目体验一下, 当然不要忘记安装vue-router

&emsp;&emsp;1, 在src 目录下新建两个组件，home.vue 和 about.vue


<template>
    <div>
        <h1>home</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是home 组件"
            }
        }
    }
</script>

<template>
    <div>
        <h1>about</h1>
        <p>{{aboutMsg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                aboutMsg: '我是about组件'
            }
        }
    }
</script>

&emsp;&emsp;2, 在 App.vue中 定义<router-link > 和 </router-view>  


<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
    <!-- router-link 定义点击后导航到哪个路径下 -->
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <!-- 对应的组件内容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>

<script>
export default {
  
}
</script>

&emsp;&emsp;3,  在 src目录下再新建一个router.js 定义router, 就是定义 路径到 组件的 映射。


import Vue from "vue";
import VueRouter from "vue-router";

// 引入组件
import home from "./home.vue";
import about from "./about.vue";

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    }
]

var router =  new VueRouter({
    routes
})
export default router;

&emsp;&emsp;4， 把路由注入到根实例中，启动路由。这里其实还有一种方法，就像vuex  store 注入到根实例中一样，我们也可以把vueRouter 直接注入到根实例中。在main.js中引入路由，注入到根实例中。


import Vue from 'vue'
import App from './App.vue'

// 引入路由
import router from "./router.js"    // import router 的router 一定要小写， 不要写成Router, 否则报 can't match的报错
new Vue({
  el: '#app',
  router,  // 注入到根实例中
  render: h => h(App)
})

&emsp;&emsp;5， 这时点击页面上的home 和about 可以看到组件来回切换。但是有一个问题，当首次进入页面的时候，页面中并没有显示任何内容。这是因为首次进入页面时，它的路径是 '/'，我们并没有给这个路径做相应的配置。一般，页面一加载进来都会显示home页面，我们也要把这个路径指向home组件。但是如果我们写{ path: '/', component: Home },vue 会报错，因为两条路径却指向同一个方向。这怎么办？这需要重定向，所谓重定向，就是重新给它指定一个方向，它本来是访问 / 路径，我们重新指向‘/home’, 它就相当于访问 '/home', 相应地, home组件就会显示到页面上。vueRouter中用 redirect 来定义重定向。


const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    },
    // 重定向
    {
        path: '/', 
        redirect: '/home' 
    }
]

&emsp;&emsp;现在页面正常了，首次进入显示home, 并且点击也可以看到内容的切换。

6， 最后，我们看一下路由是怎么实现的

&emsp;&emsp;打开浏览器控制台，首先看到 router-link 标签渲染成了 a 标签，to 属性变成了a 标签的 href 属性，这时就明白了点击跳转的意思。router-view 标签渲染成了我们定义的组件，其实它就是一个占位符，它在什么地方，匹配路径的组件就在什么地方，所以 router-link 和router-view 标签一一对应，成对出现。



&emsp;&emsp;这里还看到，当点击Home和About 来回切换时，a 标签有一个样式类 .router-link-active 也在来回切换， 原来这是当router-link 处于选中状态时，vueRouter 会自动添加这个类，因此我们也可以利用这个类来改变选中时的状态，如选中时，让它变成红色。但当设置 .router-link-active {color: red;}，它并没有生效，这时还要在类前面加一个a, a.router-link-active {color: red;}, 这样就没有问题了。未处于选中状态的router-link， 我们也想给它更改样式，怎么办? 直接给它添加一个 class 就可以了， <router-link class="red">Home</router-link>

动态路由

&emsp;&emsp;上面我们定义的路由，都是严格匹配的，只有router-link 中的to属性和 js 中一条路由route中 path 一模一样，才能显示相应的组件component. 但有时现实却不是这样的，当我们去访问网站并登录成功后，它会显示 欢迎你，+ 你的名字。不同的用户登录， 只是显示“你的名字” 部分不同，其它部分是一样的。这就表示，它是一个组件，假设是user组件。不同的用户（就是用户的id不同），它都会导航到同一个user  组件中。这样我们在配置路由的时候，就不能写死, 就是路由中的path属性，不能写死，那要怎么设置? 导航到 user 组件，路径中肯定有user, id 不同，那就给路径一个动态部分来匹配不同的id.  在vue-router中，动态部分 以 : 开头，那么路径就变成了 /user/:id, 这条路由就可以这么写：  { path:"/user/:id", component: user }.

&emsp;&emsp;我们定义一个user组件（自己随便写一个就好了），页面中再添加两个router-link 用于导航， 最后router.js中添加路由配置，来体验一下

&emsp;&emsp;app.vue 中添加两个router-link：


<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
     <!--  增加两个到user组件的导航，可以看到这里使用了不同的to属性 -->
      <router-link to="/user/123">User123</router-link>
      <router-link to="/user/456">User456</router-link>
    </header>
    <router-view></router-view>   
  </div>
</template>

router.js 配置user动态路由：


const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    },
    /*新增user路径，配置了动态的id*/
    {
        path: "/user/:id",
        component: user
    },
    {
        path: '/', 
        redirect: '/home' 
    }
]

&emsp;&emsp;user组件


<template>
    <div>
        <h1>User</h1>
        <div>我是user组件</div>
    </div>
</template>
<script>
    export default {

    }
</script>

&emsp;&emsp;这时在页面中点击user123 和user456, 可以看到它们都导航到user组件，配置正确。 &emsp;&emsp;

&emsp;&emsp;在动态路由中，怎么获取到动态部分？ 因为在组件中是可以显示不同部分的，就是上面提到的“你的名字”。其实，当整个vue-router 注入到根实例后，在组件的内部，可以通过this.$route 来获取到 router 实例。它有一个params 属性，就是来获得这个动态部分的。它是一个对象，属性名，就是路径中定义的动态部分 id, 属性值就是router-link中to 属性中的动态部分，如123。使用vuex时，组件中想要获取到state 中的状态，是用computed 属性，在这里也是一样，在组件中，定义一个computed 属性dynamicSegment， user 组件修改如下：


<template>
    <div>
        <h1>User</h1>
        <div>我是user组件, 动态部分是{{dynamicSegment}}</div>
    </div>
</template>
<script>
    export default {
        computed: {
            dynamicSegment () {
                return this.$route.params.id
            }
        }
    }
</script>

&emsp;&emsp;这里还有最后一个问题，就是动态路由在来回切换时，由于它们都是指向同一组件，vue不会销毁再创建这个组件，而是复用这个组件，就是当第一次点击（如：user123）的时候，vue 把对应的组件渲染出来，但在user123, user456点击来回切换的时候，这个组件就不会发生变化了，组件的生命周期不管用了。这时如果想要在组件来回切换的时候做点事情，那么只能在组件内部（user.vue中）利用watch 来监听$route 的变化。把上面的代码用监听$route 实现


<script>
    export default {
        data () {
            return {
                dynamicSegment: ''
            }
        },
        watch: {
            $route (to,from){
                // to表示的是你要去的那个组件，from 表示的是你从哪个组件过来的，它们是两个对象，你可以把它打印出来，它们也有一个param 属性
                console.log(to);
                console.log(from);
                this.dynamicSegment = to.params.id
            }
        }
    }
</script>

嵌套路由

&emsp;&emsp;嵌套路由，主要是由我们的页面结构所决定的。当我们进入到home页面的时候，它下面还有分类，如手机系列，平板系列，电脑系列。当我们点击各个分类的时候，它还是需要路由到各个部分，如点击手机，它肯定到对应到手机的部分。

&emsp;&emsp;在路由的设计上，首先进入到 home ,然后才能进入到phone, tablet, computer.  Phone, tablet, compute 就相当于进入到了home的子元素。所以vue  提供了childrens 属性，它也是一组路由,相当于我们所写的routes。

&emsp;&emsp;首先，在home页面上定义三个router-link 标签用于导航，然后再定义一个router-view标签，用于渲染对应的组件。router-link 和router-view 标签要一一对应。home.vue 组件修改如下：


<template>
    <div>
        <h1>home</h1>
<!-- router-link 的to属性要注意，路由是先进入到home,然后才进入相应的子路由如 phone,所以书写时要把 home 带上 -->
        <p>
            <router-link to="/home/phone">手机</router-link>
            <router-link to="/home/tablet">平板</router-link>
            <router-link to="/home/computer">电脑</router-link>
        </p>
        <router-view></router-view>
    </div>
</template>

router.js 配置路由，修改如下：


const routes = [
    {
        path:"/home",
&emsp;&emsp;&emsp;&emsp;&emsp;// 下面这个属性也不少，因为，我们是先进入home页面，才能进入子路由
        component: home,
&emsp;&emsp;&emsp;&emsp; // 子路由
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "tablet",
                component: tablet
            },
            {
                path: "computer",
                component: computer
            }
        ]
    },
    {
        path: "/about",
        component: about
    },
    {
        path: "/user/:id",
        component: user
    },
    {
        path: '/', 
        redirect: '/home' 
    }
]

&emsp;&emsp;这时当我们点击home 时，它下面出现手机等字样，但没有任何对应的组件进行显示，这通常不是我们想要的。要想点击home时，要想渲染相对应的子组件，那还需要配置一条路由。当进入到home 时，它在children中对应的路由path 是空 ‘’，完整的childrens 如下：


children: [
    {
        path: "phone",
        component: phone
    },
    {
        path: "tablet",
        component: tablet
    },
    {
        path: "computer",
        component: computer
    },
    // 当进入到home时，下面的组件显示
    {
        path: "",
        component: phone
    }
]

命名路由

&emsp;&emsp;命名路由，很简单，因为根据名字就可以知道，这个路由有一个名字，那就直接给这个路由加一个name 属性，就可以了。 给user 路由加一个name 属性：

{
        path: "/user/:id",
        name: "user",
        component: user
}
&emsp;&emsp;命名路由的使用, 在router-link 中to 属性就可以使用对象了, 

 <router-link to="/user/123">User123</router-link> // 和下面等价 
 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>   // 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定
&emsp;&emsp;编程式导航：这主要应用到按钮点击上。当点击按钮的时候，跳转另一个组件, 这只能用代码，调用rourter.push() 方法。 当们把router 注入到根实例中后，组件中通过 this.$router 可以获取到router, 所以在组件中使用

this.$router.push("home"), 就可以跳转到home界面
复制代码

mint-ui 博客教程

blog.csdn.net/michael_ouy…

import { Tabbar, TabItem } from 'mint-ui';
<mt-tabbar v-model="selected">
  <mt-tab-item id="tab1">
    <img slot="icon" src="../assets/100x100.png">
    tab1
  </mt-tab-item>
  <mt-tab-item id="tab2">
    <img slot="icon" src="../assets/100x100.png">
    tab2
  </mt-tab-item>
  <mt-tab-item id="tab3">
    <img slot="icon" src="../assets/100x100.png">
    tab3
  </mt-tab-item>
  <mt-tab-item id="tab4">
    <img slot="icon" src="../assets/100x100.png">
    tab4
  </mt-tab-item>
</mt-tabbar>
复制代码

vant 组件库

youzan.github.io/vant/#/zh-C… segmentfault.com/a/119000001…

<van-tabbar v-model="active">
  <van-tabbar-item icon="shop">标签</van-tabbar-item>
  <van-tabbar-item icon="chat" dot>标签</van-tabbar-item>
  <van-tabbar-item icon="records" info="5">标签</van-tabbar-item>
  <van-tabbar-item icon="gold-coin" info="20">标签</van-tabbar-item>
</van-tabbar>

export default {
  data() {
    return {
      active: 0
    }
  }
}

### 自定义图标
通过 icon 插槽自定义图标，可以通过 slot-scope 判断标签是否选中
<van-tabbar v-model="active">
  <van-tabbar-item info="3">
    <span>自定义</span>
    <img
      slot="icon"
      slot-scope="props"
      :src="props.active ? icon.active : icon.normal"
    >
  </van-tabbar-item>
  <van-tabbar-item icon="chat">标签</van-tabbar-item>
  <van-tabbar-item icon="records">标签</van-tabbar-item>
</van-tabbar>
export default {
  data() {
    return {
      active: 0,
      icon: {
        normal: '//img.yzcdn.cn/icon-normal.png',
        active: '//img.yzcdn.cn/icon-active.png'
      }
    }
  }
}
复制代码

api封装

import apiConfig from './api_config.js'
import axios from 'axios'

/**
 * api.login({
 *     username: 'qwe',
 *     password: 123456
 * }).then((res) => {
 *     console.log(res)
 * })
 */

const obj = {}

for(let i in apiConfig) {
    let config = apiConfig[i]
    obj[i] = function(params) {
        return new Promise((resolve, reject) => {
            let opt = {
                method: config.method || 'get',
                url: config.url,
            }
            if (config.method == 'post') {
                opt.data = params
            } else {
                opt.params = params
            }
            axios(opt)
                .then((res) => {
                    if (res.data.code == 1) {
                        resolve(res.data)
                    } else {
                        console.log(res.data.msg)
                        reject(res.data)
                    }
                })
                .catch(error => {
                    console.log(error)
                    // alert('网络遇到问题，请稍后再试')
                })
        })
    }
}

export default obj
复制代码

基于hash 和基于html5 history api

父组件传值到子组件

父组件向子组件传值成功
总结一下：

子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性
复制代码

子组件传值到父组件

子组件向父组件传值成功
总结一下：

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了
复制代码

$nextTick(function(){
    this.$refs.input.focus();
    // 获取更新之后的DOM
})

new Vue({
    el: '#app',
    data: {
        isShow:false
    },
    template:`
        <div class="update">
            <input type="text" v-show="isShow">
        </div>
    `,
    mounted(){
        // 更新DOM之后再去聚焦输入框
        console.log(this.$refs.input)
        this.isShow = true;
        console.log(this.$refs.input)
        this.$nextTick(function(){
            this.$refs.input.focus()
        })
    },
})
复制代码

命名路由

blog.csdn.net/AprilCC/art… www.jianshu.com/p/4062a1fe0…

router-link 链接到那个路由对应的组件 router-view 显示出路由对应组件

<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/foo/profile">/user/foo/profile</router-link>
    <router-link to="/user/foo/posts">/user/foo/posts</router-link>
  </p>
  <router-view></router-view>
</div>
复制代码

命名路由有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。可以在创建Router实例的时候，在routes配置中给某个路由设置名称。

const router = new VueRouter({
    routes: [
        {
            path: '/user/:user:id',
            name: 'user',===>给路由命名
            component: User
        }
    ]
})
复制代码

要链接到一个命名路由，可以给router-link的to属性传一个对象： User

跟代码调用 router.push()是一回事：

router.push({ name: 'user', params: { userId: 123 }})
复制代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>This is Home</div>' }
const Foo = { template: '<div>This is Foo</div>' }
const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        { path: '/',  name: 'home', component: Home },
        { path: '/foo', name: 'foo', component: Foo },
        { path: '/bar', name: 'bar', component: Bar }
        ]
    })

new Vue({
    router,
    template: `
        <div id="app">
            <h1>Named Routes</h1>
            <p>Current route name: {{ route.name }}</p>
            <ul>
                <li><router-link :to="{ name: 'home' }">Home</router-link></li>
                <li><router-link :to="{ name: 'foo' }">foo</router-link></li>
                <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
            </ul>
            <router-view class="view"></router-view>
        </div>
    `
}).$.mount('#app')
复制代码

例子

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/pages/home'
import header from '@/components/header'
import menu from '@/components/menu'
import content from '@/components/content'
import list from '@/components/list'
import detail from '@/components/detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home/menu'
    },
    {
      path: '/home',
      name: 'home',
      component: home,
      children: [{
        path: 'menu',
        components: {
          header: header,
          menu: menu,
          content: content
        },
        children: [
          {
            path: 'list/:index',
            name: 'list',
            component: list
          },
          {
            path: 'list/:index/detail/:detailIndex',
            name: 'detail',
            component: detail
          }
        ]
      }]
    },
    {
      path: '/detailNoMenu',
      name: 'detailNoMenu',
      component: detail
    }
  ]
})
复制代码

vue.js 跨域代理

www.cnblogs.com/momozjm/p/7… blog.csdn.net/zhangwenwu2… 一：跨域请求代理 ·


module.exports{
    dev: {

    }
}


proxyTable: {
      '/api': {
        target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      }
    }
复制代码

2：在需要调接口的组件中这样使用：

axios.post('/api/yt_api/login/doLogin',postData)
    .then(function (response) {
        console.log(1)
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    })
复制代码

注意：原接口：http://http://121.41.130.58:9090/yt_api/login/doLogin 页面调用：http://localhost:8081/api/yt_api/login/doLogin ——这里多了一个/api/不是多余的，不要删

二：axios传参 1：Vue官方推荐组件axios默认就是提交 JSON 字符串，所以我们要以json字符串直接拼接在url后面的形式，直接将json对象传进去就行了

let postData = {
&emsp;&emsp;companyCode:'tur',
&emsp;&emsp;userName:'123456789123456789',
&emsp;&emsp;password:'123456'
}
axios.get('/api/yt_api/login/doLogin',{
&emsp;&emsp;params: {
&emsp;&emsp;&emsp;&emsp;...postData,
&emsp;&emsp;}
})
.then(function (response) {
&emsp;&emsp;console.log(1)
&emsp;&emsp;console.log(response);
})
.catch(function (error) {
&emsp;&emsp;console.log(error);
});
复制代码

这里我们将postData这个json对象传入到post方法中，页面中的形式为：

2：以key：val的形式传参

let postData = qs.stringify({
    companyCode:'tur',
    userName:'123456789123456789',
    password:'123456'
})
复制代码

我们需要对这个json对象操作，这里的qs你需要先安装

npm install qs
复制代码

再导入

import qs from 'qs'
复制代码

面中的形式为：

qs.parse()、qs.stringify()使用方法

blog.csdn.net/suwu150/art…

vue axios全攻略

执行 GET 请求

// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
 
// 也可以通过 params 对象传递参数
axios.get('/user', {
    params: {
        ID: 12345
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
复制代码

执行 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
复制代码

组合js数组对象元素的相同字段的

var arr = [{
    days: "2018-11-28",
    id: 166,
    img: "http://modelplus.wx-plus.cn/public/upload/img/20181101/cdb5b0718adc5f96995adae7a728a744.jpg",
    model_id: 2,
    name: "神经病",
    status: 1,
    times: "11:00、12:00",
    user_id: 3
}, 
{
    days: "2018-11-28",
    id: 168,
    img: "http://modelplus.wx-plus.cn/public/upload/img/20181101/cdb5b0718adc5f96995adae7a728a744.jpg",
    model_id: 2,
    name: "神经病",
    status: 1,
    times: "9:00、10:00",
    user_id: 3,
}, 
{
    days: "2018-12-03",
    id: 161,
    img: "http://modelplus.wx-plus.cn/public/upload/img/20181101/cdb5b0718adc5f96995adae7a728a744.jpg",
    model_id: 2,
    name: "神经病",
    status: 1,
    times: "10:00",
    user_id: 3,
}, 
{
    days: "2018-12-03",
    id: 161,
    img: "http://modelplus.wx-plus.cn/public/upload/img/20181101/cdb5b0718adc5f96995adae7a728a744.jpg",
    model_id: 2,
    name: "神经病",
    status: 1,
    times: "11:00、12:00",
    user_id: 3,
}, 
{
    days: "2018-11-23",
    id: 150,
    img: "http://modelplus.wx-plus.cn/public/upload/img/20181101/f27cd3716e375070a335eb8203a8d9ec.png",
    model_id: 11,
    name: "大小兄弟",
    status: 1,
    times: "9:00、10:00、11:00",
    user_id: 3,
}, 
{
    days: "2018-11-24",
    id: 149,
    img: "http://modelplus.wx-plus.cn/public/upload/img/20181101/f27cd3716e375070a335eb8203a8d9ec.png",
    model_id: 11,
    name: "大小兄弟",
    status: 1,
    times: "10:00、16:00、21:00",
    user_id: 3,
}, 
{
    days: "2018-12-04",
    id: 162,
    img: "http://modelplus.wx-plus.cn/public/upload/img/20181101/f27cd3716e375070a335eb8203a8d9ec.png",
    model_id: 11,
    name: "大小兄弟",
    status: 1,
    times: "9:00",
    user_id: 3,
}]

for(var i=0;i<arr.length;i++){
    for(var j=i+1;j<arr.length;j++){
        if(arr[i].days==arr[j].days){
            arr[i].times = arr[i].times.split('、').concat(arr[j].times.split('、')).join("、")
            arr.splice(j,1);
        }
    }
}

console.log(arr)



 // 获取游客预约成功的信息
getUserOrder() {
    api.getUserOrder({
        user_id: localStorage.getItem("user_id")
    }).then(res => {
        console.log("res",res.data);
        this._handler(res.data)
        console.log("res.data",res.data);
        for(let i=0; i < res.data.length; i++){
            if(res.host){
                res.data[i].img = res.host + res.data[i].img;
            }else{
                res.data[i].img = res.data[i].img;
            }
            res.data[i].days = res.data[i].days.split(' ')[0];
            // console.log('res.data[i].days',data[i].days)
            let arr = res.data[i].times.split('#');
            let str = '';
            arr.forEach(element => {
                str += element + ':00、'
            });
            str = str.substr(0,str.length-1)
            res.data[i].times = str;
        }
        // console.log("res.data",res.data)
        this.list  = res.data;
        console.log("this.list",this.list)
    });
},
// 处理相同日期字段的不同times字段数据
_handler(arr){
    for(var i = 0; i < arr.length; i++){
        for(var j = i+1; j < arr.length; j++){
            if(arr[i].days == arr[j].days){
                arr[i].times = arr[i].times.split('、').concat(arr[j].times.split('、')).join("、").replace("、","#")
                // arr[i].times = arr[i].times.substr(0,arr[i].times.length-1)
                console.log("arr[i].times",arr[i].times)
                arr.splice(j,1);
            }
        }
    }
},
复制代码

missing param for named route "visitordetail":

www.jqhtml.com/18879.html

前后端使用session token

vue.js项目打包上线

www.cnblogs.com/liuzhouyuan… www.cnblogs.com/xiaotanke/p…

www.jianshu.com/p/6307c5688…

手机微信缓存的清除，在测试页面的时候会加载上一个版本的样式

解决打包上线配置的问题

const bURI = "http://modelplus.wx-plus.cn/index.php/modelapi/Model_Api/"
const proxy_url = '/api/'
const devU = process.env.NODE_ENV == "development" ? proxy_url :  bURI
复制代码

// vue.config.js
module.exports = {
    baseUrl : "./",
    devServer: {
        port: 8080,
        open: true,
        proxy: {
            '/api': {
                target: 'http://modelplus.wx-plus.cn/index.php/modelapi/Model_Api/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            },
            '/upload': {
                target: 'http://xxx.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/upload': ''
                }
            },
        }
    }
}
复制代码

需要先安装 node-sass及sass-loader

npm i node-sass --save-dev

npm i sass-loader --save-dev
复制代码

解决在scss中引用图片路径报错: 方法1:在mian.js中引入，这种引入方式时，scss中图片使用相对路径

require('./assets/style/index.scss')

或 import './assets/style/index.scss'
复制代码

方法2:在app.vue中引入，借助webpack的~前缀

<style lang="scss">

    @import '~@/assets/style/index'

</style>
复制代码

css loader 会把非根路径的url解析为相对路径，加~前缀才解析为模块路径。

方法3:在*.vue中的scss中直接使用图片

方法4:在*.vue中直接通过require引用图片，然后在html中通过 :style="{backgroundImage: 'url('+ 变量 +')'}" 绑定使用

sass less scss区别

www.cnblogs.com/ToBeBest/p/…

axios vue.config.js配置文件

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
https://github.com/axios/axios
复制代码

项目部署配置

https://cli.vuejs.org/zh/guide/deployment.html#%E9%80%9A%E7%94%A8%E6%8C%87%E5%8D%97
// 设置全局的baseURL配置
// axios.defaults.baseURL = process.env.NODE_ENV?'/api/':"http://modelplus.wx-plus.cn/index.php/modelapi/Model_Api/";
复制代码

webpack 教程

webpack.docschina.org/ webpack.css88.com/

HTML5 History 模式

当你使用 history 模式时，URL 就像正常的 url，例如 yoursite.com/user/id，也好看…

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

httpd.apache.org/docs/2.2/mo…

项目名称

每次打包都会重新生成那个title

如何修改vue-router单页面title?

segmentfault.com/q/101000000… vue-meta github.com/declandewet… blog.csdn.net/nickroprak/…

// 动态改变title的名称
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})
复制代码

vue.js简单添加和删除 - 宋咯咯 - 博客园

www.cnblogs.com/songgirl/p/…

vue单页面标题设置 title

blog.csdn.net/gqzydh/arti…

碰到一个问题就是通过本地缓存角色改变角色 computed()

vue组件的加载顺序

segmentfault.com/q/101000001…

复用的组件的生命周期只会执行一次

created mounted

出现这个错误

Getter is missing for computed property "watch". 是因为我把这个watch放在了computed属性里面了，应该是跟watch同级存放

如果是父容器的内容如果点击，若果容器里面的某些东西不想被点击做某种处理的时候，我们可以使用@click.stop

数组排序合并问题

segmentfault.com/q/101000000…

js缓存原理

www.cnblogs.com/wuqiuxue/p/…

二维码生成

教你使用Vue.js的DevTools来调试你的vue项目

baijiahao.baidu.com/s?id=159012… blog.csdn.net/ReusLi/arti… www.vue-js.com/topic/5b969… blog.csdn.net/echo_ae/art…

ref属性是用在vue组件里面访问原生DOM操作的

原生DOM没有ref属性

vue组件获取不到$data的数据解决方法

segmentfault.com/q/101000000…

数据加载的异步问题获取this.$data时候获取不到数据

这种方式是不会获取的到$data属性的
created() {
    this._getModelVisitorTime();
    this.getDateList();
    this.getModelInfo();
    this.getTimeList();
},
复制代码

解决方案

created() {
    this._getModelVisitorTime();
    this.getDateList();
    this.getModelInfo();
},


_getModelVisitorTime() {
    api.getModelOrder({
        model_id: this.$route.params.id,
    }).then(res => {
        console.log('getModelOrder',res)
        var obj = {};
        var data = res.data;
        
        for (let i of data) {
            let key = i.days.split(' ')[0];
            let val = i.times.split('#');
            obj[key] = val;
        }
        this.schedule = obj;
        ## 下面的this.getTimeList()需要用到上面的this.schedule这个数据
        ## 所以我们要等数据赋值完成之后才执行下面这一句代码
        this.getTimeList();
    });
},
复制代码

解决方案2

blog.csdn.net/dongguan_12… www.jianshu.com/p/4450b63a2… api接口发送的是异步操作，但是获取数据要等到异步操作完成才能获取得到如果说有一些同步操作需要用到异步操作返回的数据，所以要

//有时候我们这种
mounted(){
    setTimeout(()=>{
        this.getTimeList();
    }, 2000)
},
复制代码

vue nextTick()

segmentfault.com/a/119000001…

如果是父组件传值给子组件，要等数据加载完，再加载组件

用VSCODE编辑器

www.cnblogs.com/handsomer/p… www.cnblogs.com/malcolmfeng…

游客账户密码

地址:dwz.cn/JjBQtWNJ , 账号:762845 , 密码:LLO873 地址:dwz.cn/JjBQtWNJ , 账号:555308 , 密码:PTL239

模特账号密码

地址:dwz.cn/JjBQtWNJ , 账号:566468 , 密码:WBB678

qrcode在vue中的使用

www.cnblogs.com/cuixiaozhen… www.jianshu.com/p/2e5e2f5a0… blog.csdn.net/zuorishu/ar… 其中有个bug就是不断的点击之后，会出现重叠二维码所以每次点击都要把容器的内容清除一下 document.getElementById("qrcode").innerHTML = '';

vue获取路由参数

www.jb51.net/article/121… blog.csdn.net/qq_36069339…

获取浏览器的链接

www.cnblogs.com/zhabayi/p/6…

js获取当前域名、Url、相对路径和参数以及指定参数

www.cnblogs.com/wangdahai/p…

微信开发文档

www.cnblogs.com/0201zcr/p/5… mp.weixin.qq.com/wiki?t=reso… mp.weixin.qq.com/debug/cgi-b… www.cnblogs.com/0201zcr/p/5… www.cnblogs.com/0201zcr/p/5… www.php.cn/weixin-kaif… www.cnblogs.com/0201zcr/p/5…

php自带加解密函数

www.cnblogs.com/Renyi-Fan/p…

git 解决fatal: Not a git repository

我用git add file添加文件时出现这样错误：

fatal: Not a git repository (or any of the parent directories): .git

提示说没有.git这样一个目录，解决办法如下：

git init就可以了！

当一个人找不到出路的时候，最好的办法就是将当前能做好的事情做到极致，做到无人能及。
复制代码

怎么修改Git remote add时使用的远程仓库？

方法一：

git remote rm origin 
git remote add origin git@github.com:Liutos/foobar.git

方法二：

git remote origin set-url <URL> 
把<URL>替换成新的url地址。

方法三：

直接修改.git/config文件
--------------------- 
作者：I-T枭 
来源：CSDN 
原文：https://blog.csdn.net/hahahhahahahha123456/article/details/81328244 
版权声明：本文为博主原创文章，转载请附上博文链接！
复制代码

模特

地址:dwz.cn/JjBQtWNJ , 账号:361330 , 密码:AFA793

颜色搭配 #f73688;

Input Text select() 方法

选取文本域的内容：
document.getElementById('input').select();
复制代码

项目中结合vue实现复制

console.log(this.message);
var oInput = document.createElement('input');
oInput.value = this.message;
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.style.display='none';
MessageBox('', '已复制好，可贴粘')
复制代码

用js实现一个富文本编辑器

https://www.cnblogs.com/zhg277245485/p/6582033.html
复制代码

浏览器自带的复制方式

https://www.cnblogs.com/PeunZhang/p/3324727.html
https://www.jb51.net/article/132317.htm
复制代码

vue 中ref 的使用注意事项

https://www.cnblogs.com/daiwenru/p/7910363.html
https://www.cnblogs.com/websmile/p/8258481.html
ref 有两种用法

1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2.ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

3.如何利用v-for 和ref 获取一组数组或者dom 节点
复制代码

css如何让图片自适应容器大小

https://www.cnblogs.com/liuxiaowei/p/7168493.html
https://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/
复制代码

如何创建一个node基础项目

blog.csdn.net/qq_24147051…

node-sass 安装失败的原因

segmentfault.com/a/119000001…

在写scss样式时需要注意

lang="scss"

地址:dwz.cn/JjBQtWNJ , 账号:542860 , 密码:FPW019

页面重新刷新一次

www.jb51.net/article/140… www.jb51.net/article/144… www.cnblogs.com/yiguozhi/p/… blog.csdn.net/qq_16772725…

如何创建ts项目

www.jb51.net/article/150… require: 以同步的方式检索其他模块的导出 (开发) import: 动态地加载模块 (生产)

微信分享功能

blog.csdn.net/qq_38423105…

如何初始化项目

www.cnblogs.com/myclovers/p…

import 与 require 的区别

www.cnblogs.com/sunshq/p/79…

axios 教程

www.kancloud.cn/yunye/axios…

nodeJS中读写文件方法的区别

www.cnblogs.com/pp-cat/p/65…

利用nodejs对本地json文件进行增删改查

blog.csdn.net/zhaoxiang66…

blog.csdn.net/lily2016n/a… vue中"‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序"的报错

解决冲突问题

git status ls vim git commit -m git commit git add -a

地址:dwz.cn/JjBQtWNJ , 账号:a9ebbc , 密码:8fe077 地址:dwz.cn/JjBQtWNJ , 账号:e98f28 , 密码:9bd8e3

如何解决cmd中文乱码

blog.csdn.net/qq_35038153…

git bash中文显示乱码解决

blog.csdn.net/qwer0123456…

在git中出现中文乱码的解决方案

blog.csdn.net/tyro_java/a…

Windows下Git Bash中VIM打开文件中文乱码

blog.csdn.net/tianzhaixin…

Windows下Git Bash中文乱码

www.cnblogs.com/wangkongmin…

windows7 cmd控制台默认为中文编码

切换成中文状态：CHCP 936 切换成UTF-8状态：CHCP 65001

vue 复用组件可动态更改内容

blog.csdn.net/gts_0901y/a…

vue mixins组件复用的几种方式（小结）

www.jb51.net/article/122… www.jb51.net/article/109…

地址:dwz.cn/JjBQtWNJ , 账号:958b13 , 密码:1ed548

HTML5调用手机摄像机和手机相册

blog.csdn.net/hcy0404/art… blog.csdn.net/z1587739528…

jquery.cookie.js

www.cnblogs.com/webcome/p/5… www.jianshu.com/p/dacd42345…

jquery.cookie.js 使用方法

定义：让网站服务器把少量数据储存到客户端的硬盘或内存，从客户端的硬盘读取数据的一种技术；

下载与引入:jquery.cookie.js基于jquery；
先引入jquery，再引入：jquery.cookie.js；下载：http://plugins.jquery.com/cookie/

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

使用：

1.添加一个"会话cookie"
$.cookie('the_cookie', 'the_value');

这里没有指明 cookie有效时间，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为 “会话cookie（session cookie）”。
复制代码

js SDK

www.cnblogs.com/yupeng/p/43… www.jianshu.com/p/bb88f7520… gitee.com/javen205/we… gitee.com/javen205/we…

js倒计时

www.cnblogs.com/heizai002/p…

h5拍照上传 FileReader

JavaScript 中的FileReader对象(实现上传图片预览) - LO-..._博客园 www.cnblogs.com/LO-gin/p/68…

FormData 上传到后台

blog.csdn.net/liupeifeng3…

h5移动端适应屏幕大小

segmentfault.com/q/101000000… www.coozhi.com/youxishuma/…

解决手机拍照预览图片自适应
<style>
    img#blah{
        background-size: cover;
        width: 100%;
        height: auto; 
    }
</style>
复制代码

移动端APP根据设备屏幕尺寸调整根元素font-size的js代码

!(function (doc, win) {
    var el = doc.documentElement;
    //resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

    function setSize() {
        var w = el.clientWidth;
        if (!w) return;
        w=w>480?480:w;
        w=w<320?320:w;
        el.style.fontSize = (100 * (w / 1080)).toFixed(3) + 'px';
        //1rem相当于1080的图中的100px，最小320px,最大480px，超过这个尺寸后rem与px的换算比例不再变化
        
    }
    if (!doc.addEventListener) return;
    setSize();
    win.addEventListener('resize', setSize, false);
    win.addEventListener('pageshow', function(e) {
         if (e.persisted) {
            setSize();
         }
    }, false);
})(document, window);
复制代码

JavaScript FormData的详细介绍及使用

blog.csdn.net/liupeifeng3…

vuejs路由使用的问题Error in render function: "TypeError: Cannot read property 'matched' of undefined"

blog.csdn.net/marswill/ar…

Vue2.0实现调用摄像头进行拍照功能以及图片上传功能引用exif.js（2）

blog.csdn.net/iceking66/a…

H5实现调用本地摄像头实现实时视频以及拍照功能

blog.csdn.net/c_kite/arti…

javascript入门到进阶

blog.csdn.net/c_kite/colu…

H5移动端调用手机摄像头

blog.csdn.net/qq_19872525…

vue拍照上传三种方式

www.jb51.net/article/143…

exif.js文档

code.ciaoca.com/javascript/… www.cnblogs.com/net-xiejun/…

Vue.js实现双向绑定的原理

www.cnblogs.com/zhangruiqi/…

说说VNode节点(Vue.js实现)

www.cnblogs.com/answershuto…

webAPP如何实现移动端拍照上传（Vue组件示例）？

www.cnblogs.com/catherinezy…

vue如何实现input file如何实现预览效果？

blog.csdn.net/xiaohu12685…

手摸手，带你用vue撸后台系列四(vueAdmin 一个极简的后台基础模板)

segmentfault.com/a/119000001…

www.hcoder.net/course/info…

Python PEP8 编码规范中文版

blog.csdn.net/ratsniper/a…

learn es6

new.babeljs.io/docs/en/nex…

input输入框的背景图片也可以这样玩

www.cnblogs.com/fdxxiaobai/…

如何修改input file 默认样式

blog.csdn.net/sndongcheng…

HTML5 FormData 上传文件

www.cnblogs.com/hutuzhu/p/4…

var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // 告诉jQuery不要去处理发送的数据
  contentType: false   // 告诉jQuery不要去设置Content-Type请求头
});
复制代码

$.ajax()

blog.csdn.net/dreamstar61…

[JS进阶] HTML5 之文件操作(file)

blog.csdn.net/oscar999/ar…

blog.csdn.net/jj3341332/a…

如何用php获取当前日期的7天内的时间

www.cnblogs.com/fyy-888/p/5…

工作笔记六——mint-ui的loadmore和mt-cell-swipe结合使用问题

blog.csdn.net/qq_25324335…

Duplicate keys detected: '8'. This may cause an update error. 错误

blog.csdn.net/babulongbo/…

segmentfault.com/q/101000001…

www.jianshu.com/p/04a5b4976… blog.csdn.net/you23hai45/…

JavaScript 中的FileReader对象（实现上传图片预览）

www.cnblogs.com/LO-gin/p/68…

我的 Vue.js 学习日记（十二） - props与$emit与.sync

vue emit 一起使用：监听自定义事件--》触发自定义事件--》触发监听结果

segmentfault.com/a/119000001… blog.csdn.net/weixin_4179…

使用vue.js路由踩到的一个坑Unknown custom element

blog.csdn.net/zhangxuekan…

(vue.js)关于Vuejs的on传值不成功的问题

www.codes51.com/itwd/436352…

Vue.js 在for循环里使用组件, 如何给列表绑定-自定义事件

segmentfault.com/q/101000000…

vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效

www.cnblogs.com/tangwanzun/…

vue组件中 v-for 和 @click同时使用 click失效，怎么处理？

segmentfault.com/q/101000000…

vue中v-for中的@click事件只有最后一项有效，其他都没有效果

为啥感觉好像只能把点击事件绑定在最外层的父级上面下面这样是有效的

<div
    class="book-cell"
    v-for="(item,index) in ModelVisitorInfo"
    :key="index" @click.stop="toMore(item.id)">
    <div class="icon">
        <img :src="item.img">
    </div>
    <div class="info">
        <div class="name">{{ item.name }}</div>
        <div class="desc">身高/{{ item.height }}CM 三围/{{ item.san }}</div>
    </div>
    <div class="btn" >更多</div>
    <!-- 清除浮动 -->
    <div class="clear"></div>
</div>
复制代码

这种确是只有最后一项有效

<div
    class="book-cell"
    v-for="(item,index) in ModelVisitorInfo"
    :key="index" >
    <div class="icon">
        <img :src="item.img">
    </div>
    <div class="info">
        <div class="name">{{ item.name }}</div>
        <div class="desc">身高/{{ item.height }}CM 三围/{{ item.san }}</div>
    </div>
    <div @click.stop="toMore(item.id)" class="btn" >更多</div>
    <!-- 清除浮动 -->
    <div class="clear"></div>
</div>
复制代码

在vue项目中，通过v-for循环，动态添加后台返回的事件

www.cnblogs.com/barry1102/p…

vue.js 1.0中用v-for遍历出的li中的@click事件在移动端无效

www.imooc.com/wenda/detai…

VUE 爬坑之旅-- v-for，v-on:click 使用需要注意的地方

blog.csdn.net/zgh0711/art…

vue插件库总结

www.cnblogs.com/calamus/p/8…

vue实现懒加载插件

www.cnblogs.com/xyyt/p/7650…

three.js 实现3d

www.thingjs.com/guide/?m=de…

git rm --cached module

git add module git commit -m"" git push

js抽象语法树

esprima.org/demo/parse.… segmentfault.com/a/119000001… blog.csdn.net/sysuzhyupen… segmentfault.com/a/119000001… blog.csdn.net/QY_SUN/arti… github.com/jquery/espr… 可以将源码提取成语法树 github.com/estools/esc… 语法树还原为源码 www.cnblogs.com/tugenhua070… blog.csdn.net/lichwei1983… segmentfault.com/a/119000001…

JS实现简单的轮播图（非常简单，一看就懂）

blog.csdn.net/best_cxy/ar… www.jianshu.com/p/5e47aae71…

css 样式中的定位，与浮动不能并存

html5网页嵌入到微信小程序

www.jianshu.com/p/50657f9af… blog.csdn.net/QQ254360258… www.qinziheng.com/xiaochengxu… www.cnblogs.com/51zxba/p/95… blog.csdn.net/henryhu712/…

git 创建已有的项目

gitee.com/kennana/tes…

微信小程序静态页面案例

www.cnblogs.com/rich23/arti…

如何定制接口教程

www.cnblogs.com/yexiaochai/… editor.swagger.io/ www.cnblogs.com/FlyAway2013… www.cnblogs.com/lovesong/p/…

前端接口规范实例

blog.csdn.net/res_min/art…

jquery 获取各种宽高

www.cnblogs.com/goloving/p/…

抽奖环节

www.cnblogs.com/qiheng/p/34… www.cnblogs.com/kangshuai/p… www.cnblogs.com/wwqianduan/…

前端与后端的交互（定义接口）

blog.csdn.net/qq_41198398…

------------------
|
|用户名：username
|邮箱：email
|密码：password
|登录
|
------------------
需要提交到哪里去：url:?
请求方式：POST
请求参数：{
    email: string,
    password: string,
    username: string
    checkCode: string
}

返回数据：{
    code: int //错误编码，登录成功为0，其他错误为>0
    result: {
        id: int//用户ID
        name: string//用户名
    },
    msg:""
}
复制代码

blog.csdn.net/mrnoboday/a… www.cnblogs.com/momoweiduan…

常用的插件库

www.cnblogs.com/worldly1013… blog.csdn.net/cddcj/artic…

图片占位插件

blog.csdn.net/wood2016/ar…

本地数据模拟器

github.com/nuysoft/Moc…

关于微信小程序web-view组件内嵌h5的具体配置流程

www.jutui360.com/view-3599.h… www.4u4v.net/wei-xin-xia… blog.csdn.net/jlq_diligen…

小程序开发社区

www.wxapp-union.com/

vue-cli3构建项目

blog.csdn.net/ejinxian/ar…

blog.csdn.net/qq_39652441…

blog.csdn.net/wildye/arti…

blog.csdn.net/dnswek/arti…

blog.csdn.net/qq_33699981…

segmentfault.com/a/119000001…

###前端测试 www.imooc.com/article/det…

vue.jsH5图片上传

www.cnblogs.com/net-xiejun/…

www.mamicode.com/info-detail…

vue中的typescript用法

www.jb51.net/article/143…

vue2.0 样式表引入的方法 css sass less

www.cnblogs.com/minigrassho…

vue项目中，全局引用sass

blog.csdn.net/qq_31393401…

vue博客教程

blog.csdn.net/qq_31393401…

vue-cli3引入全局样式

1.vue-cli3.0 scss全局文件设置 www.jianshu.com/p/f2038e10e…

vue公共样式1 global.scss

blog.csdn.net/liang377122…

内存与硬盘的区别

zhidao.baidu.com/question/31…

无废话Git——概念与本地服务器提交

blog.csdn.net/oscar999/ar… blog.csdn.net/oscar999/ar… blog.csdn.net/oscar999/ar… blog.csdn.net/oscar999/ar… blog.csdn.net/oscar999/ar… blog.csdn.net/oscar999/ar… blog.csdn.net/oscar999/ar… blog.csdn.net/oscar999/ar…

HTML5进阶文件操作

blog.csdn.net/oscar999/ar…

碰到这种跨域的方式

jquery.js:2 POST http://bm.carpenterhome.cn/api/Carpenter_api/uploadimg.html 500 (Internal Server Error)
send @ jquery.js:2
ajax @ jquery.js:2
postFile @ pactUploadNowBtnClick.js:75
(anonymous) @ pactUploadNowBtnClick.js:57
dispatch @ jquery.js:2
y.handle @ jquery.js:2
index.html:1 Access to XMLHttpRequest at 'http://bm.carpenterhome.cn/api/Carpenter_api/uploadimg.html' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
复制代码

一般让后台设置一下跨域 jquery.ajax()也可以设置跨域请求

https://blog.csdn.net/hu_feng903/article/details/70227953
复制代码

使用jQuery实现跨域提交表单数据

www.cnblogs.com/mracale/p/5…

Vue数据双向绑定的原理

blog.csdn.net/little_litt… blog.csdn.net/tangxiujian…

笔记：TP5框架完整学习笔记

www.jianshu.com/p/7dd18927d…

css3新增单位

blog.csdn.net/ZNYSYS520/a… www.cnblogs.com/luxiaoxing/…

移动端遮罩层居中

.toast-msg {
    position: fixed;
    top: 50%;
    left: 50%;
    color: white;
    -webkit-transform: translate(-50%,0%);
    transform:translate(-50%,0%);
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px 40px;
    border-radius: 5px;
 }
复制代码

.countDown p { position: absolute; font-size: 4vw; top: 40%; left: 50%; width: 60%; -webkit-transform: translate(-50%,0%); transform:translate(-50%,0%); text-align: center; line-height: 0px; } www.cnblogs.com/lidongfeng/… github.com/amfe/articl… www.cnblogs.com/hyx626/p/97… blog.csdn.net/this_tall_p…

vue图片左右滑动及手势缩放

blog.csdn.net/ttn456456/a…

Vue实现app左右滑动效果]

www.jianshu.com/p/26b8be263…

vue移动端滑动切换图片的一个简单思路

blog.csdn.net/buppt/artic… blog.csdn.net/qq_35430000…

移动端Vue.js的图片预览组件，支持放缩、滑动功能！

www.ml-ui.com/#/docs/i-vi… segmentfault.com/a/119000001…

vue实现一个移动端屏蔽滑动的遮罩层

www.cnblogs.com/Eden-cola/p…

segmentfault.com/

利用vueJs实现图片轮播

blog.csdn.net/qq_34223398…

vue.js github

github.com/sunseekers/… www.cnblogs.com/ndos/p/9642… www.cnblogs.com/ndos/catego…

vue-cli3配置详解

www.cnblogs.com/zjhr/p/9472…

开发vue通用组件

www.jb51.net/article/148…

移动端H5设计稿

www.cnblogs.com/cench/p/580… blog.csdn.net/wojiaomaxia…

移动端如何根据屏幕大小改变字体大小

www.jb51.net/article/147…

如何让圆角自适应

www.cnblogs.com/djdliu/p/39…

postcss.config.js配置

www.cnblogs.com/lantuoxie/p…

module.exports = {
  plugins: {
    'autoprefixer': {},
  }
}
复制代码

LNMP安装配置

www.linuxidc.com/Linux/2018-… www.cnblogs.com/wujuntian/p… www.cnblogs.com/xxoome/p/58…

vue mixins.js教程

www.deboy.cn/Vue-mixins-… blog.csdn.net/u014452812/… www.cnblogs.com/Ivy-s/p/993… blog.csdn.net/kuangshp128…

为啥iphone手机的css会自动加上圆角

www.cnblogs.com/yangjj1216/… blog.csdn.net/bright2017/… blog.csdn.net/maodoudou12… www.cnblogs.com/qianduantin… blog.csdn.net/p930318/art…

两个数组合并成一个数组

blog.csdn.net/p930318/art…

vue 移动端 rem适配

blog.csdn.net/p930318/art…

移动端安卓和ios兼容性汇总

blog.csdn.net/ZhushiKezha…

CSS+JS控制字体闪烁

blog.csdn.net/xtzz92/arti…

Flex 布局教程：语法篇

blog.csdn.net/XTZZ92/arti…

CSS文字选中样式和文字闪烁效果

blog.csdn.net/qq_16371909…

css3 文字闪烁效果_html实现文字闪烁代码的多种形式

www.fly63.com/article/det…

站位图网站

tool.lu/imageholder…

vue中的:src绑定的是网络图片，不能绑定本地图片

禁用与启用手机端页面的 touchmove 事件

www.caihaibo.cn/devpro/webf…

A函数封装

www.cnblogs.com/shimily/cat…

为什么尽量用局部变量代替全局变量

www.cnblogs.com/tracyzeng/a…

vue懒加载插件

www.jianshu.com/p/4defe2eec…

占位插件holder.js

blog.csdn.net/wood2016/ar… blog.csdn.net/wang_magent… blog.csdn.net/supergao222… www.xuanfengge.com/placeholder…

在线图像占位图

www.jianshu.com/p/1b5219ec7…

图片加载失败优化处理

www.cnblogs.com/zhuzhenwei9…

懒加载图片插件的源码

github.com/lzxb/lazy-l…

nuxt.js

juejin.im/post/598aab… segmentfault.com/a/119000001… zh.nuxtjs.org/guide/insta…

深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame

www.cnblogs.com/xiaohuochai… www.webhek.com/post/reques…

requestAnimationFrame/cancelAnimationFrame——性能更好的js动画实现方式

blog.csdn.net/qyaroon/art… www.cnblogs.com/xiaohuochai… www.cnblogs.com/xiaohuochai…

使用vue全家桶制作博客网站

www.cnblogs.com/xiaohuochai…

移动端touch事件影响click事件的相关解决方法

www.tuicool.com/articles/3Q… www.cnblogs.com/lvmingyin/p… www.cnblogs.com/chaojidan/p…

记录fastclick中一次手动触发click事件失败

segmentfault.com/a/119000000…

移动端（微信等）使用 vConsole调试console

blog.csdn.net/m0_37036014…

fastclick.js - 解决移动端 click 事件响应慢和点透问题

blog.csdn.net/u011500781/…

移动Web滚动性能优化: Passive event listeners

segmentfault.com/a/119000000… Unable to preventDefault inside passive event listener due to target being treated as passive

会使得click事件失效
@touchstart.stop.prevent="middleTouchStart"
@touchmove.stop.prevent="middleTouchMove"
@touchend.stop.prevent="middleTouchEnd"
复制代码

理解js的事件冒泡和事件捕获

segmentfault.com/a/119000001…

2018-07-19 发布

javascript 事件流捕获与冒泡 segmentfault.com/a/119000001…

移动端点击事件全攻略，这里的坑你知多少？

segmentfault.com/a/119000000… segmentfault.com/a/119000001… www.jianshu.com/p/6e2b68a93…

一切都是 *{touch-action:none}这样太暴力了

// cursor:pointer;

如何清除浮动

www.cnblogs.com/oneplace/p/…

关于passive event listener的一次踩坑

juejin.im/post/5ad804…

touch-action属性引起的探索

www.cnblogs.com/tu-0718/p/7…

移动端cursor:pointer问题

segmentfault.com/q/101000000… www.cnblogs.com/jjworld/p/7…

cursor:hand 与 cursor:pointer的区别介绍

blog.csdn.net/u013108335/…

移动端开发遇到的几个问题

www.cnblogs.com/chuaWeb/p/5…

vue-cli中vue-scroller的详细用法，上拉加载下拉刷新,vue-axios获取数据的详细过程

www.jianshu.com/p/31ad32e7e…

基于VueJs加载更多控件实现

blog.csdn.net/cmdmac/arti…

vue的爬坑之路（九）之----vue-scroller下拉刷新上拉加载插件

www.cnblogs.com/nanjie/p/94…

原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

www.cnblogs.com/zhrn/p/4819… www.cnblogs.com/zimengxiyu/…

bash之家

www.bathome.net/

Javascript

blog.csdn.net/huwei2003/a… blog.csdn.net/huwei2003/a… blog.csdn.net/huwei2003/a…

CSS画三角形以及before,after伪元素的应用。

www.cnblogs.com/lanxianshen… www.cnblogs.com/lhat/p/4800…

博客教程

blog.csdn.net/crazywoniu/…

wordpress教程

www.kancloud.cn/jabber/word… codex.wordpress.org/zh-cn:WordP…

算法视频教程

edu.51cto.com/center/cour…

vue+node+mongodb

dzblog.cn/article/5a6… mp.weixin.qq.com/s/iwh4fVci0… github.com/ikcamp/koa2… segmentfault.com/a/119000001…

vue弹框组件

基于 Vue 2.0 实现的移动端弹窗 (Alert, Confirm, Toast)组件. blog.csdn.net/yelin042/ar… www.cnblogs.com/daizhong/p/… blog.csdn.net/qq_33599109… baijiahao.baidu.com/s?id=159085…

保存屏幕快照

blog.csdn.net/ysiqiqi/art…

短网址(short URL)系统的原理及其实现

blog.csdn.net/lifa1/artic… blog.csdn.net/wang123459/…

如是说如是 blog.csdn.net/nuli888/art… blog.csdn.net/suxianbaozi… www.cnblogs.com/lovekingly/… blog.csdn.net/lishanleili…

Nginx中文文档

www.nginx.cn/doc/

vue富文本编辑器

github.com/caiya/vue-n…

好博客

blog.csdn.net/obkoro1/art… obkoro1.com/ juejin.im/user/58714f…

向大神靠近

juejin.im/post/5c1fa3…

开源项目遇到一个问题

就是在使用mint-ui的时候，我们需要全局引入样式mint/lib/style.css

人工智能学家的博客

blog.csdn.net/cf2SudS8x8F…

工作总结以及学习总结和整理的链接

git使用

ubantu14.0.4 部署laravel5.7 博客系统

今天的修改

$refs ,ref 使用

一个vue组件只有一个id=app

子组件向父组件传值 使用this.$emit("事件名","传递的参数")

父组件向子组件传值 使用props:["数据名称"]

mint-ui 头部组件的使用 Header

子组件中获取父组件传来的值提示undefined

js时间戳问题

有些时候每次都要发请求

解决异步加载过程中 子组件接受不了父组件传值的情况

加载渲染过程

子组件更新过程

父组件更新过程

销毁过程

created mounted的区别

程序对比

注意引入scss文件的时候 末尾要加入 ;,不然会报错

HTML5 文件上传

SQL触发器实例讲解

router基本使用

mint-ui 博客教程

vant 组件库

api封装

基于hash 和基于html5 history api

父组件传值到子组件

子组件传值到父组件

命名路由

vue.js 跨域代理

qs.parse()、qs.stringify()使用方法

vue axios全攻略

组合js数组对象元素的相同字段的

missing param for named route "visitordetail":

前后端使用session token

vue.js项目打包上线

手机微信缓存的清除，在测试页面的时候会加载上一个版本的样式

解决打包上线配置的问题

sass less scss区别

axios vue.config.js配置文件

项目部署配置

webpack 教程

HTML5 History 模式

项目名称

如何修改vue-router单页面title?

vue.js简单添加和删除 - 宋咯咯 - 博客园

vue单页面标题设置 title

vue组件的加载顺序

复用的组件的生命周期只会执行一次

本地缓存

移动端实现居中的方法

css响应式

H5知识图库

动态加载样式 noscroll 解决弹出遮罩层，底层body不能滚动

如何检测蒙版弹出隐藏

js滑动触屏事件监听

解决移动端手势问题

前端touch事件方向的判断

移动Web开发实践——解决position:fixed自适应BUG

移动端常见问题

HTML5滑动（swipe）事件

出现这个错误

如果是父容器的内容如果点击，若果容器里面的某些东西不想被点击做某种处理的时候，我们可以使用@click.stop

数组排序合并问题

js缓存原理

二维码生成

教你使用Vue.js的DevTools来调试你的vue项目

ref属性是用在vue组件里面访问原生DOM操作的

原生DOM没有ref属性

vue组件获取不到$data的数据解决方法

数据加载的异步问题获取this.$data时候获取不到数据

解决方案

解决方案2

vue nextTick()

如果是父组件传值给子组件，要等数据加载完，再加载组件

用VSCODE编辑器

游客账户密码

模特账号密码

qrcode在vue中的使用

子组件向父组件传值使用this.$emit("事件名","传递的参数")

父组件向子组件传值使用props:["数据名称"]

解决异步加载过程中子组件接受不了父组件传值的情况

注意引入scss文件的时候末尾要加入 ;,不然会报错

在写scss样式时需要注意

windows7 cmd控制台默认为中文编码

vue 复用组件可动态更改内容

手摸手，带你用vue撸后台系列四(vueAdmin 一个极简的后台基础模板)