{"id":7748,"date":"2022-11-12T12:32:37","date_gmt":"2022-11-12T04:32:37","guid":{"rendered":"https:\/\/egonlin.com\/?p=7748"},"modified":"2022-11-12T12:32:37","modified_gmt":"2022-11-12T04:32:37","slug":"%e7%ac%ac%e5%9b%9b%e8%8a%82%ef%bc%9avue%e7%bb%84%e4%bb%b6-2","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=7748","title":{"rendered":"\u7b2c\u56db\u8282\uff1aVue\u7ec4\u4ef6"},"content":{"rendered":"

\u7ec4\u4ef6<\/h1>\n

1 fetch\u548caxios<\/h2>\n

axios\u4e0efetch\u5b9e\u73b0\u6570\u636e\u8bf7\u6c42<\/p>\n

(1)fetch\uff08\u4e0d\u662f\u6240\u6709\u6d4f\u89c8\u5668\u90fd\u652f\u6301\uff0c\u8c37\u6b4c\u6d4f\u89c8\u5668\u652f\u6301\uff09
\nXMLHttpRequest \u662f\u4e00\u4e2a\u8bbe\u8ba1\u7c97\u7cd9\u7684 API\uff0c\u914d\u7f6e\u548c\u8c03\u7528\u65b9\u5f0f\u975e\u5e38\u6df7\u4e71\uff0c\u800c\u4e14\u57fa\u4e8e\u4e8b\u4ef6\u7684\u5f02\u6b65\u6a21\u578b\u5199\u8d77\u6765\u4e0d\u53cb\u597d\u3002 \u517c\u5bb9\u6027\u4e0d\u597d
\npolyfill: https:\/\/github.com\/camsong\/fetch-ie8<\/a><\/p>\n

1.1 fetche\u4f7f\u7528<\/h3>\n
<!DOCTYPE html>\n<html>\n<head>\n    <meta charset="UTF-8">\n    <title>fetch<\/title>\n    <script src="js\/vue.js"><\/script>\n<\/head>\n<body>\n<div id="box">\n\n    <button @click="handleClick()">\u83b7\u53d6\u5f71\u7247\u4fe1\u606f<\/button>\n    <ul>\n        <li v-for="data in datalist">\n            <h3>{{data.name}}<\/h3>\n            <img :src="data.poster"\/>\n        <\/li>\n    <\/ul>\n<\/div>\n<script type="text\/javascript">\n    new Vue({\n        el: "#box",\n        data: {\n            datalist: []\n        },\n        methods: {\n            handleClick() {\n                \/\/https:\/\/m.maizuo.com\/v5\/?co=mzmovie#\/films\/nowPlaying\n                fetch(".\/json\/test.json").then(res => res.json()).then(res => {\n                    console.log(res.data.films)\n                    this.datalist = res.data.films\n                })\n            }\n        }\n    })\n\n    \/*\n     \/\/ post-1\n      fetch("**",{\n          method:'post',\n          headers: {\n             "Content\u2010Type": "application\/x\u2010www\u2010form\u2010urlencoded"\n          },\n         body: "name=kerwin&age=100",\n         credentials:"include"\n     }).then(res=>res.json()).then(res=>{console.log(res)});\n\n     \/\/ post-2\n      fetch("**",{\n          method:'post',\n          headers: {\n             "Content\u2010Type": "application\/json"\n          },\n         body: JSON.stringify({\n             myname:"kerwin",\n             myage:100\n         })\n     }).then(res=>res.json()).then(res=>{console.log(res)});\n    *\/\n\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
1.2 axios\u7684\u4f7f\u7528<\/h3>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset="utf-8">\n<title>axios<\/title>\n<script type="text\/javascript" src="js\/vue.js"><\/script>\n<script src="https:\/\/unpkg.com\/axios\/dist\/axios.min.js"><\/script>\n<\/head>\n<body>\n    <div id="box">\n       <button @click="handleClick()">\u6b63\u5728\u70ed\u6620<\/button>\n\n        <ul>\n            <li v-for="data in datalist">\n                <h3>{{data.name}}<\/h3>\n                <img :src="data.poster"\/>\n            <\/li>\n        <\/ul>\n    <\/div>\n    <script type="text\/javascript">\n\n      new Vue({\n          el:"#box",\n          data:{\n              datalist:[]\n          },\n          methods:{\n            handleClick(){\n                axios.get(".\/json\/test.json").then(res=>{\n                    console.log(res.data.data.films) \/\/ axios \u81ea\u52a8\u5305\u88c5data\u5c5e\u6027 res.data\n                    this.datalist = res.data.data.films\n                }).catch(err=>{\n                    console.log(err);\n                })\n            }\n          }\n      })\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
2 \u8ba1\u7b97\u5c5e\u6027<\/h2>\n
\u590d\u6742\u903b\u8f91,\u6a21\u677f\u96be\u4ee5\u7ef4\u62a4\n(1) \u57fa\u7840\u4f8b\u5b50\n(2) \u8ba1\u7b97\u7f13\u5b58 VS methods-\u8ba1\u7b97\u5c5e\u6027\u662f\u57fa\u4e8e\u5b83\u4eec\u7684\u4f9d\u8d56\u8fdb\u884c\u7f13\u5b58\u7684\u3002-\u8ba1\u7b97\u5c5e\u6027\u53ea\u6709\u5728\u5b83\u7684\u76f8\u5173\u4f9d\u8d56\u53d1\u751f\u6539\u53d8\u65f6\u624d\u4f1a\u91cd\u65b0\u6c42\u503c\n(3) \u8ba1\u7b97\u5c5e\u6027 VS watch\n    - v-model3<\/code><\/pre>\n
2.1 \u901a\u8fc7\u8ba1\u7b97\u5c5e\u6027\u5b9e\u73b0\u540d\u5b57\u9996\u5b57\u6bcd\u5927\u5199<\/h3>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>Title<\/title>\n    <script src="js\/vue.js"><\/script>\n<\/head>\n<body>\n<div id="box">\n    <!--\u5927\u6bb5\u7684\u4ee3\u7801\u5199\u5728\u8fd9\u91cc\u4e0d\u597d\uff0c\u4f7f\u7528\u8ba1\u7b97\u5c5e\u6027-->\n    {{mytext.substring(0,1).toUpperCase()+mytext.substring(1)}}\n    <p>\u8ba1\u7b97\u5c5e\u6027\uff1a{{getname}}<\/p>\n    <!--\u666e\u901a\u65b9\u6cd5\u8981\u52a0\u62ec\u53f7-->\n    <p>\u666e\u901a\u65b9\u6cd5\uff1a{{getNameMethod()}}<\/p>\n    <!--\u533a\u522b\u662f\u5728\u540c\u4e00\u4e2a\u9875\u9762\u4e2d\u4f7f\u7528\u591a\u6b21\u8ba1\u7b97\u5c5e\u6027\uff0c\u4e0d\u4f1a\u591a\u6b21\u6267\u884c-->\n<\/div>\n<\/body>\n<script>\n    var vm = new Vue({\n        el: '#box',\n        data: {\n            mytext:'lqz',\n        },\n        computed:{\n            getname(){\/\/\u4f9d\u8d56\u7684\u72b6\u6001\u6539\u53d8\u4e86\uff0c\u4f1a\u91cd\u65b0\u8ba1\u7b97\n                console.log('\u8ba1\u7b97\u5c5e\u6027')\n                return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)\n            }\n        },\n        methods:{\n            getNameMethod(){\n                console.log('\u666e\u901a\u65b9\u6cd5')\n                return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)\n            }\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
2.2 \u901a\u8fc7\u8ba1\u7b97\u5c5e\u6027\u91cd\u5199\u8fc7\u6ee4\u6848\u4f8b<\/h3>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>Title<\/title>\n    <script src="js\/vue.js"><\/script>\n<\/head>\n<body>\n<div id="box">\n    <p><input type="text" v-model="mytext" @input="handleChange"><\/p>\n    <ul>\n        <li v-for="data in newlist">{{data}}<\/li>\n    <\/ul>\n<\/div>\n<\/body>\n<script>\n    var vm = new Vue({\n        el: '#box',\n        data: {\n            mytext: '',\n            datalist: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac'],\n\n        },\n        computed: {\n            newlist() {\n                var newlist = this.datalist.filter(item => {\n                    return item.indexOf(this.mytext) > -1\n                })\n                return newlist\n            },\n        },\n\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
3 Mixins<\/h2>\n
\u6df7\u5165 (mixins) \u662f\u4e00\u79cd\u5206\u53d1 Vue \u7ec4\u4ef6\u4e2d\u53ef\u590d\u7528\u529f\u80fd\u7684\u975e\u5e38\u7075\u6d3b\u7684\u65b9\u5f0f\u3002\u6df7\u5165\u5bf9\u8c61\u53ef\u4ee5\u5305\u542b\u4efb\u610f\u7ec4\u4ef6\u9009\u9879\u3002\u5f53\u7ec4\u4ef6\u4f7f\u7528\u6df7\u5165\u5bf9\u8c61\u65f6\uff0c\u6240\u6709\u6df7\u5165\u5bf9\u8c61\u7684\u9009\u9879\u5c06\u88ab\u6df7\u5165\u8be5\u7ec4\u4ef6\u672c\u8eab\u7684\u9009\u9879\u3002<\/code><\/pre>\n
4 \u865a\u62dfdom\u4e0ediff\u7b97\u6cd5 key\u7684\u4f5c\u7528<\/h2>\n
4.1 Vue2.0 v-for \u4e2d :key \u6709\u4ec0\u4e48\u7528\u5462\uff1f<\/h3>\n
\u5176\u5b9e\u5462\u4e0d\u53ea\u662fvue\uff0creact\u4e2d\u5728\u6267\u884c\u5217\u8868\u6e32\u67d3\u65f6\u4e5f\u4f1a\u8981\u6c42\u7ed9\u6bcf\u4e2a\u7ec4\u4ef6\u6dfb\u52a0key\u8fd9\u4e2a\u5c5e\u6027\u3002\nkey\u7b80\u5355\u70b9\u6765\u8bf4\u5c31\u662f\u552f\u4e00\u6807\u8bc6\uff0c\u5c31\u50cfID\u4e00\u6837\u552f\u4e00\u6027\n\u8981\u77e5\u9053\uff0cvue\u548creact\u90fd\u5b9e\u73b0\u4e86\u4e00\u5957\u865a\u62dfDOM\uff0c\u4f7f\u6211\u4eec\u53ef\u4ee5\u4e0d\u76f4\u63a5\u64cd\u4f5cDOM\u5143\u7d20\uff0c\u53ea\u64cd\u4f5c\u6570\u636e\u4fbf\u53ef\u4ee5\u91cd\u65b0\u6e32\u67d3\u9875\u9762\u3002\u800c\u9690\u85cf\u5728\u80cc\u540e\u7684\u539f\u7406\u4fbf\u662f\u5176\u9ad8\u6548\u7684Diff\u7b97\u6cd5\u3002\n\n\u53ea\u505a\u540c\u5c42\u7ea7\u7684\u5bf9\u6bd4\n\u6309\u7167key\u503c\u6bd4\u8f83\uff0c\u51fa\u73b0\u65b0\u7684key\u5c31\u63d2\u5165\n\u901a\u7ec4\u4ef6\u5bf9\u6bd4<\/code><\/pre>\n
4.2 \u865a\u62dfDOM\u7684diff\u7b97\u6cd5<\/h3>\n
\"\"<\/div><\/p>\n
\"image-20201214225437290\"<\/div><\/p>\n
4.3 \u5177\u4f53\u5b9e\u73b0<\/h3>\n
4.3.1 \u628a\u6811\u6309\u7167\u5c42\u7ea7\u5206\u89e3<\/h4>\n
\"image-20201214225736585\"<\/div><\/p>\n
4.3.2 \u540ckey\u503c\u6bd4\u8f83<\/h4>\n
\"image-20201214225827633\"<\/div><\/p>\n
4.3.3 \u901a\u7ec4\u4ef6\u5bf9\u6bd4<\/h4>\n
\"image-20201214225913886\"<\/div><\/p>\n
<div id="box">\n    <div v-if="isShow">111<\/div>\n    <p v-else>222<\/p>\n    <!--    \n    {tag:div,value:111}\n    {tag:p,value:222}\n    \u76f4\u63a5\u4e0d\u6bd4\u8f83\uff0c\u76f4\u63a5\u5220\u9664div\uff0c\u65b0\u589ep\n    -->\n\n    <div v-if="isShow">111<\/div>\n    <div v-else>222<\/div>\n    <!--    \n    {tag:div,value:111}\n    {tag:div,value:222}\n    \u6bd4\u8f83\u90fd\u662fdiv\uff0c\u53ea\u66ff\u6362\u6587\u672c\u5185\u5bb9\n    -->\n<\/div><\/code><\/pre>\n
https:\/\/segmentfault.com\/a\/1190000020170310<\/a><\/p>\n
5 \u7ec4\u4ef6\u5316\u5f00\u53d1\u57fa\u7840<\/h2>\n
5.1 \u7ec4\u4ef6\u662f\u4ec0\u4e48\uff1f\u6709\u4ec0\u4e48\u7528<\/h3>\n
\u6269\u5c55 HTML \u5143\u7d20\uff0c\u5c01\u88c5\u53ef\u91cd\u7528\u7684\u4ee3\u7801\uff0c\u76ee\u7684\u662f\u590d\u7528\n    -\u4f8b\u5982\uff1a\u6709\u4e00\u4e2a\u8f6e\u64ad\uff0c\u53ef\u4ee5\u5728\u5f88\u591a\u9875\u9762\u4e2d\u4f7f\u7528\uff0c\u4e00\u4e2a\u8f6e\u64ad\u6709js\uff0ccss\uff0chtml\n    -\u7ec4\u4ef6\u628ajs\uff0ccss\uff0chtml\u653e\u5230\u4e00\u8d77\uff0c\u6709\u903b\u8f91\uff0c\u6709\u6837\u5f0f\uff0c\u6709html<\/code><\/pre>\n
6 \u7ec4\u4ef6\u6ce8\u518c\u65b9\u5f0f<\/h2>\n
1 \u5168\u5c40\u7ec4\u4ef6\n    Vue.component\n2 \u5c40\u90e8\u7ec4\u4ef6<\/code><\/pre>\n
6.1 \u5b9a\u4e49\u5168\u5c40\u7ec4\u4ef6\uff0c\u7ed1\u5b9a\u4e8b\u4ef6\uff0c\u7f16\u5199\u6837\u5f0f<\/h3>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>Title<\/title>\n    <script src="js\/vue.js"><\/script>\n<\/head>\n<body>\n<div id="box">\n<navbar><\/navbar>\n<\/div>\n<\/body>\n<script>\n    \/\/\u6ca1\u6709\u4ee3\u7801\u63d0\u793a\uff0c\u8bed\u6cd5\u68c0\u67e5\uff0c\u76ee\u524d\u8fd9\u4e48\u7528\n    \/\/\u540e\u9762\u4f1a\u4f7f\u7528webpack\u6253\u5305\uff0c\u76f4\u63a5\u5b9a\u4e49\u6210 xx.vue\u6587\u4ef6\uff0c\u901a\u8fc7webpack\u6253\u5305\n    Vue.component('navbar',{\n        template:`\n        <div>\n            <button @click="handleClick">\u8fd4\u56de<\/button>\n            \u6211\u662fNavBar\n            <button style="background: red">\u4e3b\u9875<\/button>\n        <\/div>\n        `,\n        methods:{\n            handleClick(){\n                console.log('nav nav')\n            }\n        }\n    })\n    var vm = new Vue({\n        el: '#box',\n        data: {\n        },\n\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
6.2 \u5b9a\u4e49\u5c40\u90e8\u7ec4\u4ef6<\/h3>\n
Vue.component('navbar', {\n    template: `\n        <div>\n            <button @click="handleClick">\u8fd4\u56de<\/button>\n            \u6211\u662fNavBar\n            <button style="background: red">\u4e3b\u9875<\/button>\n            <br>\n            <child><\/child>\n        <\/div>\n    `,\n    methods: {\n        handleClick() {\n            console.log('nav nav')\n        },\n    },\n    components: {\n            child: {\n                template: `<button>\u513f\u5b50<\/button>`,\n            }\n\n        }\n})<\/code><\/pre>\n
7 \u7ec4\u4ef6\u7f16\u5199\u65b9\u5f0f\u4e0eVue\u5b9e\u4f8b\u7684\u533a\u522b<\/h2>\n
1 \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u9700\u8981\u6709\u4e00\u4e2aroot element\uff0c\u4e00\u822c\u5305\u88f9\u5728\u4e00\u4e2adiv\u4e2d\n2 \u7236\u5b50\u7ec4\u4ef6\u7684data\u662f\u65e0\u6cd5\u5171\u4eab\n3 \u7ec4\u4ef6\u53ef\u4ee5\u6709data\uff0cmethods,computed....,\u4f46\u662fdata \u5fc5\u987b\u662f\u4e00\u4e2a\u51fd\u6570<\/code><\/pre>\n
Vue.component('navbar', {\n    template: `\n        <div>\n            <button @click="handleClick">\u8fd4\u56de<\/button>\n            \u6211\u662fNavBar{{aa}}\n            <button style="background: red">\u4e3b\u9875<\/button>\n            <br>\n            <child><\/child>\n        <\/div>\n    `,\n    methods: {\n        handleClick() {\n            console.log('nav nav')\n        },\n    },\n    components: {\n            child: {\n                template: `<button>\u513f\u5b50<\/button>`,\n            }\n\n        },\n    data(){\n        return {\n            aa:'lqz'\n        }\n    },\n})<\/code><\/pre>\n
8 \u7ec4\u4ef6\u901a\u4fe1<\/h2>\n
1 \u7236\u5b50\u7ec4\u4ef6\u4f20\u503c (props down, events up)\n2 \u7236\u4f20\u5b50\u4e4b\u5c5e\u6027\u9a8c\u8bc1props:{name:Number}Number,String,Boolean,Array,Object,Function,null(\u4e0d\u9650\u5236\u7c7b\u578b)\n3 \u4e8b\u4ef6\u673a\u5236a.\u4f7f\u7528 $on(eventName) \u76d1\u542c\u4e8b\u4ef6b.\u4f7f\u7528 $emit(eventName) \u89e6\u53d1\u4e8b\u4ef6\n4 Ref<input ref="mytext"\/>  this.$refs.mytext\n5 \u4e8b\u4ef6\u603b\u7ebfvar bus = new Vue();* mounted\u751f\u547d\u5468\u671f\u4e2d\u8fdb\u884c\u76d1\u542c<\/code><\/pre>\n
8.1 \u7236\u5b50\u901a\u4fe1\u4e4b\u7236\u4f20\u5b50<\/h3>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>Title<\/title>\n    <script src="js\/vue.js"><\/script>\n<\/head>\n<body>\n<div id="box">\n    <!--\u4fdd\u8bc1\u5c5e\u6027\u540d\u548cprops\u4e2d\u7684\u5c5e\u6027\u540d\u548c\u53d8\u91cf\u540d\u4e00\u81f4\u5373\u53ef-->\n    <navbar myname="lqz"><\/navbar>\n    <navbar myname="egon"><\/navbar>\n    <!--\u6ce8\u610f\u6570\u636e\u7ed1\u5b9a-->\n    <navbar :myname="egon"><\/navbar>\n    <!--\u53ef\u4ee5\u4f20\u591a\u4e2a,\u4f46\u662f\u6ce8\u610f\uff0c\u4f20\u5165\u7684isshow\u662f\u5b57\u7b26\u4e32\uff0c\u53ef\u4ee5\u4f7f\u7528\u6570\u636e\u7ed1\u5b9a\u53d8\u6210\u5e03\u5c14-->\n    <navbar :myname="egon" isshow="false"><\/navbar>\n    <navbar :myname="egon" :isshow="false"><\/navbar>\n<\/div>\n<\/body>\n<script>\n    \/\/\u6ca1\u6709\u4ee3\u7801\u63d0\u793a\uff0c\u8bed\u6cd5\u68c0\u67e5\uff0c\u76ee\u524d\u8fd9\u4e48\u7528\n    \/\/\u540e\u9762\u4f1a\u4f7f\u7528webpack\u6253\u5305\uff0c\u76f4\u63a5\u5b9a\u4e49\u6210 xx.vue\u6587\u4ef6\uff0c\u901a\u8fc7webpack\u6253\u5305\n    Vue.component('navbar', {\n        template: `\n            <div>\n                <button>\u8fd4\u56de<\/button>\n                \u7236\u7ec4\u4ef6\u4f20\u9012\u7684\u5185\u5bb9\u662f:{{myname}}\n                <button>\u4e3b\u9875<\/button>\n                <br>\n            <\/div>\n        `,\n        props:['myname']\n    })\n    var vm = new Vue({\n        el: '#box',\n        data: {},\n\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
\u5c5e\u6027\u9a8c\u8bc1<\/h4>\n
<\/div>
\u67e5\u770b\u66f4\u591a<\/h2>
\u8054\u7cfb\u7ba1\u7406\u5458\u5fae\u4fe1tutu19192010\uff0c\u6ce8\u518c\u8d26\u53f7<\/p>\n<\/div>
<\/div>
<\/td><\/tr>
<\/td><\/tr><\/tbody><\/table>
<\/td><\/tr><\/tbody><\/table><\/form>
Register<\/a><\/div>
Forgotten username or password?<\/a><\/div>
<\/div><\/div><\/div>
<\/div>","protected":false},"excerpt":{"rendered":"
\u7ec4\u4ef6 1 fetch\u548caxios axios\u4e0efetch\u5b9e\u73b0\u6570\u636e\u8bf7\u6c42 (1)fetch\uff08\u4e0d\u662f\u6240\u6709\u6d4f\u89c8\u5668\u90fd\u652f\u6301\uff0c […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,431],"tags":[],"_links":{"self":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/7748"}],"collection":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7748"}],"version-history":[{"count":0,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/7748\/revisions"}],"wp:attachment":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}