工做總結以及學習總結和整理的連接

時間 2019-11-16

標籤總結以及學習整理連接简体版

原文原文鏈接

碰到父組件的數據經過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 的時候要重複的輸入用戶名javascript

[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 statusphp
添加到本地倉庫 git add . 添加全部文件，可是這樣有點粗暴，咱們修改了那個文件就能夠 git add src/api/api.jscss
而後就是添加註釋，你最近解決了什麼問題 git commit -m"解決了問題的註釋"html
更新到碼雲，github上面去，git push前端
更新到本地，就能夠是 git pullvue

最近在自學vue,照着網上例子寫了一個父子組件的雙向綁定，只實現了單向綁定。父組件的數據不能隨子組件變化，只能是子組件數據隨父組件變化；在官網看了文檔一時仍是沒法理解其思路。請各位前輩幫忙看看是哪裏出的問題，謝謝html5

<!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-on來接收這個值。下述爲雙向傳遞，我本身寫了一篇筆記，分享給你，對你學習vue頗有幫助，好好研讀java

<!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 Technologiesnode

安裝mysqlpython

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.一、<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 一個極簡的後臺基礎模板)