{"id":7756,"date":"2022-11-12T12:42:11","date_gmt":"2022-11-12T04:42:11","guid":{"rendered":"https:\/\/egonlin.com\/?p=7756"},"modified":"2022-11-12T12:42:11","modified_gmt":"2022-11-12T04:42:11","slug":"%e7%ac%ac%e4%ba%8c%e8%8a%82%ef%bc%9avue%e5%9f%ba%e7%a1%80","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=7756","title":{"rendered":"\u7b2c\u4e8c\u8282\uff1aVue\u57fa\u7840"},"content":{"rendered":"

Vue\u4ecb\u7ecd<\/h1>\n

\u4e00 \u6a21\u677f\u8bed\u6cd5<\/h2>\n

1.\u63d2\u503c\u8bed\u6cd5<\/h3>\n

\u8bed\u6cd5\uff1a{{ \u53d8\u91cf\u3001js\u8bed\u6cd5\u3001\u4e09\u76ee\u8868\u8fbe\u5f0f }}<\/h4>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>\u63d2\u503c<\/title>\n    <script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.12\/vue.min.js"><\/script>\n<\/head>\n<body>\n\n<div id="box">\n    <ul>\n        <li>\u5b57\u7b26\u4e32\uff1a{{name}}<\/li>\n        <li>\u6570\u503c\uff1a{{age}}<\/li>\n        <li>\u6570\u7ec4\uff1a{{list1}}<\/li>\n        <li>\u5bf9\u8c61\uff1a{{obj1}}<\/li>\n        <li>\u5b57\u7b26\u4e32\uff1a{{link1}}<\/li>\n        <li>\u8fd0\u7b97\uff1a{{10+20+30+40}}<\/li>\n        <li>\u4e09\u76ee\u8fd0\u7b97\u7b26\uff1a{{10>20?'\u662f':'\u5426'}}<\/li>\n    <\/ul>\n<\/div>\n\n<\/body>\n<script>\n    let vm = new Vue({\n        el: '#box', \/\/ \u5728box\u8fd9\u4e2adiv\u4e2d\u53ef\u4ee5\u5199 vue\u7684\u8bed\u6cd5\n        data: {\n            name: 'Darker', \/\/ \u5b57\u7b26\u4e32\n            age: 18, \/\/ \u6570\u503c\n            list1: [1,2,3,4],   \/\/ \u6570\u7ec4\n            obj1: {name: 'Darker', age: 19}, \/\/ \u5bf9\u8c61\n            link1: '<a href="https:\/\/www.baidu.com">\u767e\u5ea6\u4e00\u4e0b \u4f60\u5c31\u77e5\u9053<\/a>'\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
\"img\"<\/div><\/p>\n
\u4e8c \u6307\u4ee4<\/h2>\n
1.\u6587\u672c\u6307\u4ee4<\/h3>\n\n\n\n\n\n\n\n\n
\u6307\u4ee4<\/th>\n\u91ca\u4e49<\/th>\n<\/tr>\n<\/thead>\n
v-html<\/td>\n\u8ba9HTML\u6e32\u67d3\u6210\u9875\u9762<\/td>\n<\/tr>\n
v-text<\/td>\n\u6807\u7b7e\u5185\u5bb9\u663e\u793ajs\u53d8\u91cf\u5bf9\u5e94\u7684\u503c<\/td>\n<\/tr>\n
v-show<\/td>\n\u653e1\u4e2a\u5e03\u5c14\u503c\uff1a\u4e3a\u771f \u6807\u7b7e\u5c31\u663e\u793a\uff1b\u4e3a\u5047 \u6807\u7b7e\u5c31\u4e0d\u663e\u793a<\/td>\n<\/tr>\n
v-if<\/td>\n\u653e1\u4e2a\u5e03\u5c14\u503c\uff1a\u4e3a\u771f \u6807\u7b7e\u5c31\u663e\u793a\uff1b\u4e3a\u5047 \u6807\u7b7e\u5c31\u4e0d\u663e\u793a<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
v-show\u4e0e v-if\u7684\u533a\u522b\uff1a<\/p>\n
v-show\uff1a\u6807\u7b7e\u8fd8\u5728\uff0c\u53ea\u662f\u4e0d\u663e\u793a\u4e86\uff08display: none\uff09
\nv-if\uff1a\u76f4\u63a5\u64cd\u4f5cDOM\uff0c\u5220\u9664\/\u63d2\u5165 \u6807\u7b7e<\/p>\n<\/blockquote>\n
v-html\uff1a\u8ba9HTML\u6e32\u67d3\u6210\u9875\u9762<\/h4>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>v-html<\/title>\n    <script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.12\/vue.min.js"><\/script>\n<\/head>\n<body>\n\n<div id="box">\n    <ul>\n        <li v-html="link1"><\/li>\n    <\/ul>\n<\/div>\n\n<\/body>\n<script>\n    let vm = new Vue({\n        el: '#box', \/\/ \u5728box\u8fd9\u4e2adiv\u4e2d\u53ef\u4ee5\u5199 vue\u7684\u8bed\u6cd5\n        data: {\n            link1: '<a href="https:\/\/www.baidu.com">\u767e\u5ea6\u4e00\u4e0b \u4f60\u5c31\u77e5\u9053<\/a>'\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
\u3001<\/p>\n
\"img\"<\/div><\/p>\n
v-text\uff1a\u6807\u7b7e\u5185\u5bb9\u663e\u793ajs\u53d8\u91cf\u5bf9\u5e94\u7684\u503c<\/h4>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>v-text<\/title>\n    <script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.12\/vue.min.js"><\/script>\n<\/head>\n<body>\n\n<div id="box">\n    <ul>\n        <li v-text="link1"><\/li>\n    <\/ul>\n<\/div>\n\n<\/body>\n<script>\n    let vm = new Vue({\n        el: '#box', \/\/ \u5728box\u8fd9\u4e2adiv\u4e2d\u53ef\u4ee5\u5199 vue\u7684\u8bed\u6cd5\n        data: {\n            link1: '<a href="https:\/\/www.baidu.com">\u767e\u5ea6\u4e00\u4e0b \u4f60\u5c31\u77e5\u9053<\/a>',\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
\"img\"<\/div><\/p>\n
v-show\uff1a\u663e\u793a\/\u9690\u85cf\u5185\u5bb9<\/h4>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>v-show<\/title>\n    <script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.12\/vue.min.js"><\/script>\n<\/head>\n<body>\n\n<div id="box">\n    <h3>\u6848\u4f8b\uff1a\u63a7\u4ef6\u901a\u8fc7\u6309\u94ae\u6765\u63a7\u5236\u663e\u793a\u548c\u5c0f\u4e8b<\/h3>\n    <button @click="handleClick()">\u70b9\u6211<\/button>\n    <br>\n    <div v-show="isShow">isShow<\/div>\n<\/div>\n\n<\/body>\n<script>\n    let vm = new Vue({\n        el: '#box',\n        data: {\n            isShow: true,\n        },\n        methods: {\n            handleClick(){\n              this.isShow = !this.isShow    \/\/ this\u6307\u7684\u662f\u5f53\u524d\u7684vue\u5bf9\u8c61\n            },\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
\"img\"<\/div><\/p>\n
v-if\uff1a\u663e\u793a\/\u5220\u9664\u5185\u5bb9<\/h4>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>v-if<\/title>\n    <script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.12\/vue.min.js"><\/script>\n<\/head>\n<body>\n\n<div id="box">\n    <h3>\u6848\u4f8b\uff1a\u63a7\u4ef6\u901a\u8fc7\u6309\u94ae\u6765\u63a7\u5236\u663e\u793a\u548c\u6d88\u5931<\/h3>\n    <button @click="handleClick()">\u70b9\u6211<\/button>\n    <br>\n    <div v-if="isCreated">isCreated<\/div>\n<\/div>\n\n<\/body>\n<script>\n    let vm = new Vue({\n        el: '#box',\n        data: {\n            isCreated:true\n        },\n        methods: {\n            handleClick(){\n              this.isCreated = !this.isCreated    \/\/ this\u6307\u7684\u662f\u5f53\u524d\u7684vue\u5bf9\u8c61\n            },\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
\"img\"<\/div><\/p>\n
2.\u4e8b\u4ef6\u6307\u4ee4<\/h3>\n\n\n\n\n\n\n\n
\u6307\u4ee4<\/th>\n\u91ca\u4e49<\/th>\n<\/tr>\n<\/thead>\n
v-on<\/td>\n\u89e6\u53d1\u4e8b\u4ef6\uff08\u4e0d\u63a8\u8350\uff09<\/td>\n<\/tr>\n
@<\/td>\n\u89e6\u53d1\u4e8b\u4ef6\uff08\u63a8\u8350<\/strong>\uff09<\/td>\n<\/tr>\n
@[event]<\/td>\n\u89e6\u53d1event\u4e8b\u4ef6\uff08\u53ef\u4ee5\u662f\u5176\u4ed6\u4efb\u610f\u4e8b\u4ef6<\/a>\uff09<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
v-on:click \u53ef\u4ee5\u7f29\u5199\u6210@click<\/h4>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>\u4e8b\u4ef6\u6307\u4ee4<\/title>\n    <script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.12\/vue.min.js"><\/script>\n<\/head>\n<body>\n\n<div id="box">\n    <button v-on:click="handleClick1">\u70b9\u62111<\/button>\n    <!-- \u4e0b\u9762\u8fd9\u4e2a\u7528\u7684\u591a -->\n    <button @click="handleClick2">\u70b9\u62112<\/button>\n    <!-- \u5982\u679c\u4e0d\u4f20\u53c2\u6570\uff0c\u662f\u6ca1\u6709\u533a\u522b\u7684 -->\n    <button @click="handleClick3()">\u70b9\u62113-1(\u5e26\u62ec\u53f7)<\/button>\n    <!-- \u5982\u679c\u8981\u4f20\u53c2\u6570 -->\n    <button @click="handleClick3(1,22,333)">\u70b9\u62113-2(\u5e26\u62ec\u53f7+\u53c2\u6570)<\/button>\n    <!-- \u4f20\u5165\u4e8b\u4ef6 -->\n    <button @click="handleClick4($event)">\u70b9\u62114(\u5e26\u4e8b\u4ef6\u53c2\u6570)<\/button>\n<\/div>\n\n<\/body>\n<script>\n    let vm = new Vue({\n        el: '#box',\n        data: {\n\n        },\n        methods: {\n            handleClick1() {\n                console.log('\u70b9\u62111')\n            },\n            handleClick2() {\n                console.log('\u70b9\u62112')\n            },\n            handleClick3(a,b,c) {\n                console.log(a,b,c)\n            },\n            handleClick4(event) {\n                console.log(event)\n            },\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
\"img\"<\/div><\/p>\n
3.\u5c5e\u6027\u6307\u4ee4<\/h3>\n\n\n\n\n\n\n
\u6307\u4ee4<\/th>\n\u91ca\u4e49<\/th>\n<\/tr>\n<\/thead>\n
v-bind<\/td>\n\u76f4\u63a5\u5199js\u7684\u53d8\u91cf\u6216\u8bed\u6cd5\uff08\u4e0d\u63a8\u8350\uff09<\/td>\n<\/tr>\n
:<\/td>\n\u76f4\u63a5\u5199js\u7684\u53d8\u91cf\u6216\u8bed\u6cd5\uff08\u63a8\u8350\uff09<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
v-bind:class=’js\u53d8\u91cf’\u53ef\u4ee5\u7f29\u5199\u6210\uff1a:class=’js\u53d8\u91cf’<\/h4>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>\u5c5e\u6027\u6307\u4ee4<\/title>\n    <script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.12\/vue.min.js"><\/script>\n    <style>\n        .red {\n            color: rgba(255, 104, 104, 0.7);\n        }\n        .purple {\n            color: rgba(104, 104, 255, 0.7);\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div id="box">\n    <img v-bind:src="url" alt="" height="100">\n    <br>\n    <button @click="handleClick">\u70b9\u6211\u53d8\u8272<\/button>\n    <div :class="isActive?'red':'purple'">\n        <h1>\u6211\u662f\u4e00\u4e2adiv<\/h1>\n    <\/div>\n<\/div>\n\n<\/body>\n<script>\n    let vm = new Vue({\n        el: '#box',\n        data: {\n            url: 'https:\/\/ss0.bdstatic.com\/70cFvHSh_Q1YnxGkpoWK1HF6hhy\/it\/u=205441424,1768829584&fm=26&gp=0.jpg',\n            change: 'red',\n            isActive: true\n        },\n        methods: {\n            handleClick() {\n                this.isActive = !this.isActive\n            },\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
\"img\"<\/div><\/p>\n
\u4e09 Style \u548c Class<\/h2>\n
\u6570\u636e\u7684\u7ed1\u5b9a<\/h3>\n
\n
\u8bed\u6cd5<\/strong><\/p>\n
:\u5c5e\u6027\u540d=js\u53d8\u91cf\/js\u8bed\u6cd5<\/p>\n
    \n
  • :class=’js\u53d8\u91cf\u3001\u5b57\u7b26\u4e32\u3001js\u6570\u7ec4’<\/li>\n<\/ul>\n
    class\uff1a\u4e09\u76ee\u8fd0\u7b97\u7b26\u3001\u6570\u7ec4\u3001\u5bf9\u8c61{red: true}<\/p>\n
      \n
    • :style=’js\u53d8\u91cf\u3001\u5b57\u7b26\u4e32\u3001js\u6570\u7ec4’<\/li>\n<\/ul>\n
      style\uff1a\u4e09\u76ee\u8fd0\u7b97\u7b26\u3001\u6570\u7ec4[{backgreound: ‘red’},]\u3001\u5bf9\u8c61{background: ‘red’}<\/p>\n<\/blockquote>\n
      <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>Style \u548c Class<\/title>\n    <script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.12\/vue.min.js"><\/script>\n    <style>\n        .red {\n            color: rgba(255, 104, 104, 0.7);\n        }\n        .font-20 {\n            font-size: 20px;\n        }\n        .be-bold {\n            font-weight: bold;\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div id="box">\n    <p>\u6211\u662f\u4e00\u4e2a\u666e\u901a\u7684p\u6807\u7b7e<\/p>\n    <div :class="class_obj">\n        <p>\u6211\u662f\u4e00\u4e2a\u4e0d\u666e\u901a\u7684p\u6807\u7b7e1<\/p>\n    <\/div>\n\n    <button @click="handleClick">\u70b9\u51fb\u653e\u5927\u5b57\u4f53<\/button>\n    <div :style="style_obj">\n        <p>\u6211\u662f\u4e00\u4e2a\u4e0d\u666e\u901a\u7684p\u6807\u7b7e2<\/p>\n    <\/div>\n<\/div>\n\n<\/body>\n<script>\n    let vm = new Vue({\n        el: '#box',\n        data: {\n            \/\/ class_obj: 'red',    \/\/ \u653e1\u4e2a\u662f\u5b57\u7b26\u4e32\n            class_obj: ['red', 'font-20', 'be-bold'],    \/\/ \u653e2\u4e2a\u662f\u6570\u7ec4\n            \/\/ class_obj: { red:true, be-bold:false},    \/\/ \u4e5f\u53ef\u4ee5\u653e\u5bf9\u8c61\n            \/\/ \u6570\u7ec4.push()   \u4ece\u5c3e\u90e8\u6dfb\u52a01\u4e2a\u5143\u7d20\n            \/\/ \u6570\u7ec4.pop()    \u5220\u9664\u6700\u540e1\u4e2a\u5143\u7d20 \u5e76\u8fd4\u56de\n\n            \/\/ \u5bf9\u8c61\u7684\u5199\u6cd5\n            style_obj: {\n                color: 'red',\n                fontSize: '20px'\n            }\n            \/\/ style_obj: [{background:'red'}, {fontSize:'20px'}]\n\n        },\n        methods: {\n            handleClick(){\n                this.style_obj['fontSize']='30px'\n            }\n        }\n\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
      \u4e0b\u65b9\u8bd5\u9a8c\u7684\u547d\u4ee4<\/h5>\n
      vm.class_obj.pop()\nvm.class_obj.pop()\nvm.class_obj.pop()\nvm.class_obj.push('be-bold')\nvm.class_obj.push('red')\nvm.class_obj.push('font-20')<\/code><\/pre>\n
      \"img\"<\/div><\/p>\n
      \u56db \u6761\u4ef6\u6e32\u67d3<\/h2>\n\n\n\n\n\n\n\n
      \u6307\u4ee4<\/th>\n\u91ca\u4e49<\/th>\n<\/tr>\n<\/thead>\n
      v-if<\/td>\n\u76f8\u5f53\u4e8e\uff1a if<\/td>\n<\/tr>\n
      v-else<\/td>\n\u76f8\u5f53\u4e8e\uff1aelse<\/td>\n<\/tr>\n
      v-else-if<\/td>\n\u76f8\u5f53\u4e8e\uff1aelse if<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>if\u3001else if\u3001else<\/title>\n    <script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.12\/vue.min.js"><\/script>\n<\/head>\n<body>\n<div id="box">\n    <h3>\u6848\u4f8b\uff1aif\u3001else if\u3001else<\/h3>\n    <h2 v-if="type==='1'">A<\/h2>\n    <h2 v-else-if="type==='2'">B<\/h2>\n    <h2 v-else>C<\/h2>\n<\/div>\n<\/body>\n<script>\n    let vm = new Vue({\n        el: '#box',\n        data: {\n            type: '1',\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
      \"img\"<\/div><\/p>\n
      \u4e94 \u5217\u8868\u6e32\u67d3<\/h2>\n
      1. v-if+v-for+v-else\u63a7\u5236\u8d2d\u7269\u8f66\u5546\u54c1\u7684\u663e\u793a<\/h3>\n
      <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>v-if + v-for + v-else\u63a7\u5236\u8d2d\u7269\u8f66\u5546\u54c1\u7684\u663e\u793a<\/title>\n    <script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.12\/vue.min.js"><\/script>\n    <style>\n        table, td {\n            border: 1px solid black;\n            text-align: center;\n        }\n    <\/style>\n<\/head>\n<body>\n<div id="box">\n    <h2>\u6211\u7684\u8d2d\u7269\u8f66<\/h2>\n    <button @click="show">\u5237\u65b0\u8d2d\u7269\u8f66<\/button>\n    <br><br>\n    <table v-if="!shopping_car.length==0">\n        <tr>\n            <td>\u5546\u54c1\u540d\u79f0<\/td>\n            <td>\u4ef7\u683c<\/td>\n        <\/tr>\n        <tr v-for="item in shopping_car">\n            <td>{{item.name}}<\/td>\n            <td>{{item.price}}<\/td>\n        <\/tr>\n    <\/table>\n    <table v-else>\n        <tr>\n            <td>\u5546\u54c1\u540d\u79f0<\/td>\n            <td>\u4ef7\u683c<\/td>\n        <\/tr>\n        <tr>\n            <td>\u6682\u65e0\u4fe1\u606f<\/td>\n            <td>\u6682\u65e0\u4fe1\u606f<\/td>\n        <\/tr>\n    <\/table>\n<\/div>\n<\/body>\n<script>\n    let vm = new Vue({\n        el: '#box',\n        data: {\n            isActive: false,\n            shopping_car: []\n        },\n        methods: {\n            show() {\n                this.shopping_car = [\n                    {name: 'Threadripper 3990X', price: '29999\u5143'},\n                    {name: 'NVIDIA RTX 8000', price: '59999\u5143'},\n                    {name: 'ROG ZENITH II EXTREME', price: '9999\u5143'},\n                ]\n            }\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
      \"img\"<\/div><\/p>\n
      2. v-for\u904d\u5386\u6570\u7ec4(\u5217\u8868)\u3001\u5bf9\u8c61(\u5b57\u5178)\u3001\u6570\u5b57<\/h3>\n
      <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>v-for\u904d\u5386\u6570\u7ec4(\u5217\u8868)\u3001\u5bf9\u8c61(\u5b57\u5178)<\/title>\n    <script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.12\/vue.min.js"><\/script>\n    <style>\n        table, td {\n            border: 1px solid black;\n            text-align: center;\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div id="box">\n    <h2>\u6570\u7ec4\uff08\u5217\u8868\uff09for\u5faa\u73af\u904d\u5386<\/h2>\n    <ul>\n        <li v-for="(value,index) in list_test">{{index}} \u2014\u2014 {{value}}<\/li>\n    <\/ul>\n\n    <h2>\u5bf9\u8c61\uff08\u5b57\u5178\uff09for\u5faa\u73af\u904d\u5386<\/h2>\n    <ul>\n        <li v-for="(value,key) in dic_test">{{key}} \u2014\u2014 {{value}}<\/li>\n    <\/ul>\n\n    <h2>\u6570\u7ec4\uff08\u5217\u8868\uff09\u5957\u5bf9\u8c61\uff08\u5b57\u5178\uff09for\u5faa\u73af\u904d\u5386<\/h2>\n    <table>\n        <tr>\n            <td>\u59d3\u540d<\/td>\n            <td>\u5e74\u9f84<\/td>\n            <td>\u6027\u522b<\/td>\n            <td>\u56fd\u7c4d<\/td>\n        <\/tr>\n        <tr v-for="info in summary_test">\n            <td>{{info.name}}<\/td>\n            <td>{{info.age}}<\/td>\n            <td>{{info.gender}}<\/td>\n            <td>{{info.country}}<\/td>\n        <\/tr>\n    <\/table>\n<\/div>\n<\/body>\n<script>\n    let vm = new Vue({\n        el: '#box',\n        data: {\n            list_test: ['First', 'second', 'Third', 'Forth', 'Fifth'],\n            dic_test:{name: 'Darker', age: 18, gender: 'male'},\n            summary_test: [\n                    {name: 'Alan', age: 23, gender: 'male', country: 'America'},\n                    {name: 'Ben', age: 15, gender: 'male', country: 'Australia'},\n                    {name: 'Cindy', age: 12, gender: 'female', country: 'Japan'},\n                    {name: 'Darker', age: 18, gender: 'male', country: 'China'},\n                    {name: 'Elisa', age: 26, gender: 'female', country: 'Mexico'},\n                ]\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
      \"img\"<\/div><\/p>\n
      \n
      \u6ce8\u610f\uff01<\/strong>\u5728Vue<\/code>\u4e2d\uff1a<\/p>\n