{"id":1226,"date":"2023-05-14T17:08:09","date_gmt":"2023-05-14T09:08:09","guid":{"rendered":"https:\/\/blog.viter.top\/?p=1226"},"modified":"2023-05-14T17:08:09","modified_gmt":"2023-05-14T09:08:09","slug":"vue2-%e4%bd%bf%e7%94%a8%e6%8a%80%e5%b7%a7","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2023\/05\/14\/vue2-%e4%bd%bf%e7%94%a8%e6%8a%80%e5%b7%a7\/","title":{"rendered":"vue2 \u4f7f\u7528\u6280\u5de7"},"content":{"rendered":"\n

1.require.context()<\/h2>\n\n\n\n

1.\u573a\u666f:\u5982\u9875\u9762\u9700\u8981\u5bfc\u5165\u591a\u4e2a\u7ec4\u4ef6,\u539f\u59cb\u5199\u6cd5:<\/p>\n\n\n\n

import titleCom from '@\/components\/home\/titleCom'\nimport bannerCom from '@\/components\/home\/bannerCom'\nimport cellCom from '@\/components\/home\/cellCom'\ncomponents:{titleCom,bannerCom,cellCom}<\/code><\/pre>\n\n\n\n
2.\u8fd9\u6837\u5c31\u5199\u4e86\u5927\u91cf\u91cd\u590d\u7684\u4ee3\u7801,\u5229\u7528 require.context \u53ef\u4ee5\u5199\u6210<\/p>\n\n\n\n
const path = require('path')\nconst files = require.context('@\/components\/home', false, \/\\.vue$\/)\nconst modules = {}\nfiles.keys().forEach(key => {\n  const name = path.basename(key, '.vue')\n  modules[name] = files(key).default || files(key)\n})\ncomponents:modules<\/code><\/pre>\n\n\n\n
\u8fd9\u6837\u4e0d\u7ba1\u9875\u9762\u5f15\u5165\u591a\u5c11\u7ec4\u4ef6,\u90fd\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e2a\u65b9\u6cd5<\/p>\n\n\n\n
3.API \u65b9\u6cd5<\/p>\n\n\n\n
\u5b9e\u9645\u4e0a\u662f webpack \u7684\u65b9\u6cd5,vue \u5de5\u7a0b\u4e00\u822c\u57fa\u4e8e webpack,\u6240\u4ee5\u53ef\u4ee5\u4f7f\u7528\nrequire.context(directory,useSubdirectories,regExp)\n\u63a5\u6536\u4e09\u4e2a\u53c2\u6570:\ndirectory\uff1a\u8bf4\u660e\u9700\u8981\u68c0\u7d22\u7684\u76ee\u5f55\nuseSubdirectories\uff1a\u662f\u5426\u68c0\u7d22\u5b50\u76ee\u5f55\nregExp: \u5339\u914d\u6587\u4ef6\u7684\u6b63\u5219\u8868\u8fbe\u5f0f,\u4e00\u822c\u662f\u6587\u4ef6\u540d<\/code><\/pre>\n\n\n\n
2.watch<\/h2>\n\n\n\n
2.1 \u5e38\u7528\u7528\u6cd5<\/h3>\n\n\n\n
1.\u573a\u666f:\u8868\u683c\u521d\u59cb\u8fdb\u6765\u9700\u8981\u8c03\u67e5\u8be2\u63a5\u53e3 getList(),\u7136\u540einput \u6539\u53d8\u4f1a\u91cd\u65b0\u67e5\u8be2<\/p>\n\n\n\n
created(){\n  this.getList()\n},\nwatch: {\n  inpVal(){\n    this.getList()\n  }\n}<\/code><\/pre>\n\n\n\n
2.2 \u7acb\u5373\u6267\u884c<\/h3>\n\n\n\n
2.\u53ef\u4ee5\u76f4\u63a5\u5229\u7528 watch \u7684immediate\u548chandler\u5c5e\u6027\u7b80\u5199<\/p>\n\n\n\n
watch: {\n  inpVal:{\n    handler: 'getList',\n      immediate: true\n  }\n}<\/code><\/pre>\n\n\n\n
2.3 \u6df1\u5ea6\u76d1\u542c<\/h3>\n\n\n\n
3.watch \u7684 deep \u5c5e\u6027,\u6df1\u5ea6\u76d1\u542c,\u4e5f\u5c31\u662f\u76d1\u542c\u590d\u6742\u6570\u636e\u7c7b\u578b<\/p>\n\n\n\n
watch:{\n  inpValObj:{\n    handler(newVal,oldVal){\n      console.log(newVal)\n      console.log(oldVal)\n    },\n    deep:true\n  }\n}<\/code><\/pre>\n\n\n\n
\u6b64\u65f6\u53d1\u73b0oldVal\u548c newVal \u503c\u4e00\u6837;
\u56e0\u4e3a\u5b83\u4eec\u7d22\u5f15\u540c\u4e00\u4e2a\u5bf9\u8c61\/\u6570\u7ec4,Vue \u4e0d\u4f1a\u4fdd\u7559\u4fee\u6539\u4e4b\u524d\u503c\u7684\u526f\u672c;
\u6240\u4ee5\u6df1\u5ea6\u76d1\u542c\u867d\u7136\u53ef\u4ee5\u76d1\u542c\u5230\u5bf9\u8c61\u7684\u53d8\u5316,\u4f46\u662f\u65e0\u6cd5\u76d1\u542c\u5230\u5177\u4f53\u5bf9\u8c61\u91cc\u9762\u90a3\u4e2a\u5c5e\u6027\u7684\u53d8\u5316<\/p>\n\n\n\n
3. 14\u79cd\u7ec4\u4ef6\u901a\u8baf<\/h2>\n\n\n\n
3.1 props<\/h3>\n\n\n\n
\u8fd9\u4e2a\u5e94\u8be5\u975e\u5e38\u5c5e\u6027,\u5c31\u662f\u7236\u4f20\u5b50\u7684\u5c5e\u6027;
props \u503c\u53ef\u4ee5\u662f\u4e00\u4e2a\u6570\u7ec4\u6216\u5bf9\u8c61;<\/p>\n\n\n\n
\/\/ \u6570\u7ec4:\u4e0d\u5efa\u8bae\u4f7f\u7528\nprops:[]\n\n\/\/ \u5bf9\u8c61\nprops:{\n inpVal:{\n  type:Number, \/\/\u4f20\u5165\u503c\u9650\u5b9a\u7c7b\u578b\n  \/\/ type \u503c\u53ef\u4e3aString,Number,Boolean,Array,Object,Date,Function,Symbol\n  \/\/ type \u8fd8\u53ef\u4ee5\u662f\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684\u6784\u9020\u51fd\u6570\uff0c\u5e76\u4e14\u901a\u8fc7 instanceof \u6765\u8fdb\u884c\u68c0\u67e5\u786e\u8ba4\n  required: true, \/\/\u662f\u5426\u5fc5\u4f20\n  default:200,  \/\/\u9ed8\u8ba4\u503c,\u5bf9\u8c61\u6216\u6570\u7ec4\u9ed8\u8ba4\u503c\u5fc5\u987b\u4ece\u4e00\u4e2a\u5de5\u5382\u51fd\u6570\u83b7\u53d6\u5982 default:()=>[]\n  validator:(value) {\n    \/\/ \u8fd9\u4e2a\u503c\u5fc5\u987b\u5339\u914d\u4e0b\u5217\u5b57\u7b26\u4e32\u4e2d\u7684\u4e00\u4e2a\n    return ['success', 'warning', 'danger'].indexOf(value) !== -1\n  }\n }\n}<\/code><\/pre>\n\n\n\n
3.2 $emit<\/h3>\n\n\n\n
\u8fd9\u4e2a\u4e5f\u5e94\u8be5\u975e\u5e38\u5e38\u89c1,\u89e6\u53d1\u5b50\u7ec4\u4ef6\u89e6\u53d1\u7236\u7ec4\u4ef6\u7ed9\u81ea\u5df1\u7ed1\u5b9a\u7684\u4e8b\u4ef6,\u5176\u5b9e\u5c31\u662f\u5b50\u4f20\u7236\u7684\u65b9\u6cd5<\/p>\n\n\n\n
\/\/ \u7236\u7ec4\u4ef6\n<home @title=\"title\">\n\/\/ \u5b50\u7ec4\u4ef6\nthis.$emit('title',[{title:'\u8fd9\u662ftitle'}])<\/code><\/pre>\n\n\n\n
3.3 vuex<\/h3>\n\n\n\n
1.\u8fd9\u4e2a\u4e5f\u662f\u5f88\u5e38\u7528\u7684,vuex \u662f\u4e00\u4e2a\u72b6\u6001\u7ba1\u7406\u5668
2.\u662f\u4e00\u4e2a\u72ec\u7acb\u7684\u63d2\u4ef6,\u9002\u5408\u6570\u636e\u5171\u4eab\u591a\u7684\u9879\u76ee\u91cc\u9762,\u56e0\u4e3a\u5982\u679c\u53ea\u662f\u7b80\u5355\u7684\u901a\u8baf,\u4f7f\u7528\u8d77\u6765\u4f1a\u6bd4\u8f83\u91cd
3.API<\/p>\n\n\n\n
state:\u5b9a\u4e49\u5b58\u8d2e\u6570\u636e\u7684\u4ed3\u5e93 ,\u53ef\u901a\u8fc7this.$store.state \u6216mapState\u8bbf\u95ee\ngetter:\u83b7\u53d6 store \u503c,\u53ef\u8ba4\u4e3a\u662f store \u7684\u8ba1\u7b97\u5c5e\u6027,\u53ef\u901a\u8fc7this.$store.getter \u6216\n       mapGetters\u8bbf\u95ee\nmutation:\u540c\u6b65\u6539\u53d8 store \u503c,\u4e3a\u4ec0\u4e48\u4f1a\u8bbe\u8ba1\u6210\u540c\u6b65,\u56e0\u4e3amutation\u662f\u76f4\u63a5\u6539\u53d8 store \u503c,\n         vue \u5bf9\u64cd\u4f5c\u8fdb\u884c\u4e86\u8bb0\u5f55,\u5982\u679c\u662f\u5f02\u6b65\u65e0\u6cd5\u8ffd\u8e2a\u6539\u53d8.\u53ef\u901a\u8fc7mapMutations\u8c03\u7528\naction:\u5f02\u6b65\u8c03\u7528\u51fd\u6570\u6267\u884cmutation,\u8fdb\u800c\u6539\u53d8 store \u503c,\u53ef\u901a\u8fc7 this.$dispatch\u6216mapActions\n       \u8bbf\u95ee\nmodules:\u6a21\u5757,\u5982\u679c\u72b6\u6001\u8fc7\u591a,\u53ef\u4ee5\u62c6\u5206\u6210\u6a21\u5757,\u6700\u540e\u5728\u5165\u53e3\u901a\u8fc7...\u89e3\u6784\u5f15\u5165<\/code><\/pre>\n\n\n\n
3.4 $attrs\u548c$listeners<\/h3>\n\n\n\n
2.4.0 \u65b0\u589e
\u8fd9\u4e24\u4e2a\u662f\u4e0d\u5e38\u7528\u5c5e\u6027,\u4f46\u662f\u9ad8\u7ea7\u7528\u6cd5\u5f88\u5e38\u89c1;
1.$attrs
\u573a\u666f:\u5982\u679c\u7236\u4f20\u5b50\u6709\u5f88\u591a\u503c,\u90a3\u4e48\u5728\u5b50\u7ec4\u4ef6\u9700\u8981\u5b9a\u4e49\u591a\u4e2a props
\u89e3\u51b3:$attrs\u83b7\u53d6\u5b50\u4f20\u7236\u4e2d\u672a\u5728 props \u5b9a\u4e49\u7684\u503c<\/p>\n\n\n\n
\/\/ \u7236\u7ec4\u4ef6\n<home title=\"\u8fd9\u662f\u6807\u9898\" width=\"80\" height=\"80\" imgUrl=\"imgUrl\"\/>\n\n\/\/ \u5b50\u7ec4\u4ef6\nmounted() {\n  console.log(this.$attrs) \/\/{title: \"\u8fd9\u662f\u6807\u9898\", width: \"80\", height: \"80\", imgUrl: \"imgUrl\"}\n},<\/code><\/pre>\n\n\n\n
\u76f8\u5bf9\u5e94\u7684\u5982\u679c\u5b50\u7ec4\u4ef6\u5b9a\u4e49\u4e86 props,\u6253\u5370\u7684\u503c\u5c31\u662f\u5254\u9664\u5b9a\u4e49\u7684\u5c5e\u6027<\/p>\n\n\n\n
props: {\n  width: {\n    type: String,\n    default: ''\n  }\n},\nmounted() {\n  console.log(this.$attrs) \/\/{title: \"\u8fd9\u662f\u6807\u9898\", height: \"80\", imgUrl: \"imgUrl\"}\n},<\/code><\/pre>\n\n\n\n
2.$listeners
\u573a\u666f:\u5b50\u7ec4\u4ef6\u9700\u8981\u8c03\u7528\u7236\u7ec4\u4ef6\u7684\u65b9\u6cd5
\u89e3\u51b3:\u7236\u7ec4\u4ef6\u7684\u65b9\u6cd5\u53ef\u4ee5\u901a\u8fc7 v-on=\"$listeners\" \u4f20\u5165\u5185\u90e8\u7ec4\u4ef6\u2014\u2014\u5728\u521b\u5efa\u66f4\u9ad8\u5c42\u6b21\u7684\u7ec4\u4ef6\u65f6\u975e\u5e38\u6709\u7528<\/p>\n\n\n\n
\/\/ \u7236\u7ec4\u4ef6\n<home @change=\"change\"\/>\n\n\/\/ \u5b50\u7ec4\u4ef6\nmounted() {\n  console.log(this.$listeners) \/\/\u5373\u53ef\u62ff\u5230 change \u4e8b\u4ef6\n}<\/code><\/pre>\n\n\n\n
\u5982\u679c\u662f\u5b59\u7ec4\u4ef6\u8981\u8bbf\u95ee\u7236\u7ec4\u4ef6\u7684\u5c5e\u6027\u548c\u8c03\u7528\u65b9\u6cd5,\u76f4\u63a5\u4e00\u7ea7\u4e00\u7ea7\u4f20\u4e0b\u53bb\u5c31\u53ef\u4ee5<\/p>\n\n\n\n
3.inheritAttrs<\/p>\n\n\n\n
\/\/ \u7236\u7ec4\u4ef6\n<home title=\"\u8fd9\u662f\u6807\u9898\" width=\"80\" height=\"80\" imgUrl=\"imgUrl\"\/>\n\n\/\/ \u5b50\u7ec4\u4ef6\nmounted() {\n  console.log(this.$attrs) \/\/{title: \"\u8fd9\u662f\u6807\u9898\", width: \"80\", height: \"80\", imgUrl: \"imgUrl\"}\n},\n\ninheritAttrs\u9ed8\u8ba4\u503c\u4e3atrue\uff0ctrue\u7684\u610f\u601d\u662f\u5c06\u7236\u7ec4\u4ef6\u4e2d\u9664\u4e86props\u5916\u7684\u5c5e\u6027\u6dfb\u52a0\u5230\u5b50\u7ec4\u4ef6\u7684\u6839\u8282\u70b9\u4e0a(\u8bf4\u660e\uff0c\u5373\u4f7f\u8bbe\u7f6e\u4e3atrue\uff0c\u5b50\u7ec4\u4ef6\u4ecd\u7136\u53ef\u4ee5\u901a\u8fc7$attr\u83b7\u53d6\u5230props\u610f\u5916\u7684\u5c5e\u6027)\n\u5c06inheritAttrs:false\u540e,\u5c5e\u6027\u5c31\u4e0d\u4f1a\u663e\u793a\u5728\u6839\u8282\u70b9\u4e0a\u4e86<\/code><\/pre>\n\n\n\n
3.5 provide\u548cinject<\/h3>\n\n\n\n
2.2.0 \u65b0\u589e
\u63cf\u8ff0:
provide \u548c inject \u4e3b\u8981\u4e3a\u9ad8\u9636\u63d2\u4ef6\/\u7ec4\u4ef6\u5e93\u63d0\u4f9b\u7528\u4f8b\u3002\u5e76\u4e0d\u63a8\u8350\u76f4\u63a5\u7528\u4e8e\u5e94\u7528\u7a0b\u5e8f\u4ee3\u7801\u4e2d;
\u5e76\u4e14\u8fd9\u5bf9\u9009\u9879\u9700\u8981\u4e00\u8d77\u4f7f\u7528;
\u4ee5\u5141\u8bb8\u4e00\u4e2a\u7956\u5148\u7ec4\u4ef6\u5411\u5176\u6240\u6709\u5b50\u5b59\u540e\u4ee3\u6ce8\u5165\u4e00\u4e2a\u4f9d\u8d56\uff0c\u4e0d\u8bba\u7ec4\u4ef6\u5c42\u6b21\u6709\u591a\u6df1\uff0c\u5e76\u5728\u8d77\u4e0a\u4e0b\u6e38\u5173\u7cfb\u6210\u7acb\u7684\u65f6\u95f4\u91cc\u59cb\u7ec8\u751f\u6548\u3002<\/p>\n\n\n\n
\/\/\u7236\u7ec4\u4ef6:\nprovide: { \/\/provide \u662f\u4e00\u4e2a\u5bf9\u8c61,\u63d0\u4f9b\u4e00\u4e2a\u5c5e\u6027\u6216\u65b9\u6cd5\n  foo: '\u8fd9\u662f foo',\n  fooMethod:()=>{\n    console.log('\u7236\u7ec4\u4ef6 fooMethod \u88ab\u8c03\u7528')\n  }\n},\n\n\/\/ \u5b50\u6216\u8005\u5b59\u5b50\u7ec4\u4ef6\ninject: ['foo','fooMethod'], \/\/\u6570\u7ec4\u6216\u8005\u5bf9\u8c61,\u6ce8\u5165\u5230\u5b50\u7ec4\u4ef6\nmounted() {\n  this.fooMethod()\n  console.log(this.foo)\n}\n\/\/\u5728\u7236\u7ec4\u4ef6\u4e0b\u9762\u6240\u6709\u7684\u5b50\u7ec4\u4ef6\u90fd\u53ef\u4ee5\u5229\u7528inject<\/code><\/pre>\n\n\n\n
provide \u548c inject \u7ed1\u5b9a\u5e76\u4e0d\u662f\u53ef\u54cd\u5e94\u7684\u3002\u8fd9\u662f\u5b98\u65b9\u523b\u610f\u4e3a\u4e4b\u7684\u3002
\u7136\u800c\uff0c\u5982\u679c\u4f60\u4f20\u5165\u4e86\u4e00\u4e2a\u53ef\u76d1\u542c\u7684\u5bf9\u8c61\uff0c\u90a3\u4e48\u5176\u5bf9\u8c61\u7684\u5c5e\u6027\u8fd8\u662f\u53ef\u54cd\u5e94\u7684,\u5bf9\u8c61\u662f\u56e0\u4e3a\u662f\u5f15\u7528\u7c7b\u578b<\/p>\n\n\n\n
\/\/\u7236\u7ec4\u4ef6:\nprovide: { \n  foo: '\u8fd9\u662f foo'\n},\nmounted(){\n  this.foo='\u8fd9\u662f\u65b0\u7684 foo'\n}\n\n\/\/ \u5b50\u6216\u8005\u5b59\u5b50\u7ec4\u4ef6\ninject: ['foo'], \nmounted() {\n  console.log(this.foo) \/\/\u5b50\u7ec4\u4ef6\u6253\u5370\u7684\u8fd8\u662f'\u8fd9\u662f foo'\n}<\/code><\/pre>\n\n\n\n
3.6 $parent\u548c$children<\/h3>\n\n\n\n
$parent:\u7236\u5b9e\u4f8b
$children:\u5b50\u5b9e\u4f8b<\/p>\n\n\n\n
\/\/\u7236\u7ec4\u4ef6\nmounted(){\n  console.log(this.$children) \n  \/\/\u53ef\u4ee5\u62ff\u5230 \u4e00\u7ea7\u5b50\u7ec4\u4ef6\u7684\u5c5e\u6027\u548c\u65b9\u6cd5\n  \/\/\u6240\u4ee5\u5c31\u53ef\u4ee5\u76f4\u63a5\u6539\u53d8 data,\u6216\u8005\u8c03\u7528 methods \u65b9\u6cd5\n}\n\n\/\/\u5b50\u7ec4\u4ef6\nmounted(){\n  console.log(this.$parent) \/\/\u53ef\u4ee5\u62ff\u5230 parent \u7684\u5c5e\u6027\u548c\u65b9\u6cd5\n}<\/code><\/pre>\n\n\n\n
$children\u548c$parent \u5e76\u4e0d\u4fdd\u8bc1\u987a\u5e8f\uff0c\u4e5f\u4e0d\u662f\u54cd\u5e94\u5f0f\u7684
\u53ea\u80fd\u62ff\u5230\u4e00\u7ea7\u7236\u7ec4\u4ef6\u548c\u5b50\u7ec4\u4ef6<\/p>\n\n\n\n
3.7 $refs<\/h3>\n\n\n\n
\/\/ \u7236\u7ec4\u4ef6\n<home ref=\"home\"\/>\n\nmounted(){\n  console.log(this.$refs.home) \/\/\u5373\u53ef\u62ff\u5230\u5b50\u7ec4\u4ef6\u7684\u5b9e\u4f8b,\u5c31\u53ef\u4ee5\u76f4\u63a5\u64cd\u4f5c data \u548c methods\n}<\/code><\/pre>\n\n\n\n
3.8 $root<\/h3>\n\n\n\n
\/\/ \u7236\u7ec4\u4ef6\nmounted(){\n  console.log(this.$root) \/\/\u83b7\u53d6\u6839\u5b9e\u4f8b,\u6700\u540e\u6240\u6709\u7ec4\u4ef6\u90fd\u662f\u6302\u8f7d\u5230\u6839\u5b9e\u4f8b\u4e0a\n  console.log(this.$root.$children[0]) \/\/\u83b7\u53d6\u6839\u5b9e\u4f8b\u7684\u4e00\u7ea7\u5b50\u7ec4\u4ef6\n  console.log(this.$root.$children[0].$children[0]) \/\/\u83b7\u53d6\u6839\u5b9e\u4f8b\u7684\u4e8c\u7ea7\u5b50\u7ec4\u4ef6\n}<\/code><\/pre>\n\n\n\n
3.9 .sync<\/h3>\n\n\n\n
\u5728 vue@1.x \u7684\u65f6\u5019\u66fe\u4f5c\u4e3a\u53cc\u5411\u7ed1\u5b9a\u529f\u80fd\u5b58\u5728\uff0c\u5373\u5b50\u7ec4\u4ef6\u53ef\u4ee5\u4fee\u6539\u7236\u7ec4\u4ef6\u4e2d\u7684\u503c;
\u5728 vue@2.0 \u7684\u7531\u4e8e\u8fdd\u80cc\u5355\u9879\u6570\u636e\u6d41\u7684\u8bbe\u8ba1\u88ab\u5e72\u6389\u4e86;
\u5728 vue@2.3.0+ \u4ee5\u4e0a\u7248\u672c\u53c8\u91cd\u65b0\u5f15\u5165\u4e86\u8fd9\u4e2a .sync \u4fee\u9970\u7b26;<\/p>\n\n\n\n
\/\/ \u7236\u7ec4\u4ef6\n<home :title.sync=\"title\" \/>\n\/\/\u7f16\u8bd1\u65f6\u4f1a\u88ab\u6269\u5c55\u4e3a\n<home :title=\"title\"  @update:title=\"val => title = val\"\/>\n\n\/\/ \u5b50\u7ec4\u4ef6\n\/\/ \u6240\u4ee5\u5b50\u7ec4\u4ef6\u53ef\u4ee5\u901a\u8fc7$emit \u89e6\u53d1 update \u65b9\u6cd5\u6539\u53d8\nmounted(){\n  this.$emit(\"update:title\", '\u8fd9\u662f\u65b0\u7684title')\n}<\/code><\/pre>\n\n\n\n
3.10 v-slot<\/h3>\n\n\n\n
2.6.0 \u65b0\u589e
1.slot,slot-cope,scope \u5728 2.6.0 \u4e2d\u90fd\u88ab\u5e9f\u5f03,\u4f46\u672a\u88ab\u79fb\u9664
2.\u4f5c\u7528\u5c31\u662f\u5c06\u7236\u7ec4\u4ef6\u7684 template \u4f20\u5165\u5b50\u7ec4\u4ef6
3.\u63d2\u69fd\u5206\u7c7b:
A.\u533f\u540d\u63d2\u69fd(\u4e5f\u53eb\u9ed8\u8ba4\u63d2\u69fd): \u6ca1\u6709\u547d\u540d,\u6709\u4e14\u53ea\u6709\u4e00\u4e2a;<\/p>\n\n\n\n
\/\/ \u7236\u7ec4\u4ef6\n<todo-list> \n    <template v-slot:default>\n       \u4efb\u610f\u5185\u5bb9\n       <p>\u6211\u662f\u533f\u540d\u63d2\u69fd <\/p>\n    <\/template>\n<\/todo-list> \n\n\/\/ \u5b50\u7ec4\u4ef6\n<slot>\u6211\u662f\u9ed8\u8ba4\u503c<\/slot>\n\/\/v-slot:default\u5199\u4e0a\u611f\u89c9\u548c\u5177\u540d\u5199\u6cd5\u6bd4\u8f83\u7edf\u4e00,\u5bb9\u6613\u7406\u89e3,\u4e5f\u53ef\u4ee5\u4e0d\u7528\u5199<\/code><\/pre>\n\n\n\n
B.\u5177\u540d\u63d2\u69fd: \u76f8\u5bf9\u533f\u540d\u63d2\u69fd\u7ec4\u4ef6slot\u6807\u7b7e\u5e26name\u547d\u540d\u7684;<\/p>\n\n\n\n
\/\/ \u7236\u7ec4\u4ef6\n<todo-list> \n    <template v-slot:todo>\n       \u4efb\u610f\u5185\u5bb9\n       <p>\u6211\u662f\u533f\u540d\u63d2\u69fd <\/p>\n    <\/template>\n<\/todo-list> \n\n\/\/\u5b50\u7ec4\u4ef6\n<slot name=\"todo\">\u6211\u662f\u9ed8\u8ba4\u503c<\/slot><\/code><\/pre>\n\n\n\n
C.\u4f5c\u7528\u57df\u63d2\u69fd: \u5b50\u7ec4\u4ef6\u5185\u6570\u636e\u53ef\u4ee5\u88ab\u7236\u9875\u9762\u62ff\u5230(\u89e3\u51b3\u4e86\u6570\u636e\u53ea\u80fd\u4ece\u7236\u9875\u9762\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6)<\/p>\n\n\n\n
\/\/ \u7236\u7ec4\u4ef6\n<todo-list>\n <template v-slot:todo=\"slotProps\" >\n   {{slotProps.user.firstName}}\n <\/template> \n<\/todo-list> \n\/\/slotProps \u53ef\u4ee5\u968f\u610f\u547d\u540d\n\/\/slotProps \u63a5\u53d6\u7684\u662f\u5b50\u7ec4\u4ef6\u6807\u7b7eslot\u4e0a\u5c5e\u6027\u6570\u636e\u7684\u96c6\u5408\u6240\u6709v-bind:user=\"user\"\n\n\/\/ \u5b50\u7ec4\u4ef6\n<slot name=\"todo\" :user=\"user\" :test=\"test\">\n    {{ user.lastName }}\n <\/slot> \ndata() {\n    return {\n      user:{\n        lastName:\"Zhang\",\n        firstName:\"yue\"\n      },\n      test:[1,2,3,4]\n    }\n  },\n\/\/ {{ user.lastName }}\u662f\u9ed8\u8ba4\u6570\u636e  v-slot:todo \u5f53\u7236\u9875\u9762\u6ca1\u6709(=\"slotProps\")<\/code><\/pre>\n\n\n\n
3.11 EventBus<\/h3>\n\n\n\n
1.\u5c31\u662f\u58f0\u660e\u4e00\u4e2a\u5168\u5c40Vue\u5b9e\u4f8b\u53d8\u91cf EventBus , \u628a\u6240\u6709\u7684\u901a\u4fe1\u6570\u636e\uff0c\u4e8b\u4ef6\u76d1\u542c\u90fd\u5b58\u50a8\u5230\u8fd9\u4e2a\u53d8\u91cf\u4e0a;
2.\u7c7b\u4f3c\u4e8e Vuex\u3002\u4f46\u8fd9\u79cd\u65b9\u5f0f\u53ea\u9002\u7528\u4e8e\u6781\u5c0f\u7684\u9879\u76ee
3.\u539f\u7406\u5c31\u662f\u5229\u7528$on\u548c$emit \u5e76\u5b9e\u4f8b\u5316\u4e00\u4e2a\u5168\u5c40 vue \u5b9e\u73b0\u6570\u636e\u5171\u4eab<\/p>\n\n\n\n
\/\/ \u5728 main.js\nVue.prototype.$eventBus=new Vue()\n\n\/\/ \u4f20\u503c\u7ec4\u4ef6\nthis.$eventBus.$emit('eventTarget','\u8fd9\u662feventTarget\u4f20\u8fc7\u6765\u7684\u503c')\n\n\/\/ \u63a5\u6536\u7ec4\u4ef6\nthis.$eventBus.$on(\"eventTarget\",v=>{\n  console.log('eventTarget',v);\/\/\u8fd9\u662feventTarget\u4f20\u8fc7\u6765\u7684\u503c\n})<\/code><\/pre>\n\n\n\n
4.\u53ef\u4ee5\u5b9e\u73b0\u5e73\u7ea7,\u5d4c\u5957\u7ec4\u4ef6\u4f20\u503c,\u4f46\u662f\u5bf9\u5e94\u7684\u4e8b\u4ef6\u540deventTarget\u5fc5\u987b\u662f\u5168\u5c40\u552f\u4e00\u7684<\/p>\n\n\n\n
3.12 broadcast\u548cdispatch<\/h3>\n\n\n\n
vue 1.x \u6709\u8fd9\u4e24\u4e2a\u65b9\u6cd5,\u4e8b\u4ef6\u5e7f\u64ad\u548c\u6d3e\u53d1,\u4f46\u662f vue 2.x \u5220\u9664\u4e86
\u4e0b\u9762\u662f\u5bf9\u4e24\u4e2a\u65b9\u6cd5\u8fdb\u884c\u7684\u5c01\u88c5<\/p>\n\n\n\n
function broadcast(componentName, eventName, params) {\n  this.$children.forEach(child => {\n    var name = child.$options.componentName;\n\n    if (name === componentName) {\n      child.$emit.apply(child, [eventName].concat(params));\n    } else {\n      broadcast.apply(child, [componentName, eventName].concat(params));\n    }\n  });\n}\nexport default {\n  methods: {\n    dispatch(componentName, eventName, params) {\n      var parent = this.$parent;\n      var name = parent.$options.componentName;\n      while (parent && (!name || name !== componentName)) {\n        parent = parent.$parent;\n\n        if (parent) {\n          name = parent.$options.componentName;\n        }\n      }\n      if (parent) {\n        parent.$emit.apply(parent, [eventName].concat(params));\n      }\n    },\n    broadcast(componentName, eventName, params) {\n      broadcast.call(this, componentName, eventName, params);\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
3.13 \u8def\u7531\u4f20\u53c2<\/h3>\n\n\n\n
1.\u65b9\u6848\u4e00<\/p>\n\n\n\n
\/\/ \u8def\u7531\u5b9a\u4e49\n{\n  path: '\/describe\/:id',\n  name: 'Describe',\n  component: Describe\n}\n\/\/ \u9875\u9762\u4f20\u53c2\nthis.$router.push({\n  path: `\/describe\/${id}`,\n})\n\/\/ \u9875\u9762\u83b7\u53d6\nthis.$route.params.id<\/code><\/pre>\n\n\n\n
2.\u65b9\u6848\u4e8c<\/p>\n\n\n\n
\/\/ \u8def\u7531\u5b9a\u4e49\n{\n  path: '\/describe',\n  name: 'Describe',\n  omponent: Describe\n}\n\/\/ \u9875\u9762\u4f20\u53c2\nthis.$router.push({\n  name: 'Describe',\n  params: {\n    id: id\n  }\n})\n\/\/ \u9875\u9762\u83b7\u53d6\nthis.$route.params.id<\/code><\/pre>\n\n\n\n
3.\u65b9\u6848\u4e09<\/p>\n\n\n\n
\/\/ \u8def\u7531\u5b9a\u4e49\n{\n  path: '\/describe',\n  name: 'Describe',\n  component: Describe\n}\n\/\/ \u9875\u9762\u4f20\u53c2\nthis.$router.push({\n  path: '\/describe',\n    query: {\n      id: id\n  `}\n)\n\/\/ \u9875\u9762\u83b7\u53d6\nthis.$route.query.id<\/code><\/pre>\n\n\n\n
4.\u4e09\u79cd\u65b9\u6848\u5bf9\u6bd4
\u65b9\u6848\u4e8c\u53c2\u6570\u4e0d\u4f1a\u62fc\u63a5\u5728\u8def\u7531\u540e\u9762,\u9875\u9762\u5237\u65b0\u53c2\u6570\u4f1a\u4e22\u5931
\u65b9\u6848\u4e00\u548c\u4e09\u53c2\u6570\u62fc\u63a5\u5728\u540e\u9762,\u4e11,\u800c\u4e14\u66b4\u9732\u4e86\u4fe1\u606f<\/p>\n\n\n\n
3.14 Vue.observable<\/h3>\n\n\n\n
2.6.0 \u65b0\u589e
\u7528\u6cd5:\u8ba9\u4e00\u4e2a\u5bf9\u8c61\u53ef\u54cd\u5e94\u3002Vue \u5185\u90e8\u4f1a\u7528\u5b83\u6765\u5904\u7406 data \u51fd\u6570\u8fd4\u56de\u7684\u5bf9\u8c61;<\/p>\n\n\n\n
\u8fd4\u56de\u7684\u5bf9\u8c61\u53ef\u4ee5\u76f4\u63a5\u7528\u4e8e\u6e32\u67d3\u51fd\u6570\u548c\u8ba1\u7b97\u5c5e\u6027\u5185\uff0c\u5e76\u4e14\u4f1a\u5728\u53d1\u751f\u6539\u53d8\u65f6\u89e6\u53d1\u76f8\u5e94\u7684\u66f4\u65b0;\n\u4e5f\u53ef\u4ee5\u4f5c\u4e3a\u6700\u5c0f\u5316\u7684\u8de8\u7ec4\u4ef6\u72b6\u6001\u5b58\u50a8\u5668\uff0c\u7528\u4e8e\u7b80\u5355\u7684\u573a\u666f\u3002<\/code><\/pre>\n\n\n\n
\u901a\u8baf\u539f\u7406\u5b9e\u8d28\u4e0a\u662f\u5229\u7528Vue.observable\u5b9e\u73b0\u4e00\u4e2a\u7b80\u6613\u7684 vuex<\/p>\n\n\n\n
\/\/ \u6587\u4ef6\u8def\u5f84 - \/store\/store.js\nimport Vue from 'vue'\n\nexport const store = Vue.observable({ count: 0 })\nexport const mutations = {\n  setCount (count) {\n    store.count = count\n  }\n}\n\n\/\/\u4f7f\u7528\n<template>\n    <div>\n        <label for=\"bookNum\">\u6570 \u91cf<\/label>\n            <button @click=\"setCount(count+1)\">+<\/button>\n            <span>{{count}}<\/span>\n            <button @click=\"setCount(count-1)\">-<\/button>\n    <\/div>\n<\/template>\n\n<script>\nimport { store, mutations } from '..\/store\/store' \/\/ Vue2.6\u65b0\u589eAPI Observable\n\nexport default {\n  name: 'Add',\n  computed: {\n    count () {\n      return store.count\n    }\n  },\n  methods: {\n    setCount: mutations.setCount\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
4.render \u51fd\u6570<\/h2>\n\n\n\n
1.\u573a\u666f:\u6709\u4e9b\u4ee3\u7801\u5728 template \u91cc\u9762\u5199\u4f1a\u91cd\u590d\u5f88\u591a,\u6240\u4ee5\u8fd9\u4e2a\u65f6\u5019 render \u51fd\u6570\u5c31\u6709\u4f5c\u7528\u5566<\/p>\n\n\n\n
\/\/ \u6839\u636e props \u751f\u6210\u6807\u7b7e\n\/\/ \u521d\u7ea7\n<template>\n  <div>\n    <div v-if=\"level === 1\"> <slot><\/slot> <\/div>\n    <p v-else-if=\"level === 2\"> <slot><\/slot> <\/p>\n    <h1 v-else-if=\"level === 3\"> <slot><\/slot> <\/h1>\n    <h2 v-else-if=\"level === 4\"> <slot><\/slot> <\/h2>\n    <strong v-else-if=\"level === 5\"> <slot><\/slot> <\/stong>\n    <textarea v-else-if=\"level === 6\"> <slot><\/slot> <\/textarea>\n  <\/div>\n<\/template>\n\n\/\/ \u4f18\u5316\u7248,\u5229\u7528 render \u51fd\u6570\u51cf\u5c0f\u4e86\u4ee3\u7801\u91cd\u590d\u7387\n<template>\n  <div>\n    <child :level=\"level\">Hello world!<\/child>\n  <\/div>\n<\/template>\n\n<script type='text\/javascript'>\n  import Vue from 'vue'\n  Vue.component('child', {\n    render(h) {\n      const tag = ['div', 'p', 'strong', 'h1', 'h2', 'textarea'][this.level-1]\n      return h(tag, this.$slots.default)\n    },\n    props: {\n      level: {  type: Number,  required: true  } \n    }\n  })   \n  export default {\n    name: 'hehe',\n    data() { return { level: 3 } }\n  }\n<\/script>\n<\/code><\/pre>\n\n\n\n
2.render \u548c template \u7684\u5bf9\u6bd4
\u524d\u8005\u9002\u5408\u590d\u6742\u903b\u8f91,\u540e\u8005\u9002\u5408\u903b\u8f91\u7b80\u5355;
\u540e\u8005\u5c5e\u4e8e\u58f0\u660e\u662f\u6e32\u67d3\uff0c\u524d\u8005\u5c5e\u4e8e\u81ea\u5b9aRender\u51fd\u6570;
\u524d\u8005\u7684\u6027\u80fd\u8f83\u9ad8\uff0c\u540e\u8005\u6027\u80fd\u8f83\u4f4e\u3002<\/p>\n\n\n\n
5.\u5f02\u6b65\u7ec4\u4ef6<\/h2>\n\n\n\n
\u573a\u666f:\u9879\u76ee\u8fc7\u5927\u5c31\u4f1a\u5bfc\u81f4\u52a0\u8f7d\u7f13\u6162,\u6240\u4ee5\u5f02\u6b65\u7ec4\u4ef6\u5b9e\u73b0\u6309\u9700\u52a0\u8f7d\u5c31\u662f\u5fc5\u987b\u8981\u505a\u7684\u4e8b\u5566
1.\u5f02\u6b65\u6ce8\u518c\u7ec4\u4ef6
3\u79cd\u65b9\u6cd5<\/p>\n\n\n\n
\/\/ \u5de5\u5382\u51fd\u6570\u6267\u884c resolve \u56de\u8c03\nVue.component('async-webpack-example', function (resolve) {\n  \/\/ \u8fd9\u4e2a\u7279\u6b8a\u7684 `require` \u8bed\u6cd5\u5c06\u4f1a\u544a\u8bc9 webpack\n  \/\/ \u81ea\u52a8\u5c06\u4f60\u7684\u6784\u5efa\u4ee3\u7801\u5207\u5272\u6210\u591a\u4e2a\u5305, \u8fd9\u4e9b\u5305\n  \/\/ \u4f1a\u901a\u8fc7 Ajax \u8bf7\u6c42\u52a0\u8f7d\n  require(['.\/my-async-component'], resolve)\n})\n\n\/\/ \u5de5\u5382\u51fd\u6570\u8fd4\u56de Promise\nVue.component(\n  'async-webpack-example',\n  \/\/ \u8fd9\u4e2a `import` \u51fd\u6570\u4f1a\u8fd4\u56de\u4e00\u4e2a `Promise` \u5bf9\u8c61\u3002\n  () => import('.\/my-async-component')\n)\n\n\/\/ \u5de5\u5382\u51fd\u6570\u8fd4\u56de\u4e00\u4e2a\u914d\u7f6e\u5316\u7ec4\u4ef6\u5bf9\u8c61\nconst AsyncComponent = () => ({\n  \/\/ \u9700\u8981\u52a0\u8f7d\u7684\u7ec4\u4ef6 (\u5e94\u8be5\u662f\u4e00\u4e2a `Promise` \u5bf9\u8c61)\n  component: import('.\/MyComponent.vue'),\n  \/\/ \u5f02\u6b65\u7ec4\u4ef6\u52a0\u8f7d\u65f6\u4f7f\u7528\u7684\u7ec4\u4ef6\n  loading: LoadingComponent,\n  \/\/ \u52a0\u8f7d\u5931\u8d25\u65f6\u4f7f\u7528\u7684\u7ec4\u4ef6\n  error: ErrorComponent,\n  \/\/ \u5c55\u793a\u52a0\u8f7d\u65f6\u7ec4\u4ef6\u7684\u5ef6\u65f6\u65f6\u95f4\u3002\u9ed8\u8ba4\u503c\u662f 200 (\u6beb\u79d2)\n  delay: 200,\n  \/\/ \u5982\u679c\u63d0\u4f9b\u4e86\u8d85\u65f6\u65f6\u95f4\u4e14\u7ec4\u4ef6\u52a0\u8f7d\u4e5f\u8d85\u65f6\u4e86\uff0c\n  \/\/ \u5219\u4f7f\u7528\u52a0\u8f7d\u5931\u8d25\u65f6\u4f7f\u7528\u7684\u7ec4\u4ef6\u3002\u9ed8\u8ba4\u503c\u662f\uff1a`Infinity`\n  timeout: 3000\n})<\/code><\/pre>\n\n\n\n
\u5f02\u6b65\u7ec4\u4ef6\u7684\u6e32\u67d3\u672c\u8d28\u4e0a\u5176\u5b9e\u5c31\u662f\u6267\u884c2\u6b21\u6216\u80052\u6b21\u4ee5\u4e0a\u7684\u6e32\u67d3, \u5148\u628a\u5f53\u524d\u7ec4\u4ef6\u6e32\u67d3\u4e3a\u6ce8\u91ca\u8282\u70b9, \u5f53\u7ec4\u4ef6\u52a0\u8f7d\u6210\u529f\u540e, \u901a\u8fc7 forceRender \u6267\u884c\u91cd\u65b0\u6e32\u67d3\u3002\u6216\u8005\u662f\u6e32\u67d3\u4e3a\u6ce8\u91ca\u8282\u70b9, \u7136\u540e\u518d\u6e32\u67d3\u4e3aloading\u8282\u70b9, \u5728\u6e32\u67d3\u4e3a\u8bf7\u6c42\u5b8c\u6210\u7684\u7ec4\u4ef6<\/p>\n\n\n\n
2.\u8def\u7531\u7684\u6309\u9700\u52a0\u8f7d<\/p>\n\n\n\n
webpack< 2.4 \u65f6\n{\n  path:'\/',\n  name:'home',\n  components:resolve=>require(['@\/components\/home'],resolve)\n}\n\nwebpack> 2.4 \u65f6\n{\n  path:'\/',\n  name:'home',\n  components:()=>import('@\/components\/home')\n}\n\nimport()\u65b9\u6cd5\u7531es6\u63d0\u51fa\uff0cimport()\u65b9\u6cd5\u662f\u52a8\u6001\u52a0\u8f7d\uff0c\u8fd4\u56de\u4e00\u4e2aPromise\u5bf9\u8c61\uff0cthen\u65b9\u6cd5\u7684\u53c2\u6570\u662f\u52a0\u8f7d\u5230\u7684\u6a21\u5757\u3002\u7c7b\u4f3c\u4e8eNode.js\u7684require\u65b9\u6cd5\uff0c\u4e3b\u8981import()\u65b9\u6cd5\u662f\u5f02\u6b65\u52a0\u8f7d\u7684\u3002<\/code><\/pre>\n\n\n\n
6.\u52a8\u6001\u7ec4\u4ef6<\/h2>\n\n\n\n
\u573a\u666f:\u505a\u4e00\u4e2a tab \u5207\u6362\u65f6\u5c31\u4f1a\u6d89\u53ca\u5230\u7ec4\u4ef6\u52a8\u6001\u52a0\u8f7d<\/p>\n\n\n\n
<component v-bind:is=\"currentTabComponent\"><\/component><\/code><\/pre>\n\n\n\n
\u4f46\u662f\u8fd9\u6837\u6bcf\u6b21\u7ec4\u4ef6\u90fd\u4f1a\u91cd\u65b0\u52a0\u8f7d,\u4f1a\u6d88\u8017\u5927\u91cf\u6027\u80fd,\u6240\u4ee5<keep-alive> \u5c31\u8d77\u5230\u4e86\u4f5c\u7528<\/p>\n\n\n\n
<keep-alive>\n  <component v-bind:is=\"currentTabComponent\"><\/component>\n<\/keep-alive><\/code><\/pre>\n\n\n\n
\u8fd9\u6837\u5207\u6362\u6548\u679c\u6ca1\u6709\u52a8\u753b\u6548\u679c,\u8fd9\u4e2a\u4e5f\u4e0d\u7528\u7740\u6025,\u53ef\u4ee5\u5229\u7528\u5185\u7f6e\u7684<transition><\/p>\n\n\n\n
<transition>\n<keep-alive>\n  <component v-bind:is=\"currentTabComponent\"><\/component>\n<\/keep-alive>\n<\/transition><\/code><\/pre>\n\n\n\n
7.\u9012\u5f52\u7ec4\u4ef6<\/h2>\n\n\n\n
\u573a\u666f:\u5982\u679c\u5f00\u53d1\u4e00\u4e2a tree \u7ec4\u4ef6,\u91cc\u9762\u5c42\u7ea7\u662f\u6839\u636e\u540e\u53f0\u6570\u636e\u51b3\u5b9a\u7684,\u8fd9\u4e2a\u65f6\u5019\u5c31\u9700\u8981\u7528\u5230\u52a8\u6001\u7ec4\u4ef6<\/p>\n\n\n\n
\/\/ \u9012\u5f52\u7ec4\u4ef6: \u7ec4\u4ef6\u5728\u5b83\u7684\u6a21\u677f\u5185\u53ef\u4ee5\u9012\u5f52\u7684\u8c03\u7528\u81ea\u5df1\uff0c\u53ea\u8981\u7ed9\u7ec4\u4ef6\u8bbe\u7f6ename\u7ec4\u4ef6\u5c31\u53ef\u4ee5\u4e86\u3002\n\/\/ \u8bbe\u7f6e\u90a3\u4e48House\u5728\u7ec4\u4ef6\u6a21\u677f\u5185\u5c31\u53ef\u4ee5\u9012\u5f52\u4f7f\u7528\u4e86,\u4e0d\u8fc7\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\n\/\/ \u5fc5\u987b\u7ed9\u4e00\u4e2a\u6761\u4ef6\u6765\u9650\u5236\u6570\u91cf\uff0c\u5426\u5219\u4f1a\u629b\u51fa\u9519\u8bef: max stack size exceeded\n\/\/ \u7ec4\u4ef6\u9012\u5f52\u7528\u6765\u5f00\u53d1\u4e00\u4e9b\u5177\u4f53\u6709\u672a\u77e5\u5c42\u7ea7\u5173\u7cfb\u7684\u72ec\u7acb\u7ec4\u4ef6\u3002\u6bd4\u5982\uff1a\n\/\/ \u8054\u7ea7\u9009\u62e9\u5668\u548c\u6811\u5f62\u63a7\u4ef6 \n\n<template>\n  <div v-for=\"(item,index) in treeArr\">\n      \u5b50\u7ec4\u4ef6\uff0c\u5f53\u524d\u5c42\u7ea7\u503c\uff1a {{index}} <br\/>\n      <!-- \u9012\u5f52\u8c03\u7528\u81ea\u8eab, \u540e\u53f0\u5224\u65ad\u662f\u5426\u4e0d\u5b58\u5728\u6539\u503c -->\n      <tree :item=\"item.arr\" v-if=\"item.flag\"><\/tree>\n  <\/div>\n<\/template>\n<script>\nexport default {\n  \/\/ \u5fc5\u987b\u5b9a\u4e49name\uff0c\u7ec4\u4ef6\u5185\u90e8\u624d\u80fd\u9012\u5f52\u8c03\u7528\n  name: 'tree',\n  data(){\n    return {}\n  },\n  \/\/ \u63a5\u6536\u5916\u90e8\u4f20\u5165\u7684\u503c\n  props: {\n     item: {\n      type:Array,\n      default: ()=>[]\n    }\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
\u9012\u5f52\u7ec4\u4ef6\u5fc5\u987b\u8bbe\u7f6ename \u548c\u7ed3\u675f\u7684\u9600\u503c<\/p>\n\n\n\n
8.\u51fd\u6570\u5f0f\u7ec4\u4ef6<\/h2>\n\n\n\n
\u5b9a\u4e49:\u65e0\u72b6\u6001,\u65e0\u6cd5\u5b9e\u4f8b\u5316\uff0c\u5185\u90e8\u6ca1\u6709\u4efb\u4f55\u751f\u547d\u5468\u671f\u5904\u7406\u65b9\u6cd5
\u89c4\u5219:\u5728 2.3.0 \u4e4b\u524d\u7684\u7248\u672c\u4e2d\uff0c\u5982\u679c\u4e00\u4e2a\u51fd\u6570\u5f0f\u7ec4\u4ef6\u60f3\u8981\u63a5\u6536 prop\uff0c\u5219 props \u9009\u9879\u662f\u5fc5\u987b\u7684\u3002<\/p>\n\n\n\n
\u5728 2.3.0 \u6216\u4ee5\u4e0a\u7684\u7248\u672c\u4e2d\uff0c\u4f60\u53ef\u4ee5\u7701\u7565 props \u9009\u9879\uff0c\u6240\u6709\u7ec4\u4ef6\u4e0a\u7684\u7279\u6027\u90fd\u4f1a\u88ab\u81ea\u52a8\u9690\u5f0f\u89e3\u6790\u4e3a prop\n\u5728 2.5.0 \u53ca\u4ee5\u4e0a\u7248\u672c\u4e2d\uff0c\u5982\u679c\u4f60\u4f7f\u7528\u4e86\u5355\u6587\u4ef6\u7ec4\u4ef6(\u5c31\u662f\u666e\u901a\u7684.vue \u6587\u4ef6),\u53ef\u4ee5\u76f4\u63a5\u5728 template \u4e0a\u58f0\u660efunctional\n\u7ec4\u4ef6\u9700\u8981\u7684\u4e00\u5207\u90fd\u662f\u901a\u8fc7 context \u53c2\u6570\u4f20\u9012\n<\/code><\/pre>\n\n\n\n
context \u5c5e\u6027\u6709:
1.props\uff1a\u63d0\u4f9b\u6240\u6709 prop \u7684\u5bf9\u8c61
2.children: VNode \u5b50\u8282\u70b9\u7684\u6570\u7ec4
3.slots: \u4e00\u4e2a\u51fd\u6570\uff0c\u8fd4\u56de\u4e86\u5305\u542b\u6240\u6709\u63d2\u69fd\u7684\u5bf9\u8c61
4.scopedSlots: (2.6.0+) \u4e00\u4e2a\u66b4\u9732\u4f20\u5165\u7684\u4f5c\u7528\u57df\u63d2\u69fd\u7684\u5bf9\u8c61\u3002\u4e5f\u4ee5\u51fd\u6570\u5f62\u5f0f\u66b4\u9732\u666e\u901a\u63d2\u69fd\u3002
5.data\uff1a\u4f20\u9012\u7ed9\u7ec4\u4ef6\u7684\u6574\u4e2a\u6570\u636e\u5bf9\u8c61\uff0c\u4f5c\u4e3a createElement \u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\u4f20\u5165\u7ec4\u4ef6
6.parent\uff1a\u5bf9\u7236\u7ec4\u4ef6\u7684\u5f15\u7528
7.listeners: (2.3.0+) \u4e00\u4e2a\u5305\u542b\u4e86\u6240\u6709\u7236\u7ec4\u4ef6\u4e3a\u5f53\u524d\u7ec4\u4ef6\u6ce8\u518c\u7684\u4e8b\u4ef6\u76d1\u542c\u5668\u7684\u5bf9\u8c61\u3002\u8fd9\u662f data.on \u7684\u4e00\u4e2a\u522b\u540d\u3002
8.injections: (2.3.0+) \u5982\u679c\u4f7f\u7528\u4e86 inject \u9009\u9879\uff0c\u5219\u8be5\u5bf9\u8c61\u5305\u542b\u4e86\u5e94\u5f53\u88ab\u6ce8\u5165\u7684\u5c5e\u6027<\/p>\n\n\n\n
<template functional>\n  <div v-for=\"(item,index) in props.arr\">{{item}}<\/div>\n<\/template><\/code><\/pre>\n\n\n\n
9.components\u548c Vue.component<\/h2>\n\n\n\n
components:\u5c40\u90e8\u6ce8\u518c\u7ec4\u4ef6<\/p>\n\n\n\n
export default{\n  components:{home}\n}<\/code><\/pre>\n\n\n\n
Vue.component:\u5168\u5c40\u6ce8\u518c\u7ec4\u4ef6<\/p>\n\n\n\n
Vue.component('home',home)<\/code><\/pre>\n\n\n\n
10.Vue.extend<\/h2>\n\n\n\n
\u573a\u666f:vue \u7ec4\u4ef6\u4e2d\u6709\u4e9b\u9700\u8981\u5c06\u4e00\u4e9b\u5143\u7d20\u6302\u8f7d\u5230\u5143\u7d20\u4e0a,\u8fd9\u4e2a\u65f6\u5019 extend \u5c31\u8d77\u5230\u4f5c\u7528\u4e86
\u662f\u6784\u9020\u4e00\u4e2a\u7ec4\u4ef6\u7684\u8bed\u6cd5\u5668
\u5199\u6cd5:<\/p>\n\n\n\n
\/\/ \u521b\u5efa\u6784\u9020\u5668\nvar Profile = Vue.extend({\n  template: '<p>{{extendData}}<\/br>\u5b9e\u4f8b\u4f20\u5165\u7684\u6570\u636e\u4e3a:{{propsExtend}}<\/p>',\/\/template\u5bf9\u5e94\u7684\u6807\u7b7e\u6700\u5916\u5c42\u5fc5\u987b\u53ea\u6709\u4e00\u4e2a\u6807\u7b7e\n  data: function () {\n    return {\n      extendData: '\u8fd9\u662fextend\u6269\u5c55\u7684\u6570\u636e',\n    }\n  },\n  props:['propsExtend']\n})\n\n\/\/ \u521b\u5efa\u7684\u6784\u9020\u5668\u53ef\u4ee5\u6302\u8f7d\u5230\u5143\u7d20\u4e0a,\u4e5f\u53ef\u4ee5\u901a\u8fc7 components \u6216 Vue.component()\u6ce8\u518c\u4f7f\u7528\n\/\/ \u6302\u8f7d\u5230\u4e00\u4e2a\u5143\u7d20\u4e0a\u3002\u53ef\u4ee5\u901a\u8fc7propsData\u4f20\u53c2.\nnew Profile({propsData:{propsExtend:'\u6211\u662f\u5b9e\u4f8b\u4f20\u5165\u7684\u6570\u636e'}}).$mount('#app-extend')\n\n\/\/ \u901a\u8fc7 components \u6216 Vue.component()\u6ce8\u518c\nVue.component('Profile',Profile)<\/code><\/pre>\n\n\n\n
11.mixins<\/h2>\n\n\n\n
\u573a\u666f:\u6709\u4e9b\u7ec4\u4ef6\u6709\u4e9b\u91cd\u590d\u7684 js \u903b\u8f91,\u5982\u6821\u9a8c\u624b\u673a\u9a8c\u8bc1\u7801,\u89e3\u6790\u65f6\u95f4\u7b49,mixins \u5c31\u53ef\u4ee5\u5b9e\u73b0\u8fd9\u79cd\u6df7\u5165
mixins \u503c\u662f\u4e00\u4e2a\u6570\u7ec4<\/p>\n\n\n\n
const mixin={\n    created(){\n      this.dealTime()\n    },\n    methods:{\n      dealTime(){\n        console.log('\u8fd9\u662fmixin\u7684dealTime\u91cc\u9762\u7684\u65b9\u6cd5');\n      }\n  }\n}\n\nexport default{\n  mixins:[mixin]\n}<\/code><\/pre>\n\n\n\n
12.extends<\/h2>\n\n\n\n
extends\u7528\u6cd5\u548cmixins\u5f88\u76f8\u4f3c,\u53ea\u4e0d\u8fc7\u63a5\u6536\u7684\u53c2\u6570\u662f\u7b80\u5355\u7684\u9009\u9879\u5bf9\u8c61\u6216\u6784\u9020\u51fd\u6570,\u6240\u4ee5extends\u53ea\u80fd\u5355\u6b21\u6269\u5c55\u4e00\u4e2a\u7ec4\u4ef6<\/p>\n\n\n\n
const extend={\n    created(){\n      this.dealTime()\n    },\n    methods:{\n      dealTime(){\n        console.log('\u8fd9\u662fmixin\u7684dealTime\u91cc\u9762\u7684\u65b9\u6cd5');\n      }\n  }\n}\n\nexport default{\n  extends:extend\n}<\/code><\/pre>\n\n\n\n
13.Vue.use()<\/h2>\n\n\n\n
\u573a\u666f:\u6211\u4eec\u4f7f\u7528 element\u65f6\u4f1a\u5148 import,\u518d Vue.use()\u4e00\u4e0b,\u5b9e\u9645\u4e0a\u5c31\u662f\u6ce8\u518c\u7ec4\u4ef6,\u89e6\u53d1 install \u65b9\u6cd5;
\u8fd9\u4e2a\u5728\u7ec4\u4ef6\u8c03\u7528\u4f1a\u7ecf\u5e38\u4f7f\u7528\u5230;
\u4f1a\u81ea\u52a8\u7ec4\u7ec7\u591a\u6b21\u6ce8\u518c\u76f8\u540c\u7684\u63d2\u4ef6.<\/p>\n\n\n\n
14.install<\/h2>\n\n\n\n
\u573a\u666f:\u5728 Vue.use()\u8bf4\u5230,\u6267\u884c\u8be5\u65b9\u6cd5\u4f1a\u89e6\u53d1 install
\u662f\u5f00\u53d1vue\u7684\u63d2\u4ef6,\u8fd9\u4e2a\u65b9\u6cd5\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f Vue \u6784\u9020\u5668\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u4e00\u4e2a\u53ef\u9009\u7684\u9009\u9879\u5bf9\u8c61(\u53ef\u9009)<\/p>\n\n\n\n
var MyPlugin = {};\n  MyPlugin.install = function (Vue, options) {\n    \/\/ 2. \u6dfb\u52a0\u5168\u5c40\u8d44\u6e90,\u7b2c\u4e8c\u4e2a\u53c2\u6570\u4f20\u4e00\u4e2a\u503c\u9ed8\u8ba4\u662fupdate\u5bf9\u5e94\u7684\u503c\n    Vue.directive('click', {\n      bind(el, binding, vnode, oldVnode) {\n        \/\/\u505a\u7ed1\u5b9a\u7684\u51c6\u5907\u5de5\u4f5c,\u6dfb\u52a0\u65f6\u95f4\u76d1\u542c\n        console.log('\u6307\u4ee4my-directive\u7684bind\u6267\u884c\u5566');\n      },\n      inserted: function(el){\n      \/\/\u83b7\u53d6\u7ed1\u5b9a\u7684\u5143\u7d20\n      console.log('\u6307\u4ee4my-directive\u7684inserted\u6267\u884c\u5566');\n      },\n      update: function(){\n      \/\/\u6839\u636e\u83b7\u5f97\u7684\u65b0\u503c\u6267\u884c\u5bf9\u5e94\u7684\u66f4\u65b0\n      \/\/\u5bf9\u4e8e\u521d\u59cb\u503c\u4e5f\u4f1a\u8c03\u7528\u4e00\u6b21\n      console.log('\u6307\u4ee4my-directive\u7684update\u6267\u884c\u5566');\n      },\n      componentUpdated: function(){\n      console.log('\u6307\u4ee4my-directive\u7684componentUpdated\u6267\u884c\u5566');\n      },\n      unbind: function(){\n      \/\/\u505a\u6e05\u7406\u64cd\u4f5c\n      \/\/\u6bd4\u5982\u79fb\u9664bind\u65f6\u7ed1\u5b9a\u7684\u4e8b\u4ef6\u76d1\u542c\u5668\n      console.log('\u6307\u4ee4my-directive\u7684unbind\u6267\u884c\u5566');\n      }\n    })\n\n    \/\/ 3. \u6ce8\u5165\u7ec4\u4ef6\n    Vue.mixin({\n      created: function () {\n        console.log('\u6ce8\u5165\u7ec4\u4ef6\u7684created\u88ab\u8c03\u7528\u5566');\n        console.log('options\u7684\u503c\u4e3a',options)\n      }\n    })\n\n    \/\/ 4. \u6dfb\u52a0\u5b9e\u4f8b\u65b9\u6cd5\n    Vue.prototype.$myMethod = function (methodOptions) {\n      console.log('\u5b9e\u4f8b\u65b9\u6cd5myMethod\u88ab\u8c03\u7528\u5566');\n    }\n  }\n\n  \/\/\u8c03\u7528MyPlugin\n  Vue.use(MyPlugin,{someOption: true })\n\n  \/\/3.\u6302\u8f7d\n  new Vue({\n    el: '#app'\n  });<\/code><\/pre>\n\n\n\n
\u66f4\u591a\u8bf7\u6233 vue\u4e2dextend\uff0cmixins\uff0cextends\uff0ccomponents,install\u7684\u51e0\u4e2a\u64cd\u4f5c<\/p>\n\n\n\n
15. Vue.nextTick<\/h2>\n\n\n\n
2.1.0 \u65b0\u589e
\u573a\u666f:\u9875\u9762\u52a0\u8f7d\u65f6\u9700\u8981\u8ba9\u6587\u672c\u6846\u83b7\u53d6\u7126\u70b9
\u7528\u6cd5:\u5728\u4e0b\u6b21 DOM \u66f4\u65b0\u5faa\u73af\u7ed3\u675f\u4e4b\u540e\u6267\u884c\u5ef6\u8fdf\u56de\u8c03\u3002\u5728\u4fee\u6539\u6570\u636e\u4e4b\u540e\u7acb\u5373\u4f7f\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u83b7\u53d6\u66f4\u65b0\u540e\u7684 DOM<\/p>\n\n\n\n
mounted(){ \/\/\u56e0\u4e3a mounted \u9636\u6bb5 dom \u5e76\u672a\u6e32\u67d3\u5b8c\u6bd5,\u6240\u4ee5\u9700\u8981$nextTick\n  this.$nextTick(() => {\n    this.$refs.inputs.focus() \/\/\u901a\u8fc7 $refs \u83b7\u53d6dom \u5e76\u7ed1\u5b9a focus \u65b9\u6cd5\n  })\n}<\/code><\/pre>\n\n\n\n
16.Vue.directive<\/h2>\n\n\n\n
16.1 \u4f7f\u7528<\/h3>\n\n\n\n
\u573a\u666f:\u5b98\u65b9\u7ed9\u6211\u4eec\u63d0\u4f9b\u4e86\u5f88\u591a\u6307\u4ee4,\u4f46\u662f\u6211\u4eec\u5982\u679c\u60f3\u5c06\u6587\u5b57\u53d8\u6210\u6307\u5b9a\u7684\u989c\u8272\u5b9a\u4e49\u6210\u6307\u4ee4\u4f7f\u7528,\u8fd9\u4e2a\u65f6\u5019\u5c31\u9700\u8981\u7528\u5230Vue.directive<\/p>\n\n\n\n
\/\/ \u5168\u5c40\u5b9a\u4e49\nVue.directive(\"change-color\",function(el,binding,vnode){\n  el.style[\"color\"]= binding.value;\n})\n\n\/\/ \u4f7f\u7528\n<template>\n<div v-change-color=\u201ccolor\u201d>{{message}}<\/div>\n<\/template>\n<script>\n  export default{\n    data(){\n      return{\n        color:'green'\n      }\n    }\n  }\n<\/script><\/code><\/pre>\n\n\n\n
16.2 \u751f\u547d\u5468\u671f<\/h3>\n\n\n\n
1.bind \u53ea\u8c03\u7528\u4e00\u6b21\uff0c\u6307\u4ee4\u7b2c\u4e00\u6b21\u7ed1\u5b9a\u5230\u5143\u7d20\u65f6\u5019\u8c03\u7528\uff0c\u7528\u8fd9\u4e2a\u94a9\u5b50\u53ef\u4ee5\u5b9a\u4e49\u4e00\u4e2a\u7ed1\u5b9a\u65f6\u6267\u884c\u4e00\u6b21\u7684\u521d\u59cb\u5316\u52a8\u4f5c\u3002
2.inserted:\u88ab\u7ed1\u5b9a\u7684\u5143\u7d20\u63d2\u5165\u7236\u8282\u70b9\u7684\u65f6\u5019\u8c03\u7528(\u7236\u8282\u70b9\u5b58\u5728\u5373\u53ef\u8c03\u7528\uff0c\u4e0d\u5fc5\u5b58\u5728document\u4e2d)
3.update: \u88ab\u7ed1\u5b9a\u4e0e\u5143\u7d20\u6240\u5728\u6a21\u677f\u66f4\u65b0\u65f6\u8c03\u7528\uff0c\u800c\u4e14\u65e0\u8bba\u7ed1\u5b9a\u503c\u662f\u5426\u6709\u53d8\u5316\uff0c\u901a\u8fc7\u6bd4\u8f83\u66f4\u65b0\u524d\u540e\u7684\u7ed1\u5b9a\u503c\uff0c\u5ffd\u7565\u4e0d\u5fc5\u8981\u7684\u6a21\u677f\u66f4\u65b0
4.componentUpdate :\u88ab\u7ed1\u5b9a\u7684\u5143\u7d20\u6240\u5728\u6a21\u677f\u5b8c\u6210\u4e00\u6b21\u66f4\u65b0\u66f4\u65b0\u5468\u671f\u7684\u65f6\u5019\u8c03\u7528
5.unbind: \u53ea\u8c03\u7528\u4e00\u6b21\uff0c\u6307\u4ee4\u6708\u5143\u7d20\u89e3\u7ed1\u7684\u65f6\u5019\u8c03\u7528<\/p>\n\n\n\n
17. Vue.filter<\/h2>\n\n\n\n
\u573a\u666f:\u65f6\u95f4\u6233\u8f6c\u5316\u6210\u5e74\u6708\u65e5\u8fd9\u662f\u4e00\u4e2a\u516c\u5171\u65b9\u6cd5,\u6240\u4ee5\u53ef\u4ee5\u62bd\u79bb\u6210\u8fc7\u6ee4\u5668\u4f7f\u7528<\/p>\n\n\n\n
\/\/ \u4f7f\u7528\n\/\/ \u5728\u53cc\u82b1\u62ec\u53f7\u4e2d\n{{ message | capitalize }}\n\n\/\/ \u5728 `v-bind` \u4e2d\n<div v-bind:id=\"rawId | formatId\"><\/div>\n\n\/\/ \u5168\u5c40\u6ce8\u518c\nVue.filter('stampToYYMMDD', (value) =>{\n  \/\/ \u5904\u7406\u903b\u8f91\n})\n\n\/\/ \u5c40\u90e8\u6ce8\u518c\nfilters: {\n  stampToYYMMDD: (value)=> {\n    \/\/ \u5904\u7406\u903b\u8f91\n  }\n}\n\n\/\/ \u591a\u4e2a\u8fc7\u6ee4\u5668\u5168\u5c40\u6ce8\u518c\n\/\/ \/src\/common\/filters.js\nlet dateServer = value => value.replace(\/(\\d{4})(\\d{2})(\\d{2})\/g, '$1-$2-$3') \nexport { dateServer }\n\/\/ \/src\/main.js\nimport * as custom from '.\/common\/filters\/custom'\nObject.keys(custom).forEach(key => Vue.filter(key, custom[key]))\n<\/code><\/pre>\n\n\n\n
18.Vue.compile<\/h2>\n\n\n\n
\u573a\u666f:\u5728 render \u51fd\u6570\u4e2d\u7f16\u8bd1\u6a21\u677f\u5b57\u7b26\u4e32\u3002\u53ea\u5728\u72ec\u7acb\u6784\u5efa\u65f6\u6709\u6548<\/p>\n\n\n\n
var res = Vue.compile('<div><span>{{ msg }}<\/span><\/div>')\n\nnew Vue({\n  data: {\n    msg: 'hello'\n  },\n  render: res.render,\n  staticRenderFns: res.staticRenderFns\n})<\/code><\/pre>\n\n\n\n
19.Vue.version<\/h2>\n\n\n\n
\u573a\u666f:\u6709\u4e9b\u5f00\u53d1\u63d2\u4ef6\u9700\u8981\u9488\u5bf9\u4e0d\u540c vue \u7248\u672c\u505a\u517c\u5bb9,\u6240\u4ee5\u5c31\u4f1a\u7528\u5230 Vue.version
\u7528\u6cd5:Vue.version()\u53ef\u4ee5\u83b7\u53d6 vue \u7248\u672c<\/p>\n\n\n\n
var version = Number(Vue.version.split('.')[0])\n\nif (version === 2) {\n  \/\/ Vue v2.x.x\n} else if (version === 1) {\n  \/\/ Vue v1.x.x\n} else {\n  \/\/ Unsupported versions of Vue\n}<\/code><\/pre>\n\n\n\n
20.Vue.set()<\/h2>\n\n\n\n
\u573a\u666f:\u5f53\u4f60\u5229\u7528\u7d22\u5f15\u76f4\u63a5\u8bbe\u7f6e\u4e00\u4e2a\u6570\u7ec4\u9879\u65f6\u6216\u4f60\u4fee\u6539\u6570\u7ec4\u7684\u957f\u5ea6\u65f6,\u7531\u4e8e Object.defineprototype()\u65b9\u6cd5\u9650\u5236,\u6570\u636e\u4e0d\u54cd\u5e94\u5f0f\u66f4\u65b0<\/p>\n\n\n\n
\u4e0d\u8fc7vue.3.x \u5c06\u5229\u7528 proxy \u8fd9\u4e2a\u95ee\u9898\u5c06\u5f97\u5230\u89e3\u51b3<\/code><\/pre>\n\n\n\n
\u89e3\u51b3\u65b9\u6848:<\/p>\n\n\n\n
\/\/ \u5229\u7528 set\nthis.$set(arr,index,item)\n\n\/\/ \u5229\u7528\u6570\u7ec4 push(),splice()<\/code><\/pre>\n\n\n\n
21.Vue.config.keyCodes<\/h2>\n\n\n\n
\u573a\u666f:\u81ea\u5b9a\u4e49\u6309\u952e\u4fee\u9970\u7b26\u522b\u540d<\/p>\n\n\n\n
\/\/ \u5c06\u952e\u7801\u4e3a 113 \u5b9a\u4e49\u4e3a f2\nVue.config.keyCodes.f2 = 113;\n<input type=\"text\" @keyup.f2=\"add\"\/><\/code><\/pre>\n\n\n\n
22.Vue.config.performance<\/h2>\n\n\n\n
\u573a\u666f:\u76d1\u542c\u6027\u80fd<\/p>\n\n\n\n
Vue.config.performance = true<\/code><\/pre>\n\n\n\n
\u53ea\u9002\u7528\u4e8e\u5f00\u53d1\u6a21\u5f0f\u548c\u652f\u6301 performance.mark API \u7684\u6d4f\u89c8\u5668\u4e0a<\/p>\n\n\n\n
23.Vue.config.errorHandler<\/h2>\n\n\n\n
1.\u573a\u666f:\u6307\u5b9a\u7ec4\u4ef6\u7684\u6e32\u67d3\u548c\u89c2\u5bdf\u671f\u95f4\u672a\u6355\u83b7\u9519\u8bef\u7684\u5904\u7406\u51fd\u6570
2.\u89c4\u5219:<\/p>\n\n\n\n
  \u4ece 2.2.0 \u8d77\uff0c\u8fd9\u4e2a\u94a9\u5b50\u4e5f\u4f1a\u6355\u83b7\u7ec4\u4ef6\u751f\u547d\u5468\u671f\u94a9\u5b50\u91cc\u7684\u9519\u8bef\u3002\u540c\u6837\u7684\uff0c\u5f53\u8fd9\u4e2a\u94a9\u5b50\u662f undefined \u65f6\uff0c\u88ab\u6355\u83b7\u7684\u9519\u8bef\u4f1a\u901a\u8fc7 console.error \u8f93\u51fa\u800c\u907f\u514d\u5e94\u7528\u5d29\u6e83\n  \u4ece 2.4.0 \u8d77\uff0c\u8fd9\u4e2a\u94a9\u5b50\u4e5f\u4f1a\u6355\u83b7 Vue \u81ea\u5b9a\u4e49\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u5185\u90e8\u7684\u9519\u8bef\u4e86\n  \u4ece 2.6.0 \u8d77\uff0c\u8fd9\u4e2a\u94a9\u5b50\u4e5f\u4f1a\u6355\u83b7 v-on DOM \u76d1\u542c\u5668\u5185\u90e8\u629b\u51fa\u7684\u9519\u8bef\u3002\u53e6\u5916\uff0c\u5982\u679c\u4efb\u4f55\u88ab\u8986\u76d6\u7684\u94a9\u5b50\u6216\u5904\u7406\u51fd\u6570\u8fd4\u56de\u4e00\u4e2a Promise \u94fe (\u4f8b\u5982 async \u51fd\u6570)\uff0c\u5219\u6765\u81ea\u5176 Promise \u94fe\u7684\u9519\u8bef\u4e5f\u4f1a\u88ab\u5904\u7406<\/code><\/pre>\n\n\n\n
3.\u4f7f\u7528<\/p>\n\n\n\n
Vue.config.errorHandler = function (err, vm, info) {\n  \/\/ handle error\n  \/\/ `info` \u662f Vue \u7279\u5b9a\u7684\u9519\u8bef\u4fe1\u606f\uff0c\u6bd4\u5982\u9519\u8bef\u6240\u5728\u7684\u751f\u547d\u5468\u671f\u94a9\u5b50\n  \/\/ \u53ea\u5728 2.2.0+ \u53ef\u7528\n}<\/code><\/pre>\n\n\n\n
24.Vue.config.warnHandler<\/h2>\n\n\n\n
2.4.0 \u65b0\u589e
1.\u573a\u666f:\u4e3a Vue \u7684\u8fd0\u884c\u65f6\u8b66\u544a\u8d4b\u4e88\u4e00\u4e2a\u81ea\u5b9a\u4e49\u5904\u7406\u51fd\u6570,\u53ea\u4f1a\u5728\u5f00\u53d1\u8005\u73af\u5883\u4e0b\u751f\u6548
2.\u7528\u6cd5:<\/p>\n\n\n\n
Vue.config.warnHandler = function (msg, vm, trace) {\n  \/\/ `trace` \u662f\u7ec4\u4ef6\u7684\u7ee7\u627f\u5173\u7cfb\u8ffd\u8e2a\n}<\/code><\/pre>\n\n\n\n
25.v-pre<\/h2>\n\n\n\n
\u573a\u666f:vue \u662f\u54cd\u5e94\u5f0f\u7cfb\u7edf,\u4f46\u662f\u6709\u4e9b\u9759\u6001\u7684\u6807\u7b7e\u4e0d\u9700\u8981\u591a\u6b21\u7f16\u8bd1,\u8fd9\u6837\u53ef\u4ee5\u8282\u7701\u6027\u80fd<\/p>\n\n\n\n
<span v-pre>{{ this will not be compiled }}<\/span>   \u663e\u793a\u7684\u662f{{ this will not be compiled }}\n<span v-pre>{{msg}}<\/span>     \u5373\u4f7fdata\u91cc\u9762\u5b9a\u4e49\u4e86msg\u8fd9\u91cc\u4ecd\u7136\u662f\u663e\u793a\u7684{{msg}}<\/code><\/pre>\n\n\n\n
26.v-cloak<\/h2>\n\n\n\n
\u573a\u666f:\u5728\u7f51\u901f\u6162\u7684\u60c5\u51b5\u4e0b,\u5728\u4f7f\u7528vue\u7ed1\u5b9a\u6570\u636e\u7684\u65f6\u5019\uff0c\u6e32\u67d3\u9875\u9762\u65f6\u4f1a\u51fa\u73b0\u53d8\u91cf\u95ea\u70c1
\u7528\u6cd5:\u8fd9\u4e2a\u6307\u4ee4\u4fdd\u6301\u5728\u5143\u7d20\u4e0a\u76f4\u5230\u5173\u8054\u5b9e\u4f8b\u7ed3\u675f\u7f16\u8bd1\u3002\u548c CSS \u89c4\u5219\u5982 [v-cloak] { display: none } \u4e00\u8d77\u7528\u65f6\uff0c\u8fd9\u4e2a\u6307\u4ee4\u53ef\u4ee5\u9690\u85cf\u672a\u7f16\u8bd1\u7684 Mustache \u6807\u7b7e\u76f4\u5230\u5b9e\u4f8b\u51c6\u5907\u5b8c\u6bd5<\/p>\n\n\n\n
\/\/ template \u4e2d\n<div class=\"#app\" v-cloak>\n    <p>{{value.name}}<\/p>\n<\/div>\n\n\/\/ css \u4e2d\n[v-cloak] {\n    display: none;\n}\n<\/code><\/pre>\n\n\n\n
\u8fd9\u6837\u5c31\u53ef\u4ee5\u89e3\u51b3\u95ea\u70c1,\u4f46\u662f\u4f1a\u51fa\u73b0\u767d\u5c4f,\u8fd9\u6837\u53ef\u4ee5\u7ed3\u5408\u9aa8\u67b6\u5c4f\u4f7f\u7528<\/p>\n\n\n\n
27.v-once<\/h2>\n\n\n\n
\u573a\u666f:\u6709\u4e9b template \u4e2d\u7684\u9759\u6001 dom \u6ca1\u6709\u6539\u53d8,\u8fd9\u65f6\u5c31\u53ea\u9700\u8981\u6e32\u67d3\u4e00\u6b21,\u53ef\u4ee5\u964d\u4f4e\u6027\u80fd\u5f00\u9500<\/p>\n\n\n\n
<span v-once> \u8fd9\u65f6\u53ea\u9700\u8981\u52a0\u8f7d\u4e00\u6b21\u7684\u6807\u7b7e<\/span><\/code><\/pre>\n\n\n\n
v-once \u548c v-pre \u7684\u533a\u522b:
v-once\u53ea\u6e32\u67d3\u4e00\u6b21\uff1bv-pre\u4e0d\u7f16\u8bd1,\u539f\u6837\u8f93\u51fa<\/p>\n\n\n\n
28.\u4e8b\u4ef6\u4fee\u9970\u7b26<\/h2>\n\n\n\n
.stop:\u963b\u6b62\u5192\u6ce1\n.prevent:\u963b\u6b62\u9ed8\u8ba4\u884c\u4e3a\n.self:\u4ec5\u7ed1\u5b9a\u5143\u7d20\u81ea\u8eab\u89e6\u53d1\n.once: 2.1.4 \u65b0\u589e,\u53ea\u89e6\u53d1\u4e00\u6b21\n.passive: 2.3.0 \u65b0\u589e,\u6eda\u52a8\u4e8b\u4ef6\u7684\u9ed8\u8ba4\u884c\u4e3a (\u5373\u6eda\u52a8\u884c\u4e3a) \u5c06\u4f1a\u7acb\u5373\u89e6\u53d1,\u4e0d\u80fd\u548c.prevent \u4e00\u8d77\u4f7f\u7528<\/code><\/pre>\n\n\n\n
29.\u6309\u952e\u4fee\u9970\u7b26\u548c\u6309\u952e\u7801<\/h2>\n\n\n\n
\u573a\u666f:\u6709\u7684\u65f6\u5019\u9700\u8981\u76d1\u542c\u952e\u76d8\u7684\u884c\u4e3a,\u5982\u6309\u4e0b enter \u53bb\u67e5\u8be2\u63a5\u53e3\u7b49<\/p>\n\n\n\n
\/\/ \u5bf9\u5e94\u952e\u76d8\u4e0a\u7684\u5173\u952e\u5b57\n.enter\n.tab\n.delete (\u6355\u83b7\u201c\u5220\u9664\u201d\u548c\u201c\u9000\u683c\u201d\u952e)\n.esc\n.space\n.up\n.down\n.left\n.right<\/code><\/pre>\n\n\n\n
30.Vue-router<\/h2>\n\n\n\n
\u573a\u666f:Vue-router \u662f\u5b98\u65b9\u63d0\u4f9b\u7684\u8def\u7531\u63d2\u4ef6<\/p>\n\n\n\n
30.1 \u7f13\u5b58\u548c\u52a8\u753b<\/h3>\n\n\n\n
1.\u8def\u7531\u662f\u4f7f\u7528\u5b98\u65b9\u7ec4\u4ef6 vue-router,\u4f7f\u7528\u65b9\u6cd5\u76f8\u4fe1\u5927\u5bb6\u975e\u5e38\u719f\u6089;
2.\u8fd9\u91cc\u6211\u5c31\u53d9\u8ff0\u4e0b\u8def\u7531\u7684\u7f13\u5b58\u548c\u52a8\u753b;
3.\u53ef\u4ee5\u7528exclude(\u9664\u4e86)\u6216\u8005include(\u5305\u62ec),2.1.0 \u65b0\u589e\u6765\u5750\u5224\u65ad<\/p>\n\n\n\n
<transition>\n  <keep-alive :include=\"['a', 'b']\">\n  \/\/\u6216include=\"a,b\" :include=\"\/a|b\/\",a \u548c b \u8868\u793a\u7ec4\u4ef6\u7684 name\n  \/\/\u56e0\u4e3a\u6709\u4e9b\u9875\u9762,\u5982\u8bd5\u8bd5\u6570\u636e\u7edf\u8ba1,\u8981\u5b9e\u65f6\u5237\u65b0,\u6240\u4ee5\u5c31\u4e0d\u9700\u8981\u7f13\u5b58\n    <router-view\/> \/\/\u8def\u7531\u6807\u7b7e\n  <\/keep-alive>\n  <router-view exclude=\"c\"\/> \n  \/\/ c \u8868\u793a\u7ec4\u4ef6\u7684 name\u503c\n<\/transition><\/code><\/pre>\n\n\n\n
\u6ce8:\u5339\u914d\u9996\u5148\u68c0\u67e5\u7ec4\u4ef6\u81ea\u8eab\u7684 name \u9009\u9879\uff0c\u5982\u679c name \u9009\u9879\u4e0d\u53ef\u7528\uff0c\u5219\u5339\u914d\u5b83\u7684\u5c40\u90e8\u6ce8\u518c\u540d\u79f0 (\u7236\u7ec4\u4ef6 components \u9009\u9879\u7684\u952e\u503c)\u3002\u533f\u540d\u7ec4\u4ef6\u4e0d\u80fd\u88ab\u5339\u914d
4.\u7528 v-if \u505a\u5224\u65ad,\u7ec4\u4ef6\u4f1a\u91cd\u65b0\u6e32\u67d3,\u4f46\u662f\u4e0d\u7528\u4e00\u4e00\u5217\u4e3e\u7ec4\u4ef6 name<\/p>\n\n\n\n
30.2 \u5168\u5c40\u8def\u7531\u94a9\u5b50<\/h3>\n\n\n\n
1.router.beforeEach<\/p>\n\n\n\n
router.beforeEach((to, from, next) => {\n  console.log('\u5168\u5c40\u524d\u7f6e\u5b88\u536b\uff1abeforeEach -- next\u9700\u8981\u8c03\u7528') \/\/\u4e00\u822c\u767b\u5f55\u62e6\u622a\u7528\u8fd9\u4e2a,\u4e5f\u53eb\u5bfc\u822a\u94a9\u5b50\u5b88\u536b\n  if (path === '\/login') {\n    next()\n    return\n  }\n  if (token) {\n    next();\n  } \n})<\/code><\/pre>\n\n\n\n
2.router.beforeResolve (v 2.5.0+)
\u548cbeforeEach\u7c7b\u4f3c\uff0c\u533a\u522b\u662f\u5728\u5bfc\u822a\u88ab\u786e\u8ba4\u4e4b\u524d\uff0c\u540c\u65f6\u5728\u6240\u6709\u7ec4\u4ef6\u5185\u5b88\u536b\u548c\u5f02\u6b65\u8def\u7531\u7ec4\u4ef6\u88ab\u89e3\u6790\u4e4b\u540e\uff0c\u89e3\u6790\u5b88\u536b\u5c31\u88ab\u8c03\u7528
\u5373\u5728 beforeEach\u4e4b\u540e\u8c03\u7528<\/p>\n\n\n\n
3.router.afterEach
\u5168\u5c40\u540e\u7f6e\u94a9\u5b50
\u5728\u6240\u6709\u8def\u7531\u8df3\u8f6c\u7ed3\u675f\u7684\u65f6\u5019\u8c03\u7528
\u8fd9\u4e9b\u94a9\u5b50\u4e0d\u4f1a\u63a5\u53d7 next \u51fd\u6570\u4e5f\u4e0d\u4f1a\u6539\u53d8\u5bfc\u822a\u672c\u8eab<\/p>\n\n\n\n
30.3 \u7ec4\u4ef6\u8def\u7531\u94a9\u5b50<\/h3>\n\n\n\n
1.beforeRouteEnter
\u5728\u6e32\u67d3\u8be5\u7ec4\u4ef6\u7684\u5bf9\u5e94\u8def\u7531\u88ab\u786e\u8ba4\u524d\u8c03\u7528\uff0c\u7528\u6cd5\u548c\u53c2\u6570\u4e0erouter.beforeEach\u7c7b\u4f3c\uff0cnext\u9700\u8981\u88ab\u4e3b\u52a8\u8c03\u7528
\u6b64\u65f6\u7ec4\u4ef6\u5b9e\u4f8b\u8fd8\u672a\u88ab\u521b\u5efa\uff0c\u4e0d\u80fd\u8bbf\u95eethis
\u53ef\u4ee5\u901a\u8fc7\u4f20\u4e00\u4e2a\u56de\u8c03\u7ed9 next\u6765\u8bbf\u95ee\u7ec4\u4ef6\u5b9e\u4f8b\u3002\u5728\u5bfc\u822a\u88ab\u786e\u8ba4\u7684\u65f6\u5019\u6267\u884c\u56de\u8c03\uff0c\u5e76\u4e14\u628a\u7ec4\u4ef6\u5b9e\u4f8b\u4f5c\u4e3a\u56de\u8c03\u65b9\u6cd5\u7684\u53c2\u6570<\/p>\n\n\n\n
beforeRouteEnter (to, from, next) {\n  \/\/ \u8fd9\u91cc\u8fd8\u65e0\u6cd5\u8bbf\u95ee\u5230\u7ec4\u4ef6\u5b9e\u4f8b\uff0cthis === undefined\n  next( vm => {\n    \/\/ \u901a\u8fc7 `vm` \u8bbf\u95ee\u7ec4\u4ef6\u5b9e\u4f8b\n  })\n}<\/code><\/pre>\n\n\n\n
2.beforeRouteUpdate (v 2.2+)
\u5728\u5f53\u524d\u8def\u7531\u6539\u53d8\uff0c\u5e76\u4e14\u8be5\u7ec4\u4ef6\u88ab\u590d\u7528\u65f6\u8c03\u7528\uff0c\u53ef\u4ee5\u901a\u8fc7this\u8bbf\u95ee\u5b9e\u4f8b\uff0c next\u9700\u8981\u88ab\u4e3b\u52a8\u8c03\u7528\uff0c\u4e0d\u80fd\u4f20\u56de\u8c03<\/p>\n\n\n\n
3.beforeRouteLeave
\u5bfc\u822a\u79bb\u5f00\u8be5\u7ec4\u4ef6\u7684\u5bf9\u5e94\u8def\u7531\u65f6\u8c03\u7528\uff0c\u53ef\u4ee5\u8bbf\u95ee\u7ec4\u4ef6\u5b9e\u4f8b this\uff0cnext\u9700\u8981\u88ab\u4e3b\u52a8\u8c03\u7528\uff0c\u4e0d\u80fd\u4f20\u56de\u8c03<\/p>\n\n\n\n
30.4 \u8def\u7531\u6a21\u5f0f<\/h3>\n\n\n\n
\u8bbe\u7f6e mode \u5c5e\u6027:hash\u6216 history<\/p>\n\n\n\n
30.5 Vue.$router<\/h3>\n\n\n\n
this.$router.push():\u8df3\u8f6c\u5230\u4e0d\u540c\u7684url\uff0c\u4f46\u8fd9\u4e2a\u65b9\u6cd5\u56de\u5411history\u6808\u6dfb\u52a0\u4e00\u4e2a\u8bb0\u5f55\uff0c\u70b9\u51fb\u540e\u9000\u4f1a\u8fd4\u56de\u5230\u4e0a\u4e00\u4e2a\u9875\u9762\nthis.$router.replace():\u4e0d\u4f1a\u6709\u8bb0\u5f55\nthis.$router.go(n):n\u53ef\u4e3a\u6b63\u6570\u53ef\u4e3a\u8d1f\u6570\u3002\u6b63\u6570\u8fd4\u56de\u4e0a\u4e00\u4e2a\u9875\u9762,\u7c7b\u4f3c window.history.go(n)<\/code><\/pre>\n\n\n\n
30.6 Vue.$route<\/h3>\n\n\n\n
\u8868\u793a\u5f53\u524d\u8df3\u8f6c\u7684\u8def\u7531\u5bf9\u8c61,\u5c5e\u6027\u6709:
name:\u8def\u7531\u540d\u79f0
path:\u8def\u5f84
query:\u4f20\u53c2\u63a5\u6536\u503c
params:\u4f20\u53c2\u63a5\u6536\u503c
fullPath:\u5b8c\u6210\u89e3\u6790\u540e\u7684 URL\uff0c\u5305\u542b\u67e5\u8be2\u53c2\u6570\u548c hash \u7684\u5b8c\u6574\u8def\u5f84
matched:\u8def\u7531\u8bb0\u5f55\u526f\u672c
redirectedFrom:\u5982\u679c\u5b58\u5728\u91cd\u5b9a\u5411\uff0c\u5373\u4e3a\u91cd\u5b9a\u5411\u6765\u6e90\u7684\u8def\u7531\u7684\u540d\u5b57<\/p>\n\n\n\n
this.$route.params.id:\u83b7\u53d6\u901a\u8fc7 params \u6216\/:id\u4f20\u53c2\u7684\u53c2\u6570\nthis.$route.query.id:\u83b7\u53d6\u901a\u8fc7 query \u4f20\u53c2\u7684\u53c2\u6570<\/code><\/pre>\n\n\n\n
30.7 router-view \u7684 key<\/h3>\n\n\n\n
\u573a\u666f:\u7531\u4e8e Vue \u4f1a\u590d\u7528\u76f8\u540c\u7ec4\u4ef6, \u5373 \/page\/1 => \/page\/2 \u6216\u8005 \/page?id=1 => \/page?id=2 \u8fd9\u7c7b\u94fe\u63a5\u8df3\u8f6c\u65f6, \u5c06\u4e0d\u5728\u6267\u884ccreated, mounted\u4e4b\u7c7b\u7684\u94a9\u5b50<\/p>\n\n\n\n
<router-view :key=\"$route.fullpath\"><\/router-view><\/code><\/pre>\n\n\n\n
\u8fd9\u6837\u7ec4\u4ef6\u7684 created \u548c mounted \u5c31\u90fd\u4f1a\u6267\u884c<\/p>\n\n\n\n
31.Object.freeze<\/h2>\n\n\n\n
\u573a\u666f:\u4e00\u4e2a\u957f\u5217\u8868\u6570\u636e,\u4e00\u822c\u4e0d\u4f1a\u66f4\u6539,\u4f46\u662fvue\u4f1a\u505agetter\u548csetter\u7684\u8f6c\u6362
\u7528\u6cd5:\u662fES5\u65b0\u589e\u7684\u7279\u6027\uff0c\u53ef\u4ee5\u51bb\u7ed3\u4e00\u4e2a\u5bf9\u8c61\uff0c\u9632\u6b62\u5bf9\u8c61\u88ab\u4fee\u6539
\u652f\u6301:vue 1.0.18+\u5bf9\u5176\u63d0\u4f9b\u4e86\u652f\u6301\uff0c\u5bf9\u4e8edata\u6216vuex\u91cc\u4f7f\u7528freeze\u51bb\u7ed3\u4e86\u7684\u5bf9\u8c61\uff0cvue\u4e0d\u4f1a\u505agetter\u548csetter\u7684\u8f6c\u6362
\u6ce8\u610f:\u51bb\u7ed3\u53ea\u662f\u51bb\u7ed3\u91cc\u9762\u7684\u5355\u4e2a\u5c5e\u6027,\u5f15\u7528\u5730\u5740\u8fd8\u662f\u53ef\u4ee5\u66f4\u6539<\/p>\n\n\n\n
new Vue({\n    data: {\n        \/\/ vue\u4e0d\u4f1a\u5bf9list\u91cc\u7684object\u505agetter\u3001setter\u7ed1\u5b9a\n        list: Object.freeze([\n            { value: 1 },\n            { value: 2 }\n        ])\n    },\n    mounted () {\n        \/\/ \u754c\u9762\u4e0d\u4f1a\u6709\u54cd\u5e94,\u56e0\u4e3a\u5355\u4e2a\u5c5e\u6027\u88ab\u51bb\u7ed3\n        this.list[0].value = 100;\n\n        \/\/ \u4e0b\u9762\u4e24\u79cd\u505a\u6cd5\uff0c\u754c\u9762\u90fd\u4f1a\u54cd\u5e94\n        this.list = [\n            { value: 100 },\n            { value: 200 }\n        ];\n        this.list = Object.freeze([\n            { value: 100 },\n            { value: 200 }\n        ]);\n    }\n})<\/code><\/pre>\n\n\n\n
32.\u8c03\u8bd5 template<\/h2>\n\n\n\n
\u573a\u666f:\u5728Vue\u5f00\u53d1\u8fc7\u7a0b\u4e2d, \u7ecf\u5e38\u4f1a\u9047\u5230template\u6a21\u677f\u6e32\u67d3\u65f6JavaScript\u53d8\u91cf\u51fa\u9519\u7684\u95ee\u9898, \u6b64\u65f6\u4e5f\u8bb8\u4f60\u4f1a\u901a\u8fc7console.log\u6765\u8fdb\u884c\u8c03\u8bd5
\u8fd9\u65f6\u53ef\u4ee5\u5728\u5f00\u53d1\u73af\u5883\u6302\u8f7d\u4e00\u4e2a log \u51fd\u6570<\/p>\n\n\n\n
\/\/ main.js\nVue.prototype.$log = window.console.log;\n\n\/\/ \u7ec4\u4ef6\u5185\u90e8\n<div>{{$log(info)}}<\/div>\n<\/code><\/pre>\n\n\n\n
33.vue-loader \u5c0f\u6280\u5de7<\/h2>\n\n\n\n
33.1 preserveWhitespace<\/h3>\n\n\n\n
\u573a\u666f:\u5f00\u53d1 vue \u4ee3\u7801\u4e00\u822c\u4f1a\u6709\u7a7a\u683c,\u8fd9\u4e2a\u65f6\u5019\u6253\u5305\u538b\u7f29\u5982\u679c\u4e0d\u53bb\u6389\u7a7a\u683c\u4f1a\u52a0\u5927\u5305\u7684\u4f53\u79ef
\u914d\u7f6epreserveWhitespace\u53ef\u4ee5\u51cf\u5c0f\u5305\u7684\u4f53\u79ef<\/p>\n\n\n\n
{\n  vue: {\n    preserveWhitespace: false\n  }\n}<\/code><\/pre>\n\n\n\n
33.2 transformToRequire<\/h3>\n\n\n\n
\u573a\u666f:\u4ee5\u524d\u5728\u5199 Vue \u7684\u65f6\u5019\u7ecf\u5e38\u4f1a\u5199\u5230\u8fd9\u6837\u7684\u4ee3\u7801\uff1a\u628a\u56fe\u7247\u63d0\u524d require \u4f20\u7ed9\u4e00\u4e2a\u53d8\u91cf\u518d\u4f20\u7ed9\u7ec4\u4ef6<\/p>\n\n\n\n
\/\/ page \u4ee3\u7801\n<template>\n  <div>\n    <avatar :img-src=\"imgSrc\"><\/avatar>\n  <\/div>\n<\/template>\n<script>\n  export default {\n    created () {\n      this.imgSrc = require('.\/assets\/default-avatar.png')\n    }\n  }\n<\/script><\/code><\/pre>\n\n\n\n
\u73b0\u5728:\u901a\u8fc7\u914d\u7f6e transformToRequire \u540e\uff0c\u5c31\u53ef\u4ee5\u76f4\u63a5\u914d\u7f6e\uff0c\u8fd9\u6837vue-loader\u4f1a\u628a\u5bf9\u5e94\u7684\u5c5e\u6027\u81ea\u52a8 require \u4e4b\u540e\u4f20\u7ed9\u7ec4\u4ef6<\/p>\n\n\n\n
\/\/ vue-cli 2.x\u5728vue-loader.conf.js \u9ed8\u8ba4\u914d\u7f6e\u662f\ntransformToRequire: {\n    video: ['src', 'poster'],\n    source: 'src',\n    img: 'src',\n    image: 'xlink:href'\n}\n\n\/\/ \u914d\u7f6e\u6587\u4ef6,\u5982\u679c\u662fvue-cli2.x \u5728vue-loader.conf.js\u91cc\u9762\u4fee\u6539\n  avatar: ['default-src']\n\n\/\/ vue-cli 3.x \u5728vue.config.js\n\/\/ vue-cli 3.x \u5c06transformToRequire\u5c5e\u6027\u6362\u4e3a\u4e86transformAssetUrls\nmodule.exports = {\n  pages,\n  chainWebpack: config => {\n    config\n      .module\n        .rule('vue')\n        .use('vue-loader')\n        .loader('vue-loader')\n        .tap(options => {\n      options.transformAssetUrls = {\n        avatar: 'img-src',\n      }\n      return options;\n      });\n  }\n}\n\n\/\/ page \u4ee3\u7801\u53ef\u4ee5\u7b80\u5316\u4e3a\n<template>\n  <div>\n    <avatar img-src=\".\/assets\/default-avatar.png\"><\/avatar>\n  <\/div>\n<\/template><\/code><\/pre>\n\n\n\n
34.\u4e3a\u8def\u5f84\u8bbe\u7f6e\u522b\u540d<\/h2>\n\n\n\n
1.\u573a\u666f:\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\uff0c\u6211\u4eec\u7ecf\u5e38\u9700\u8981\u5f15\u5165\u5404\u79cd\u6587\u4ef6\uff0c\u5982\u56fe\u7247\u3001CSS\u3001JS\u7b49\uff0c\u4e3a\u4e86\u907f\u514d\u5199\u5f88\u957f\u7684\u76f8\u5bf9\u8def\u5f84\uff08..\/\uff09\uff0c\u6211\u4eec\u53ef\u4ee5\u4e3a\u4e0d\u540c\u7684\u76ee\u5f55\u914d\u7f6e\u4e00\u4e2a\u522b\u540d<\/p>\n\n\n\n
2.vue-cli 2.x \u914d\u7f6e<\/p>\n\n\n\n
\/\/ \u5728 webpack.base.config.js\u4e2d\u7684 resolve \u914d\u7f6e\u9879\uff0c\u5728\u5176 alias \u4e2d\u589e\u52a0\u522b\u540d\nresolve: {\n    extensions: ['.js', '.vue', '.json'],\n    alias: {\n      'vue$': 'vue\/dist\/vue.esm.js',\n      '@': resolve('src'),\n    }\n  },<\/code><\/pre>\n\n\n\n
3.vue-cli 3.x \u914d\u7f6e<\/p>\n\n\n\n
\/\/ \u5728\u6839\u76ee\u5f55\u4e0b\u521b\u5efavue.config.js\nvar path = require('path')\nfunction resolve (dir) {\n  console.log(__dirname)\n  return path.join(__dirname, dir)\n}\nmodule.exports = {\n  chainWebpack: config => {\n    config.resolve.alias\n      .set(key, value) \/\/ key,value\u81ea\u884c\u5b9a\u4e49\uff0c\u6bd4\u5982.set('@@', resolve('src\/components'))\n  }\n}<\/code><\/pre>\n\n\n\n
35.img \u52a0\u8f7d\u5931\u8d25<\/h2>\n\n\n\n
\u573a\u666f:\u6709\u4e9b\u65f6\u5019\u540e\u53f0\u8fd4\u56de\u56fe\u7247\u5730\u5740\u4e0d\u4e00\u5b9a\u80fd\u6253\u5f00,\u6240\u4ee5\u8fd9\u4e2a\u65f6\u5019\u5e94\u8be5\u52a0\u4e00\u5f20\u9ed8\u8ba4\u56fe\u7247<\/p>\n\n\n\n
\/\/ page \u4ee3\u7801\n<img :src=\"imgUrl\" @error=\"handleError\" alt=\"\">\n<script>\nexport default{\n  data(){\n    return{\n      imgUrl:''\n    }\n  },\n  methods:{\n    handleError(e){\n      e.target.src=reqiure('\u56fe\u7247\u8def\u5f84') \/\/\u5f53\u7136\u5982\u679c\u9879\u76ee\u914d\u7f6e\u4e86transformToRequire,\u53c2\u8003\u4e0a\u9762 27.2\n    }\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
36.css<\/h2>\n\n\n\n
36.1 \u5c40\u90e8\u6837\u5f0f<\/h3>\n\n\n\n
1.Vue\u4e2dstyle\u6807\u7b7e\u7684scoped\u5c5e\u6027\u8868\u793a\u5b83\u7684\u6837\u5f0f\u53ea\u4f5c\u7528\u4e8e\u5f53\u524d\u6a21\u5757\uff0c\u662f\u6837\u5f0f\u79c1\u6709\u5316.<\/p>\n\n\n\n
2.\u6e32\u67d3\u7684\u89c4\u5219\/\u539f\u7406\uff1a
\u7ed9HTML\u7684DOM\u8282\u70b9\u6dfb\u52a0\u4e00\u4e2a \u4e0d\u91cd\u590d\u7684data\u5c5e\u6027 \u6765\u8868\u793a \u552f\u4e00\u6027
\u5728\u5bf9\u5e94\u7684 CSS\u9009\u62e9\u5668 \u672b\u5c3e\u6dfb\u52a0\u4e00\u4e2a\u5f53\u524d\u7ec4\u4ef6\u7684 data\u5c5e\u6027\u9009\u62e9\u5668\u6765\u79c1\u6709\u5316\u6837\u5f0f\uff0c\u5982\uff1a.demo[data-v-2311c06a]{}
\u5982\u679c\u5f15\u5165 less \u6216 sass \u53ea\u4f1a\u5728\u6700\u540e\u4e00\u4e2a\u5143\u7d20\u4e0a\u8bbe\u7f6e<\/p>\n\n\n\n
\/\/ \u539f\u59cb\u4ee3\u7801\n<template>\n  <div class=\"demo\">\n    <span class=\"content\">\n      Vue.js scoped\n    <\/span>\n  <\/div>\n<\/template>\n\n<style lang=\"less\" scoped>\n  .demo{\n    font-size: 16px;\n    .content{\n      color: red;\n    }\n  }\n<\/style>\n\n\/\/ \u6d4f\u89c8\u5668\u6e32\u67d3\u6548\u679c\n<div data-v-fed36922>\n  Vue.js scoped\n<\/div>\n<style type=\"text\/css\">\n.demo[data-v-039c5b43] {\n  font-size: 14px;\n}\n.demo .content[data-v-039c5b43] { \/\/.demo \u4e0a\u5e76\u6ca1\u6709\u52a0 data \u5c5e\u6027\n  color: red;\n}\n<\/style><\/code><\/pre>\n\n\n\n
36.2 deep \u5c5e\u6027<\/h3>\n\n\n\n
\/\/ \u4e0a\u9762\u6837\u5f0f\u52a0\u4e00\u4e2a \/deep\/\n<style lang=\"less\" scoped>\n  .demo{\n    font-size: 14px;\n  }\n  .demo \/deep\/ .content{\n    color: blue;\n  }\n<\/style>\n\n\/\/ \u6d4f\u89c8\u5668\u7f16\u8bd1\u540e\n<style type=\"text\/css\">\n.demo[data-v-039c5b43] {\n  font-size: 14px;\n}\n.demo[data-v-039c5b43] .content {\n  color: blue;\n}\n<\/style><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
1.require.context() 1.\u573a\u666f:\u5982\u9875\u9762\u9700\u8981\u5bfc\u5165\u591a\u4e2a\u7ec4\u4ef6,\u539f\u59cb\u5199\u6cd5: 2.\u8fd9\u6837\u5c31\u5199\u4e86\u5927\u91cf\u91cd\u590d\u7684\u4ee3\u7801,\u5229\u7528 requ …<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[9,10],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/1226"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=1226"}],"version-history":[{"count":1,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/1226\/revisions"}],"predecessor-version":[{"id":1227,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/1226\/revisions\/1227"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=1226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=1226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=1226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}