{"id":325,"date":"2024-10-23T22:18:59","date_gmt":"2024-10-23T14:18:59","guid":{"rendered":"https:\/\/eve2333.top\/?p=325"},"modified":"2024-10-23T22:18:59","modified_gmt":"2024-10-23T14:18:59","slug":"vue-part-3","status":"publish","type":"post","link":"https:\/\/eve2333.top\/?p=325","title":{"rendered":"Vue part-3"},"content":{"rendered":"\n

vscode\u5b89\u88c5vue3 snippets<\/p>\n\n\n\n

\u5929\u6c14\u6848\u4f8b<\/h1>\n\n\n\n
<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>\u59d3\u540d\u6848\u4f8b_\u63d2\u503c\u8bed\u6cd5\u5b9e\u73b0<\/title>\n    <!-- \u5f15\u5165Vue -->\n    <script type=\"text\/javascript\" src=\"..\/js\/vue.js\"><\/script>\n<\/head>\n\n<body>\n    <!--\u51c6\u5907\u597d\u4e00\u4e2a\u5bb9\u5668-->\n    <div id=\"root\">\n        <h2>\u4eca\u5929\u5929\u6c14\u5f88{{info}}<\/h2>\n        <!--  \u5982\u679c\u662f\u4eca\u5929\u5929\u6c14\u5f88\u4e00\u822c\uff0c\u6309\u4e0b\u6309\u94ae\u9875\u9762\u4e0a\u6ca1\u6709\u4f53\u73b0\uff0c\u6570\u636e\u5df2\u7ecf\u6539\u53d8\uff0c\u4f46\u662f\u5f00\u53d1\u8005\u5de5\u5177\u4e0d\u66f4\u65b0 -->\n        <button>\u5207\u6362\u5929\u6c14<\/button>\n        <button @click=\"changeWeather\">\u5207\u6362\u5929\u6c14<\/button><!-- \u4e5f\u53ef\u4ee5\uff0c\u628amethods\u5220\u9664\u5373\u53ef -->\n    <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n    Vue.config.productionTip = false\/\/\u963b\u6b62vue\u5728\u542f\u52a8\u65f6\u751f\u6210\u751f\u4ea7\u63d0\u793a\u3002\n    new Vue({\n        el: '#root',\n        data: {\n            isHot: true\n        },\n        computed: {\n            info() {\n                return this.isHot ? '\u708e\u70ed' : '\u51c9\u723d'\n            }\n        },\n        methods: {\n            changeWeather() {\n                this.isHot = !this.isHot\n            }\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n\n\n\n
\u76d1\u89c6\u5c5e\u6027<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>\u59d3\u540d\u6848\u4f8b_\u63d2\u503c\u8bed\u6cd5\u5b9e\u73b0<\/title>\n    <!-- \u5f15\u5165Vue -->\n    <script type=\"text\/javascript\" src=\"..\/js\/vue.js\"><\/script>\n<\/head>\n\n<body>\n    <!--\u51c6\u5907\u597d\u4e00\u4e2a\u5bb9\u5668-->\n    <div id=\"root\">\n        <h2>\u4eca\u5929\u5929\u6c14\u5f88{{info}}<\/h2>\n        <!--  \u5982\u679c\u662f\u4eca\u5929\u5929\u6c14\u5f88\u4e00\u822c\uff0c\u6309\u4e0b\u6309\u94ae\u9875\u9762\u4e0a\u6ca1\u6709\u4f53\u73b0\uff0c\u6570\u636e\u5df2\u7ecf\u6539\u53d8\uff0c\u4f46\u662f\u5f00\u53d1\u8005\u5de5\u5177\u4e0d\u66f4\u65b0 -->\n        <button @click=\"changeWeather\">\u5207\u6362\u5929\u6c14<\/button><!-- \u4e5f\u53ef\u4ee5\uff0c\u628amethods\u5220\u9664\u5373\u53ef -->\n    <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n    Vue.config.productionTip = false\/\/\u963b\u6b62vue\u5728\u542f\u52a8\u65f6\u751f\u6210\u751f\u4ea7\u63d0\u793a\u3002\n    new Vue({\n        el: '#root',\n        data: {\n            isHot: true\n        },\n        computed: {\n            info() {\n                return this.isHot ? '\u708e\u70ed' : '\u51c9\u723d'\n            }\n        },\n        methods: {\n            changeWeather() {\n                this.isHot = !this.isHot\n            }\n        },\n        \/*  watch: {\n             ishot: {\n                 handler(newVal, oldVal) {\n                     console.log('newVal:', newVal, 'oldVal:', oldVal)\n                 }\n             }\n         }, *\/\n        vm.$watch('isHot', {\n            immediate: true,\n            handler(newVal, oldVal) {\n                console.log('newVal:', newVal, 'oldVal:', oldVal)\n            }\n        })\n    })\n<\/script>\n<\/html><\/code><\/pre>\n\n\n\n
\u6df1\u5ea6\u76d1\u89c6<\/h3>\n\n\n\n
023_\u5c1a\u7845\u8c37Vue\u6280\u672f_\u6df1\u5ea6\u76d1\u89c6_\u54d4\u54e9\u54d4\u54e9_bilibili<\/a><\/p>\n\n\n\n
\u76d1\u89c6\u7b80\u5199<\/h3>\n\n\n\n
\u5f53watch\u914d\u7f6e\u9879\u53ea\u6709handler\u65f6\uff0c\u53ef\u4ee5\u5f00\u542f\u7b80\u5199\u5f62\u5f0f\uff1a\u5373\u4e0d\u9700\u8981\u8ba1\u7b97\u53ea\u9700\u8981\u54cd\u5e94hander<\/p>\n\n\n\n
\u8d8a\u7b80\u5199\uff0c\u8d8a\u4e71\uff0chhhh\uff0c\u603b\u4e4b\u5927\u5bb6\u8bb0\u4f4f\u4e00\u53e5\u8bdd\uff0cvue\u7ba1\u7406\u7684\u51fd\u6570\u90fd\u522b\u5199\u7bad\u5934\u51fd\u6570\u3002\u4ee5\u514dthis\u6307\u5411\u9519\u8bef<\/p>\n\n\n\n
watch\u548ccompute\u5bf9\u6bd4<\/h3>\n\n\n\n
\u8fd9\u6837\u6765\u7406\u89e3\uff0c\u5bf9\u4e8e\u8f6f\u4ef6\u5e95\u5c42\u6765\u8bb2\uff0c\u65b9\u6cd5\u3001\u76d1\u63a7\u90fd\u662f\u4e00\u6837\uff0c\u4f46\u6211\u4eec\u7528\u67b6\u6784\u601d\u7ef4\u7ed9\u4e86\u505a\u4e86\u4e0d\u540c\u7684\u533a\u5206<\/p>\n\n\n\n
\u8ba1\u7b97\u5c5e\u6027\u80fd\u505a\u7684\u4e8b\uff0cwatch\u4e5f\u80fd\u505a\u4f46\u662fwatch\u80fd\u505a\u7684\u4e8b\uff0c\u8ba1\u7b97\u5c5e\u6027\u4e0d\u4e00\u5b9a\u80fd\u591f\u505a\u3002<\/p>\n\n\n\n
this\u6ca1\u53d8\uff0c\u56e0\u4e3afullName\u91cc\u9762\u7684this\u6307\u5411\u7684Vue\uff0c\u800c\u5b9a\u65f6\u5668\u7684this\u5c31\u662ffullName\u4e2d\u7684this\uff0c\u9677\u5165\u4e86\u4e00\u4e2a\u8bef\u533a\uff0c\u5305\u4e00\u4e2a\u5b9a\u65f6\u5668\uff0cfullName\u7b49\u4e00\u4f1a\u5c31\u6709\u8fd4\u56de\u503c<\/p>\n\n\n\n
025_\u5c1a\u7845\u8c37Vue\u6280\u672f_watch\u5bf9\u6bd4computed_\u54d4\u54e9\u54d4\u54e9_bilibili<\/a><\/p>\n\n\n\n
class\u548cstyle\u7ed1\u5b9a<\/h1>\n\n\n\n
class<\/h3>\n\n\n\n
026_\u5c1a\u7845\u8c37Vue\u6280\u672f_\u7ed1\u5b9aclass\u6837\u5f0f_\u54d4\u54e9\u54d4\u54e9_bilibili<\/a><\/p>\n\n\n\n
style<\/h3>\n\n\n\n
027_\u5c1a\u7845\u8c37Vue\u6280\u672f_\u7ed1\u5b9astyle\u6837\u5f0f_\u54d4\u54e9\u54d4\u54e9_bilibili<\/a><\/p>\n\n\n\n
\u6761\u4ef6\u6e32\u67d3<\/h1>\n\n\n\n
<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>\u6761\u4ef6\u6e32\u67d3<\/title>\n    <!-- \u5f15\u5165Vue -->\n    <script type=\"text\/javascript\" src=\"..\/js\/vue.js\"><\/script>\n<\/head>\n\n<body>\n    <!--\u51c6\u5907\u597d\u4e00\u4e2a\u5bb9\u5668-->\n    <div id=\"root\">\n        <h1>\u5f53\u524d\u7684n\u503c\u662f:{{n}}<\/h1>\n        <button @click=\"n++\">\u70b9\u51fbn+1<\/button>\n        <h2 v-show=\"false \">\u6b22\u8fce\u6765\u5230{{name}}<\/h2>\n        <!-- v-show\u6761\u4ef6\u6e32\u67d3\uff0cfalse\u6761\u4ef6\u4e3a\u5047\u65f6\uff0ch2\u6807\u7b7e\u5c06\u4e0d\u4f1a\u663e\u793a -->\n        <h2 v-if=\"true \">\u6b22\u8fce\u6765\u5230{{name}}<\/h2>\n        <!-- v-if\u6761\u4ef6\u6e32\u67d3\uff0ctrue\u6761\u4ef6\u4e3a\u771f\u65f6\uff0ch2\u6807\u7b7e\u5c06\u4f1a\u663e\u793a -->\n        <!-- \u8fd9\u4e2a\u8981\u8bb0\u4e00\u4e0b\u7684 \uff0c\u4e24\u4e2a\u9690\u85cf\u7684\u533a\u522b\uff0c\u9762\u8bd5\u5076\u5c14\u4f1a\u95ee\u5230\uff0cv-show\u548cv-if\u7684\u533a\u522b\uff0cv-show\u662f\u63a7\u5236\u5143\u7d20\u7684\u663e\u793a\u9690\u85cf\uff0cv-if\u662f\u63a7\u5236\u5143\u7d20\u7684\u6e32\u67d3\uff0c\u5f53\u6761\u4ef6\u4e3a\u771f\u65f6\u624d\u6e32\u67d3\uff0cfalse\u65f6\u4e0d\u6e32\u67d3\u3002 -->\n        <div v-if=\"n===1\">Angular<\/div>\n\n        <div v-else-if=\"n===2\">React<\/div>\n\n        <div v-else-if=\"n===3\">Vue<\/div>\n\n        <div v-else>\u5176\u5b83<\/div>\n        <!-- \u4e2d\u95f4\u4e0d\u5141\u8bb8\u6253\u65ad -->\n        <template v-if=\"n===1\">\n            <h2>hello<\/h2>\n            <h2>world<\/h2>\n            <h2>vue<\/h2>\n        <\/template><!-- template\u4e0d\u5f71\u54cd\u7ed3\u6784,\u5c55\u793a\u7684\u65f6\u5019\u7ed3\u6784\u6ca1\u6709\u7834,\u53ea\u80fdv-if\u63a7\u5236\u5c55\u793a\uff0cv-show\u662f\u9519\u8bef\u7684 -->\n    <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n    Vue.config.productionTip = false\/\/\u963b\u6b62vue\u5728\u542f\u52a8\u65f6\u751f\u6210\u751f\u4ea7\u63d0\u793a\u3002\n\n    new Vue({\n        el: '#root',\n        data: {\n            name: '\u5c1a\u7845\u8c37'\n        }\n    })\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\n
\u5217\u8868\u6e32\u67d3<\/h3>\n\n\n\n
Js\u4e2d\u4e00\u65e6\u6709\u987a\u5e8f\u90a3\u4e48\u5c06\u4f1a\u662f\u4f7f\u7528\u6570\u7ec4\u4fdd\u5b58\u6570\u636e   \u7136\u540e\u6bcf\u4e00\u4e2a\u5bf9\u8c61\u53ef\u4ee5\u4fdd\u5b58\u4e00\u4e2a\u5b8c\u6574\u8be6\u7ec6\u7684\u6570\u636e<\/p>\n\n\n\n
:key=\"item.id\" -> \u4e3b\u8981\u662f\u4e3a\u4e86 diff \u7b97\u6cd5\uff0c\u5c3d\u91cf\u51cf\u5c11\u91cd\u65b0\u6e32\u67d3\u7684\u6b21\u6570<\/p>\n\n\n\n
\u8bb0\u5f97key\u4e00\u5b9a\u8981\u5199 \u6709id\u7528id \u6ca1id\u6709\u7d22\u5f15\uff01\uff01\uff01\uff01<\/p>\n\n\n\n
vue\u5b98\u7f51\u4e0d\u63a8\u8350index\uff0c\u56e0\u4e3aindex\u4e0d\u662f\u6570\u636e\u7684\u552f\u4e00\u6807\u8bc6\uff0cid\u624d\u662f<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>\u57fa\u672c\u5217\u8868<\/title>\n    <!-- \u5f15\u5165Vue -->\n    <script type=\"text\/javascript\" src=\"..\/js\/vue.js\"><\/script>\n<\/head>\n\n<body>\n    <!--\u51c6\u5907\u597d\u4e00\u4e2a\u5bb9\u5668-->\n    <div id=\"root\">\n        <h2>\u4eba\u5458\u5217\u8868<\/h2>\n        <ul>\n            <li v-for=\"p in persons\" :key=\"p.id\"><!-- key\u91cd\u8981\u6027\uff0c\u5fc5\u987b\u6253\u6807\u8bc6 \uff0cp of persons\u4e5f\u53ef\u4ee5-->\n                {{ p.name }} - {{p.age}}\n            <\/li>\n        <\/ul>\n        <h2>\u6d4b\u8bd5\u904d\u5386\u5b57\u7b26\u4e32<\/h2>\n        <ul>\n            <li v-for=\"(char,index)of str\" :key=\"index\">\n                {{ index }} - {{ char }}\n            <\/li>\n        <\/ul>\n        <ul>\n            <li v-for=\"(a,b) of 5\">\n                {{ a }} - {{ b }}\n            <\/li>\n        <\/ul>\n    <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n    Vue.config.productionTip = false\/\/\u963b\u6b62vue\u5728\u542f\u52a8\u65f6\u751f\u6210\u751f\u4ea7\u63d0\u793a\u3002\n\n    new Vue({\n        el: '#root',\n        data: {\n            persons: [\n                { id: 1, name: '\u5f20\u4e09', age: 25 },\n                { id: 2, name: '\u674e\u56db', age: 23 },\n                { id: 3, name: '\u738b\u4e94', age: 28 }\n            ],\n            car:{\n                name:'\u5b9d\u9a6c',\n                price:100000,\n                color:'\u7ea2\u8272'\n            },\n            str:\"hello world\"\n        }\n    })\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\n
key\u7684\u4f5c\u7528<\/h3>\n\n\n\n
key\u5c31\u662f\u4e00\u4e2a\u6807\u8bc6\uff0c\u50cf\u8eab\u4efd\u8bc1\u53f7\u7801<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>\u57fa\u672c\u5217\u8868<\/title>\n    <!-- \u5f15\u5165Vue -->\n    <script type=\"text\/javascript\" src=\"..\/js\/vue.js\"><\/script>\n<\/head>\n\n<body>\n    <!--\u51c6\u5907\u597d\u4e00\u4e2a\u5bb9\u5668-->\n    <div id=\"root\">\n        <h2>\u4eba\u5458\u5217\u8868<\/h2>\n        <button @click.once=\"addPerson\">\u65b0\u589e\u4eba\u5458<\/button>\n        <ul>\n            <li v-for=\"(p, index) of persons\" :key=\"index\"> <!-- \u7531\u4e8e\u9875\u9762\u91cd\u65b0\u6e32\u67d3\u5bfc\u81f4\u7d22\u5f15\u503c\u91cd\u7f6e -->\n                {{ p.name }} - {{p.age}}\n                <input type=\"text\">\n            <\/li>\n        <\/ul>\n\n    <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n    Vue.config.productionTip = false\/\/\u963b\u6b62vue\u5728\u542f\u52a8\u65f6\u751f\u6210\u751f\u4ea7\u63d0\u793a\u3002\n\n    new Vue({\n        el: '#root',\n        data: {\n            persons: [\n                \/\/\u6211\u4eec\u628a\u6570\u636e\u4f20\u7ed9\u670d\u52a1\u5668\uff0c\u670d\u52a1\u5668\u628a\u6570\u636e\u653e\u5728\u6570\u636e\u5e93\u91cc\uff0c\u6570\u636e\u5e93\u4f1a\u751f\u6210id\n                { id: 1, name: '\u5f20\u4e09', age: 25 },\n                { id: 2, name: '\u674e\u56db', age: 23 },\n                { id: 3, name: '\u738b\u4e94', age: 28 }\n            ]\n        },\n        methods: {\n            addPerson() {\n                const p = { id: '004', name: '\u674e\u56db', age: 26 }\n                thispersons.unshift(p)\/\/key\u7684\u503c\u53ef\u4ee5\u662f\u4efb\u610f\u7c7b\u578b\uff0c\u4f46\u5fc5\u987b\u552f\u4e00\n            }\n        },\n    })\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u4fee\u6539\u4e3a <li v-for=\"(p, index) of persons\" :key=\"p-id\"> \u56e0\u4e3aid\u548c\u540e\u9762\u7684\u6570\u636e\u90fd\u662f\u4e00\u4e00\u7ed1\u5b9a\u6b7b\u7684\uff0c\u5373\u4f7f\u64cd\u4f5c\u4e5f\u4e0d\u4f1a\u51fa\u95ee\u9898\u3002\u4f46\u662findex\u662f\u6d3b\u7684\uff0c\u8c01\u5728\u7b2c\u4e00\u4f4d\uff0c\u8c01\u7684index\u5c31\u662f0\u3002\u672c\u6765\u5f20\u4e09\u7684index\u662f0\uff0c\u4f46\u662f\u6dfb\u52a0\u4e86\u8001\u5218\uff0c\u6240\u4ee5\u73b0\u5728\u8001\u5218\u7684index\u624d\u662f0<\/p>\n\n\n\n
\u54b1\u4fe9\u8fd8\u4e00\u6837\uff0c\u6211\u5c31\u4e0d\u518d\u53d8\u5566\uff1a\u5bf9\u6bd4\u865a\u62dfDOM\uff0c\u7ed3\u679c\u51b3\u5b9a\u8fd8\u662f\u7528\u4e4b\u524d\u7684input<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
id\u5b58\u5728\u4e8e\u6570\u636e\u5185\u90e8, \u662f\u552f\u4e00\u4e0d\u53d8\u7684, \u800cindex\u968f\u7740\u6570\u636e\u7684\u589e\u52a0\u53ef\u80fd\u4f1a\u5bfc\u81f4\u6539\u53d8<\/strong><\/p>\n\n\n\n
\u9762\u8bd5\u9898\uff1areact\u3001vue\u4e2d\u7684key\u6709\u4ec0\u4e48\u4f5c\u7528\uff1f(key\u7684\u5185\u90e8\u539f\u7406)
1 .\u865a\u62dfDOM\u4e2dkey\u7684\u4f5c\u7528\uff1a
   key\u662f\u865a\u62dfDOM\u5bf9\u8c61\u7684\u6807\u8bc6\uff0c\u5f53\u6570\u636e\u53d1\u751f\u53d8\u5316\u65f6\uff0cVue\u4f1a\u6839\u636e\u3010\u65b0\u6570\u636e\u3011\u751f\u6210\u3010\u65b0\u7684\u865a\u62dfDOM\u3011\uff0c
\u968f\u540eVue\u8fdb\u884c\u3010\u65b0\u865a\u62dfDOM\u3011\u4e0e\u3010I\u65e5\u865a\u62dfDOM\u3011\u7684\u5dee\u5f02\u6bd4\u8f83\uff0c\u6bd4\u8f83\u89c4\u5219\u5982\u4e0b\uff1a
2 \u6bd4\u8f83\u89c4\u5219
(1) . \u865a\u62dfDOM\u4e2d\u627e\u5230\u4e86\u4e0e\u65b0\u865a\u62dfDOM\u76f8\u540c\u7684key\uff1a
         \u2460\u2022\u82e5\u865a\u62dfDOM\u4e2d\u5185\u5bb9\u6ca1\u53d8\uff0c\u76f4\u63a5\u4f7f\u5ddd\u4e4b\u524d\u7684\u771f\u5b9eDOM!
         \u2461.\u82e5\u865a\u62dfDOM\u4e2d\u5185\u5bb9\u53d8\u4e86\uff0c\u5219\u751f\u6210\u65b0\u7684\u771f\u5b9eDOM,\u968f\u540e\u66ff\u6362\u6389\u9875\u9762\u4e2d\u4e4b\u524d\u7684\u771f\u5b9eDOM\u3002
(2) .\u65e7\u865a\u62dfDOM\u4e2d\u672a\u627e\u5230\u4e0e\u65b0\u865a\u62dfDOM\u76f8\u540c\u7684key
        \u521b\u5efa\u65b0\u7684\u771f\u5b9eDOM\uff0c\u968f\u540e\u6e32\u67d3\u5230\u5230\u9875\u9762\u3002
3 \u2022\u7528index\u4f5c\u4e3akey\u53ef\u80fd\u4f1a\u5f15\u53d1\u7684\u95ee\u89ca
        1 .\u82e5\u5bf9\u6570\u636e\u8fdb\u884c\uff1a\u9006\u5e8f\u6dfb\u52a0\u3001\u9006\u5e8f\u5220\u9664\u7b49\u7834\u574f\u8054\u5e8f\u64cd\u4f5c\uff1a
        \u4f1a\u4ea7\u751f\u6ca1\u6709\u5fc5\u8981\u7684\u771f\u5b9eDOM\u66f4\u65b0==> \u754c\u9762\u6548\u679c\u6ca1\u95ee\u9898\uff0c\u4f46\u6548\u7387\u4f4e\u3002
        2 .\u5982\u679c\u7ed3\u6784\u4e2d\u8fd8\u5305\u542b\u8f93\u5165\u7c7b\u7684DOM:
        \u4f1a\u4ea7\u751f\u9519\u8befDOM\u66f4\u65ad==> \u754c\u9762\u6709\u95ee\u51f0
4.\u5f00\u53d1\u4e2d\u5982\u4f55\u9009\u62e9key?:
        1 .\u6700\u597d\u4f7f\u7528\u6bcf\u6761\u6570\u636e\u7684\u552f \u6807\u8bc6\u4f5c\u4e3akey,\u6bd4\u5982id\u3001\u624b\u673a\u53f7\u3001\u8eab\u4efd\u8bc1\u53f7\u3001\u5b66\u53f7\u7b49\u552f\u2022\u503c.
        2 .\u5982\u679c\u4e0d\u5b58\u5728\u5bf9\u6570\u636e\u7684\u9006\u65b9\u6dfb\u52a0\u3001\u9006\u65b9\u5220\u9664\u7b49\u7834\u574f\u6562\u5e8f\u64cd\u4f5c\uff0c\u4ec5\u7528\u4e8e\u6e32\u67d3\u5217\u8868\u7528\u4e8e\u5c55\u793a\uff0c
        \u4f7f\u7528index\u4f5c\u4e3akey\u662f\u6ca1\u6709\u95f7\u7fd8\u7684.<\/p>\n\n\n\n
\u5217\u8868\u8fc7\u6ee4<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>\u57fa\u672c\u5217\u8868<\/title>\n    <!-- \u5f15\u5165Vue -->\n    <script type=\"text\/javascript\" src=\"..\/js\/vue.js\"><\/script>\n<\/head>\n\n<body>\n    <!--\u51c6\u5907\u597d\u4e00\u4e2a\u5bb9\u5668-->\n    <div id=\"root\">\n        <h2>\u4eba\u5458\u5217\u8868<\/h2>\n        <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u59d3\u540d\" v-model=\"searchName\">\n        <ul>\n            <li v-for=\"(p, index) of filPerson\" :key=\"index\">\n                {{ p.name }} - {{p.age}}\n            <\/li>\n        <\/ul>\n\n    <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n    Vue.config.productionTip = false\/\/\u963b\u6b62vue\u5728\u542f\u52a8\u65f6\u751f\u6210\u751f\u4ea7\u63d0\u793a\u3002\n\n    new Vue({\n        el: '#root',\n        data: {\n            keyWord: '',\n            persons: [\n                { id: '001', name: '\u9a6c\u51ac\u6885', age: 18, sex: '\u5973' },\n                { id: '002', name: '\u5468\u51ac\u96e8', age: 19, sex: '\u5973' },\n                { id: '003', name: '\u5468\u6770\u4f26', age: 20, sex: '\u7537' },\n                { id: '004', name: '\u6e29\u5146\u4f26', age: 21, sex: '\u5973' }\n            ],\n            filPerson: [],\/\/\n        },\n        watch: {\/\/computed\u80fd\u5b9e\u73b0\u7684\uff0cwatch\u90fd\u80fd\u5b9e\u73b0\n            keyWord(val) {\n                this.persons = this.persons.filter((p) => {\n                    return p.name.indexOf(val) !== -1\/\/indexOf\u65b9\u6cd5\u7528\u6765\u67e5\u627e\u5b57\u7b26\u4e32\u4e2d\u662f\u5426\u5b58\u5728\u5b50\u4e32\uff0c\u8fd4\u56de-1\u8868\u793a\u4e0d\u5b58\u5728\uff0c\u8fd4\u56de\u5176\u4ed6\u503c\u8868\u793a\u5b58\u5728\u3002,\n                })\n                \n            }\n        }\n    })\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\n
\u7531\u4e8epersons\u5305\u542b\u7a7a\u5b57\u7b26\u4e32\uff0c\u6240\u4ee5\u641c\u7d22\u5b8c\u6bd5\u540e\u4f1a\u51fa\u73b0\u6240\u6709\u7684\u3002\u5373\u4ec0\u4e48\u90fd\u6ca1\u6709-\u300b\u6b63\u786e\u7ed3\u679c-\u300b\u6240\u6709\u7ed3\u679c\uff0c\u4fee\u6539\u4e00\u4e0b<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>\u57fa\u672c\u5217\u8868<\/title>\n    <!-- \u5f15\u5165Vue -->\n    <script type=\"text\/javascript\" src=\"..\/js\/vue.js\"><\/script>\n<\/head>\n\n<body>\n    <!--\u51c6\u5907\u597d\u4e00\u4e2a\u5bb9\u5668-->\n    <div id=\"root\">\n        <h2>\u4eba\u5458\u5217\u8868<\/h2>\n        <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u59d3\u540d\" v-model=\"searchName\">\n        <ul>\n            <li v-for=\"(p, index) of filPerson\" :key=\"index\">\n                {{ p.name }} - {{p.age}}\n            <\/li>\n        <\/ul>\n\n    <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n    Vue.config.productionTip = false\/\/\u963b\u6b62vue\u5728\u542f\u52a8\u65f6\u751f\u6210\u751f\u4ea7\u63d0\u793a\u3002\n\n    new Vue({\n        el: '#root',\n        data: {\n            keyWord: '',\n            persons: [\n                { id: '001', name: '\u9a6c\u51ac\u6885', age: 18, sex: '\u5973' },\n                { id: '002', name: '\u5468\u51ac\u96e8', age: 19, sex: '\u5973' },\n                { id: '003', name: '\u5468\u6770\u4f26', age: 20, sex: '\u7537' },\n                { id: '004', name: '\u6e29\u5146\u4f26', age: 21, sex: '\u5973' }\n            ],\n            filPerson: [],\/\/\n        },\n        watch: {\/\/computed\u80fd\u5b9e\u73b0\u7684\uff0cwatch\u90fd\u80fd\u5b9e\u73b0\n            keyword: {\n                immediate: true,\n                Handle(val) {\n                    this.persons = this.persons.filter((p) => {\n                        return p.name.indexOf(val) !== -1\/\/indexOf\u65b9\u6cd5\u7528\u6765\u67e5\u627e\u5b57\u7b26\u4e32\u4e2d\u662f\u5426\u5b58\u5728\u5b50\u4e32\uff0c\u8fd4\u56de-1\u8868\u793a\u4e0d\u5b58\u5728\uff0c\u8fd4\u56de\u5176\u4ed6\u503c\u8868\u793a\u5b58\u5728\u3002,\n                    })\n\n                }\n            }\n        }\n    })\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\n
computed\u770b\u53ef\u4ee5<\/p>\n\n\n\n
\u5217\u8868\u6392\u5e8f<\/h3>\n\n\n\n
\u5b9e\u9645\u5f00\u53d1\u4ee5\u540e\u7aef\u6392\u5e8f\u4e3a\u4e3b\uff0c\u56e0\u4e3a\u524d\u7aef\u4e00\u6b21\u4e0d\u53ef\u80fd\u8bf7\u6c42\u6240\u6709\u6570\u636e\uff0c\u800c\u7528\u6237\u60f3\u770b\u5230\u7684\u6392\u5e8f\u4e00\u822c\u90fd\u662f\u6240\u6709\u6570\u636e\u7684\u6392\u5e8f\uff0c\u6240\u4ee5\u901a\u5e38\u7531\u540e\u7aef\u6392\u5e8f\uff0c\u6570\u636e\u5e93\u51e0\u5341\u4e0a\u767e\u7684\u6570\u636e\uff0c\u524d\u7aef\u4e00\u6b21\u4e5f\u5c31\u8bf7\u6c4220\u6761\u5de6\u53f3<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>\u57fa\u672c\u5217\u8868<\/title>\n    <!-- \u5f15\u5165Vue -->\n    <script type=\"text\/javascript\" src=\"..\/js\/vue.js\"><\/script>\n<\/head>\n\n<body>\n    <!--\u51c6\u5907\u597d\u4e00\u4e2a\u5bb9\u5668-->\n    <div id=\"root\">\n        <h2>\u4eba\u5458\u5217\u8868<\/h2>\n        <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u59d3\u540d\" v-model=\"keyWord\">\n        <button @click=\"sortType=2\">\u6309\u5e74\u9f84\u5347\u5e8f<\/button>\n        <button @click=\"sortType=1\">\u6309\u59d3\u540d\u964d\u5e8f<\/button>\n        <button @click=\"sortType=0\">\u9ed8\u8ba4\u6392\u5e8f<\/button>\n        <ul>\n            <li v-for=\"(p, index) of filPerson\" :key=\"index\">\n                {{ p.name }} - {{p.age}} - {{p.sex}}\n            <\/li>\n        <\/ul>\n\n    <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n    Vue.config.productionTip = false\/\/\u963b\u6b62vue\u5728\u542f\u52a8\u65f6\u751f\u6210\u751f\u4ea7\u63d0\u793a\u3002\n\n    new Vue({\n        el: '#root',\n        data: {\n            keyWord: '',\n            sortType: 0,\/\/0\u8868\u793a\u9ed8\u8ba4\u6392\u5e8f\uff0c1\u8868\u793a\u6309\u59d3\u540d\u964d\u5e8f\uff0c2\u8868\u793a\u6309\u5e74\u9f84\u5347\u5e8f\n            persons: [\n                { id: '001', name: '\u9a6c\u51ac\u6885', age: 18, sex: '\u5973' },\n                { id: '002', name: '\u5468\u51ac\u96e8', age: 19, sex: '\u5973' },\n                { id: '003', name: '\u5468\u6770\u4f26', age: 20, sex: '\u7537' },\n                { id: '004', name: '\u6e29\u5146\u4f26', age: 21, sex: '\u5973' }\n            ]\n\n        },\n        computed: {\n            filPerons() {\n                const arr = this.persons.filter((p) => {\n                    return p.name.indexOf(this.keyWord) !== -1\n                })\n                \/\/ \u5224\u65ad\u4e00\u4e0b\u662f\u5426\u9700\u8981\u6392\u5e8fI\n                if (this.sortType) {\n                    arr.sort((p1, p2) => {\n                        return this.sortType == 1 \uff1f p2.age - p1.age \uff1a p1.age - p2.age\n                    })\n                }\n                return arr\n            }\n        }\n    })\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\n
vue\u76d1\u6d4b\u7684\u539f\u7406<\/h1>\n\n\n\n
033_\u5c1a\u7845\u8c37Vue\u6280\u672f_\u66f4\u65b0\u65f6\u7684\u4e00\u4e2a\u95ee\u9898_\u54d4\u54e9\u54d4\u54e9_bilibili<\/a>\u8fd9\u662f\u4e00\u5b9a\u5bfc\u5165<\/p>\n\n\n\n
data\u91cc\u7684\u6570\u636e\u5728_data\u91cc\uff0c_data\u7684\u6570\u636e\u8981get name\u548cset name\u6765\u83b7\u53d6\u548c\u4fee\u6539\uff0c\u6a21\u677f\u89e3\u6790\uff0c\u751f\u6210\u65b0\u7684\u865a\u62dfDOM\uff0c\u65b0\u65e7\u865a\u62dfDOM\u5bf9\u6bd4\uff0c\u66f4\u65b0\u9875\u9762 \u200b<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u200b<\/p>\n\n\n\n
 \u65e0\u9650\u9012\u5f52<\/strong><\/p>\n\n\n\n
034_\u5c1a\u7845\u8c37Vue\u6280\u672f_Vue\u76d1\u6d4b\u6570\u636e\u7684\u539f\u7406_\u5bf9\u8c61_\u54d4\u54e9\u54d4\u54e9_bilibili<\/a>\u8fd9\u662f\u6a21\u4effjs\u5199\u4e86vue <\/p>\n\n\n\n
\u7ed9\u51fa\u4e86\u5c31\u662f\u628aobj\u7684\u6240\u6709\u5c5e\u6027\uff0c\u901a\u8fc7forEach()\u8f6c\u79fb\u5230obs\u5bf9\u8c61\u5f53\u4e2d\uff0c\u7136\u540e\u4e8c\u8005\u901a\u8fc7get()\u548cset()\u65b9\u6cd5\u53d1\u751f\u5173\u8054\u3002<\/p>\n\n\n\n
vue\u5bf9set\u7684\u76d1\u6d4b<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <title>vue<\/title>\n    <script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script>\n<\/head>\n\n<body>\n    <div id=\"root\">\n        <h2>\u5b66\u6821\u540d\u79f0:{{name}}<\/h2>\n        <h2>\u5b66\u6821\u5730\u5740:{{address}}<\/h2>\n        <hr\/>\n        <h2>\u5b66\u751f\u540d\u5b57\uff1a{{student.name}}<\/h2>\n        <h2>\u5b66\u751f\u6027\u522b\uff1a{{student.gender}}<\/h2><!-- vm\u91cc\u9762\u6ca1\u6709\u4e5f\u4e0d\u62a5\u9519\uff0cundefined\u5728vue\u4e0d\u663e\u793a-->\n        <!-- <h2>\u5b66\u751f\u6027\u522b\uff1a{{gender}}<\/h2>\u62a5\u9519\uff0c\u56e0\u4e3a\u4e0d\u5b58\u5728gender-->\n        <h2>\u5b66\u751f\u5e74\u9f84\uff1a\u771f\u5b9e{{student.age.rAge}}\uff0c\u5bf9\u5916{{student.age.sAge}}<\/h2>\n        <h2>\u670b\u53cb<\/h2>\n        <ul>\n            <li v-for=\"f in student.friend\" :key=\" index\">\n                {{f.name}}--{{f.age}}\n            <\/li>\n        <\/ul>\n    <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n    Vue.config.productionTip = false;\/\/\u963b\u6b62 vue \u5728\u542f\u52a8\u65f6\u751f\u6210\u751f\u4ea7\u63d0\u793a\n\n    const vm = new Vue({\n        el: '#root',\n        data: {\n            name: '\u5c1a\u7845\u8c37',\n            address: '\u5317\u4eac\u5e02',\n            student: {\n                name: '\u5f20\u4e09',\n                age: {\n                    rAge: 20,\n                    sAge: 18,\n                },\n                friend: [\n                    { name: '\u674e\u56db', age: 21 },\n                    { name: '\u738b\u4e94', age: 22 },\n\n                ]\n            }\n        }\n    })\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u200b<\/p>\n\n\n\n
  \u7b80\u800c\u8a00\u4e4b\uff0c\u5fc5\u987b\u8981\u5728data\u5bf9\u8c61\u91cc\u7684\u5c5e\u6027\u624d\u80fd\u88ab\u76d1\u542c\u5bf9\u8c61\u6570\u636e\u52ab\u6301\uff0c\u7136\u540e\u624d\u80fd\u8bbe\u7f6eset\u65b9\u6cd5\u6765\u6e32\u67d3\u754c\u9762<\/p>\n\n\n\n
 \u53ef\u4ee5\u4f7f\u7528Vue.set\uff08target\uff0ckey\uff0cval\uff09\u6765\u5b9e\u73b0\u6dfb\u52a0\uff0c\u5982\u4e0a\u9762\u7684\u4ee3\u7801             Vue.set(vm._data.student,'sex','\u7537')<\/strong><\/p>\n\n\n\n
\u6570\u636e\u4ee3\u7406\uff0c\u901a\u8fc7\u6570\u636e\u4ee3\u7406\uff0c\u5c06\u5c5e\u6027\u79fb\u5230vm\u5b9e\u4f8b\u5bf9\u8c61\u4e2d\uff0c\u5c31\u53efvm.$set(vm.student,'sex','\u5973')<\/p>\n\n\n\n
vue.set\u6709\u7f3a\u9677\uff1a \u53ea\u80fd\u7ed9vm\u7684data\u91cc\u9762\u7684\u5bf9\u8c61\u6dfb\u52a0\u5c5e\u6027<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <title>vue<\/title>\n    <script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script>\n<\/head>\n\n<body>\n    <div id=\"root\">\n        <h2>\u5b66\u6821\u540d\u79f0:{{name}}<\/h2>\n        <h2>\u5b66\u6821\u5730\u5740:{{address}}<\/h2>\n        <h2>\u6821\u957f\u662f\uff1a{{leader}}<\/h2>\n        <hr\/>\n        <h2>\u5b66\u751f\u540d\u5b57\uff1a{{student.name}}<\/h2>\n        <button @click=\"addsex\">\u6dfb\u52a0\u4e00\u4e2a\u6027\u522b\u5c5e\u6027 <\/button>\n        <h2>\u5b66\u751f\u6027\u522b\uff1a{{student.gender}}<\/h2><!-- vm\u91cc\u9762\u6ca1\u6709\u4e5f\u4e0d\u62a5\u9519\uff0cundefined\u5728vue\u4e0d\u663e\u793a-->\n        <!-- <h2>\u5b66\u751f\u6027\u522b\uff1a{{gender}}<\/h2>\u62a5\u9519\uff0c\u56e0\u4e3a\u4e0d\u5b58\u5728gender-->\n        <h2>\u5b66\u751f\u5e74\u9f84\uff1a\u771f\u5b9e{{student.age.rAge}}\uff0c\u5bf9\u5916{{student.age.sAge}}<\/h2>\n        <h2>\u670b\u53cb<\/h2>\n        <ul>\n            <li v-for=\"(f, index) in student.friend\" :key=\" index\">\n                {{f.name}}--{{f.age}}\n            <\/li>\n        <\/ul>\n    <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n    Vue.config.productionTip = false;\/\/\u963b\u6b62 vue \u5728\u542f\u52a8\u65f6\u751f\u6210\u751f\u4ea7\u63d0\u793a\n\n    const vm = new Vue({\n        el: '#root',\n        data: {\n            name: '\u5c1a\u7845\u8c37',\n            address: '\u5317\u4eac\u5e02',\n            student: {\n                name: '\u5f20\u4e09',\n                age: {\n                    rAge: 20,\n                    sAge: 18,\n                },\n                friend: [\n                    { name: '\u674e\u56db', age: 21 },\n                    { name: '\u738b\u4e94', age: 22 },\n\n                ]\n            },\n            methods:{\n                addsex(){\n                    this.$set(this.student,'gender','\u7537')\n                }\n            }\n        }\n    })\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
vue\u5bf9\u6570\u7ec4\u7684\u76d1\u6d4b<\/h3>\n\n\n\n
Vue.set(vm._data.student.hobby,1,'\u7bee\u7403')\u53ef\u4ee5\u5bf9\u6570\u7ec4\u6539\u53d8\uff0c\u9875\u9762\u4e5f\u66f4\u65b0\uff0c\u7c7b\u4f3ccpp\u7684\u65b9\u6cd5\uff0c\u4e00\u4e0b\u641c\u5230\u4e86 <\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <title>vue<\/title>\n    <script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script>\n<\/head>\n\n<body>\n    <div id=\"root\">\n        <h2>\u5b66\u6821\u540d\u79f0:{{name}}<\/h2>\n        <h2>\u5b66\u6821\u5730\u5740:{{address}}<\/h2>\n        <h2>\u6821\u957f\u662f\uff1a{{leader}}<\/h2>\n        <hr \/>\n        <h2>\u5b66\u751f\u540d\u5b57\uff1a{{student.name}}<\/h2>\n        <button @click=\"addsex\">\u6dfb\u52a0\u4e00\u4e2a\u6027\u522b\u5c5e\u6027 <\/button>\n        <h2>\u5b66\u751f\u6027\u522b\uff1a{{student.gender}}<\/h2><!-- vm\u91cc\u9762\u6ca1\u6709\u4e5f\u4e0d\u62a5\u9519\uff0cundefined\u5728vue\u4e0d\u663e\u793a-->\n        <!-- <h2>\u5b66\u751f\u6027\u522b\uff1a{{gender}}<\/h2>\u62a5\u9519\uff0c\u56e0\u4e3a\u4e0d\u5b58\u5728gender-->\n        <h2>\u5b66\u751f\u5e74\u9f84\uff1a\u771f\u5b9e{{student.age.rAge}}\uff0c\u5bf9\u5916{{student.age.sAge}}<\/h2>\n        <h2>\u670b\u53cb<\/h2>\n        <ul>\n            <li v-for=\"(f, index) in student.friend\" :key=\" index\">\n                {{f.name}}--{{f.age}}\n            <\/li>\n        <\/ul>\n    <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n    Vue.config.productionTip = false;\/\/\u963b\u6b62 vue \u5728\u542f\u52a8\u65f6\u751f\u6210\u751f\u4ea7\u63d0\u793a\n\n    const vm = new Vue({\n        el: '#root',\n        data: {\n            school: {\n                name: '\u5c1a\u7845\u8c37',\n                address: '\u5317\u4eac\u5e02'\n            },\n            student: {\n                name: '\u5f20\u4e09',\n                age: {\n                    rAge: 20,\n                    sAge: 18,\n                },\n                hobby: {\n                    h1: '\u5531',\/\/\u5728\u63a7\u5236\u53f0\u662f\u6ca1\u6709h1h2\u7684getter\u548csetter\u7684\uff0c\u4fee\u6539\u4e0d\u4f1a\u89e6\u53d1\u9875\u9762\u66f4\u65b0\n                    h2: '\u8df3',\/\/\u5c31\u662fvm.student.hobby.h1 = '\u7bee\u7403'\u4e0d\u4f1a\u89e6\u53d1\u9875\u9762\u66f4\u65b0\uff0c\u53ea\u5728\u63a7\u5236\u53f0\u66f4\u65b0\n                    h3: 'rap'\n                },\n\n                friend: [\n                    { name: '\u674e\u56db', age: 21 },\n                    { name: '\u738b\u4e94', age: 22 },\n\n                ]\n            },  \n            methods: {\/\/vue\u91cd\u5199\u4e86\u6570\u7ec4\u7684\u65b9\u6cd5\uff0c\u6682\u65f6\u672a\u5b8c\u5de5\n                addsex() {\n                    this.$set(this.student, 'gender', '\u7537')\n                }\n            }\n        }\n    })\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
 \u4ee3\u7801\u672a\u5b8c\u5de5\uff01\uff01\uff01\uff01\uff01<\/strong><\/p>\n\n\n\n
\u603b\u7ed3<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <title>vue<\/title>\n    <script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script>\n<\/head>\n\n<body>\n    <div id=\"root\">\n        <h1>\u5b66\u751f\u4fe1\u606f<\/h1>\n        <button @click=\"student.age++\">\u5e74\u9f84+1\u5c81<\/button><br \/>\n        <button @click=\"addSex\">\u6dfb\u52a0\u6027\u522b\u5c5e\u6027\uff0c\u9ed8\u8ba4\u503c\uff1a\u7537<\/button><br \/>\n        <button @click=\"student.sex='\u672a\u77e5'\">\u4fee\u6539\u6027\u522b<\/button><br \/>\n        <button @click=\"addFriend\">\u5728\u5217\u8868\u9996\u4f4d\u6dfb\u52a0\u4e00\u4e2a\u670b\u53cb<\/button><br \/>\n        <button @click=\"updataFirstFriendName\">\u4fee\u6539\u7b2c\u4e00\u4e2a\u670b\u53cb\u7684\u540d\u5b57\u4e3a\uff1a\u5f20\u4e09<\/button><br \/>\n        <button @click=\"addHobby\">\u6dfb\u52a0\u4e00\u4e2a\u7231\u597d<\/button><br \/>\n        <button @click=\"drive\">\u4fee\u6539\u7b2c\u4e00\u4e2a\u7231\u597d\u4e3a\uff1a\u5f00\u8f66<\/button><br \/>\n        <h3>\u59d3\u540d\uff1a{{student.name}}<\/h3>\n        <h3>\u5e74\u9f84\uff1a{{student.age}}<\/h3>\n        <h3 v-if=\"student.sex\">\u6027\u522b\uff1a{{student.sex}}<\/h3>\n        <h3>\u7231\u597d\uff1a<\/h3>\n        <ul>\n            <li v-for=\"(h,index) in student.hobby\" :key=\"index\">\n                {{h}}\n            <\/li>\n        <\/ul>\n        <h3>\u670b\u53cb\u4eec\uff1a<\/h3>\n        <ul>\n            <li v-for=\"(f,index) in student.friends\" :key=\"index\">\n                {{f.name}}--{{f.age}}\n            <\/li>\n        <\/ul>\n    <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n    Vue.config.productionTip = false;\/\/\u963b\u6b62 vue \u5728\u542f\u52a8\u65f6\u751f\u6210\u751f\u4ea7\u63d0\u793a\n\n    const vm = new Vue({\n        el: '#root',\n        data: {\n            student: {\n                name: 'tom',\n                age: 18,\n                hobby: ['\u62bd\u70df', '\u559d\u9152', '\u70eb\u5934'],\n                friends: [\n                    { name: 'jerry', age: 35 },\n                    { name: 'tony', age: 36 }\n                ]\n            }\n        },\n        methods: {\n            addSex() {\n                \/\/ Vue.set(this.student,'sex','\u7537')\n                this.$set(this.student, 'sex', '\u7537')\n            },\n            addFriend() {\n                this.student.friends.unshift({ name: 'jack', age: 70 })\n            },\n            updataFirstFriendName() {\n                \/\/this.student.friends[0]=123       error\n                \/\/\u4e0d\u7ba1\u5bf9\u8c61\u5728\u54ea\u513f\uff0c\u6570\u7ec4\u91cc\u4e5f\u884c\uff0c\u6539\u5bf9\u8c61\u5c5e\u6027\u5c31\u80fd\u88ab\u68c0\u6d4b\u5230\uff0c\u4f46\u662f\u6570\u7ec4\u6ca1\u6709\u5c5e\u6027\uff0c\u68c0\u6d4b\u4e0d\u5230\u5f97\u7528\u65b9\u6cd5\u4fee\u6539\uff0c\u6240\u4ee5\u4e0d\u662f\u4e0b\u6807\u95ee\u9898\uff0c\u662f\u770b\u901a\u8fc7\u4e0b\u6807\u62ff\u5230\u4e86\u4ec0\u4e48\u7c7b\u578b\u7684\u6570\u636e\n                this.student.friends[0].name = '\u5f20\u4e09'\n            },\n            addHobby() {\n                this.student.hobby.push('\u770b\u7535\u5f71')\n            },\n            drive() {\n                \/\/this.student.hobby[0] = '\u5f00\u8f66'    error\n                this.student.hobbysplice(0, 1, '\u5f00\u8f66')\n                Vue.set(this.student.hobby, 0, '\u5f00\u8f66')\/\/2\u79cd\u65b9\u6cd5\u90fd\u53ef\u4ee5\n            }\n        }\n    })\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Vue\u76d1\u89c6\u6570\u636e\u7684\u539f\u7406\uff1a
1.vue\u4f1a\u76d1\u89c6data\u4e2d\u6240\u6709\u5c42\u6b21\u7684\u6570\u636e\u3002<\/p>\n\n\n\n
2.\u5982\u4f55\u76d1\u6d4b\u5bf9\u8c61\u4e2d\u7684\u6570\u636e\uff1f
\u901a\u8fc7setter\u5b9e\u73b0\u76d1\u89c6\uff0c\u4e14\u8981\u5728new Vue\u65f6\u5c31\u4f20\u5165\u8981\u76d1\u6d4b\u7684\u6570\u636e\u3002
(1).\u5bf9\u8c61\u4e2d\u540e\u8ffd\u52a0\u7684\u5c5e\u6027\uff0cVue\u9ed8\u8ba4\u4e0d\u505a\u54cd\u5e94\u5f0f\u5904\u7406
(2).\u5982\u9700\u7ed9\u540e\u6dfb\u52a0\u7684\u5c5e\u6027\u505a\u54cd\u5e94\u5f0f\uff0c\u8bf7\u4f7f\u7528\u5982\u4e0bAPI:
Vue.set(target,propertyName\/index,value)\u6216 
vm.$set(target,propertyName\/index,value)<\/p>\n\n\n\n
3\u3002\u5982\u4f55\u76d1\u6d4b\u6570\u7ec4\u4e2d\u7684\u6570\u636e\uff1f
\u901a\u8fc7\u5305\u88f9\u6570\u7ec4\u66f4\u65b0\u5143\u7d20\u7684\u65b9\u6cd5\u5b9e\u73b0\uff0c\u672c\u8d28\u5c31\u662f\u505a\u4e86\u4e24\u4ef6\u4e8b\uff1a
(1).\u8c03\u7528\u539f\u751f\u5bf9\u5e94\u7684\u65b9\u6cd5\u5bf9\u6570\u7ec4\u8fdb\u884c\u66f4\u65b0\u3002
(2).\u91cd\u65b0\u89e3\u6790\u6a21\u677f\uff0c\u8fdb\u800c\u66f4\u65b0\u9875\u9762\u3002<\/p>\n\n\n\n
4.\u5728Vue\u4fee\u6539\u6570\u7ec4\u4e2d\u7684\u67d0\u4e2a\u5143\u7d20\u4e00\u5b9a\u8981\u7528\u5982\u4e0b\u65b9\u6cd5\uff1a
1.\u4f7f\u7528\u8fd9\u4e9bAPI:push()\u3001pop()\u3001shift()\u3001unshift()\u3001splice()\u3001sort()\u3001reverse()
2.Vue.set()\u6216 vm.$set()
\u7279\u522b\u6ce8\u610f\uff1aVue.set()\u548cvm.$set()\u4e0d\u80fd\u7ed9vm \u6216vm\u7684\u6839\u6570\u636e\u5bf9\u8c61 \u6dfb\u52a0\u5c5e\u6027\uff01\uff01\uff01<\/p>\n\n\n\n
filter\u53ef\u4ee5\u589e\u5220\u6539\u67e5\uff0c\u4f46\u662f\u8fc7\u6ee4\u600e\u4e48\u529e\uff1f\uff08\u653e\u5fc3filter\u5728vue3\u91cc\u4f5c\u5e9f\u4e86\uff0c\u8bf4\u660e\u4e0d\u662f\u4e3b\u6d41\u4e86\uff09<\/p>\n\n\n\n
\u4e0a\u9762\u7684\u6309\u94ae\n<button @click=\"removeSmoke\">\u8fc7\u6ee4\u6389\u6240\u6709\u5438\u70df\u7684\u7231\u597d<\/button>\n\n\n\nvm\u52a0\n<script>\nremoveSmoke() {\n                this.student.hobby.filter((h)=>{\n                    return h!='\u62bd\u70df'\/\/\u6240\u6709\u4e0d\u662f\u7531Vue\u6240\u63a7\u5236\u7684\u56de\u8c03\uff0c\u5c3d\u53ef\u80fd\u7684\u5199\u6210\u7bad\u5934\u51fd\u6570\uff0c\u539f\u56e0\u662f\u7bad\u5934\u51fd\u6570\u6ca1\u6709this\u4f1a\u5411\u4e0a\u627e\uff0c\u627e\u5230vm\n                })  \n            }\n<\/script><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\u6570\u636e\u52ab\u6301\u5c31\u662f\u6570\u636e\u5df2\u7ecf\u4ea4\u7ed9vue\u6765\u7ba1\u4e86\uff0c\u64cd\u7eb5\u6570\u636e\u5fc5\u987b\u901a\u8fc7vue\u63d0\u4f9b\u7684\u65b9\u6cd5\u6765\u5b9e\u73b0\uff0c\u6570\u636e\u52ab\u6301\u5e38\u7528\u6709\u4e09\u79cd\uff1aproxy\uff0cdefineProperty\uff0cgetter\u4e0esetter\uff1a\u6570\u636e\u52ab\u6301\u63cf\u8ff0\u7684\u662f\u8fc7\u7a0b\uff0c\u6570\u636e\u4ee3\u7406\u9488\u5bf9\u7684\u662f\u67d0\u6570\u636e<\/p>\n","protected":false},"excerpt":{"rendered":"
vscode\u5b89\u88c5vue3 snippets \u5929\u6c14\u6848\u4f8b \u76d1\u89c6\u5c5e\u6027 \u6df1\u5ea6\u76d1\u89c6 023_\u5c1a\u7845\u8c37Vue\u6280\u672f_\u6df1\u5ea6\u76d1\u89c6_\u54d4\u54e9\u54d4\u54e9_bilib …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"emotion":"","emotion_color":"","title_style":"","license":"","footnotes":""},"categories":[2],"tags":[12,11,10],"class_list":["post-325","post","type-post","status-publish","format-standard","hentry","category-2","tag-js","tag-vue","tag-10"],"_links":{"self":[{"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/posts\/325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eve2333.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=325"}],"version-history":[{"count":0,"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/posts\/325\/revisions"}],"wp:attachment":[{"href":"https:\/\/eve2333.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eve2333.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eve2333.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}