{"id":2889,"date":"2022-03-02T22:39:23","date_gmt":"2022-03-02T14:39:23","guid":{"rendered":"http:\/\/blog.odjbinail.cn\/?p=2889"},"modified":"2023-02-13T18:32:40","modified_gmt":"2023-02-13T10:32:40","slug":"sass%e5%9f%ba%e7%a1%80%e4%b8%8evue-js%e5%9f%ba%e7%a1%80%e8%af%ad%e6%b3%95","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=2889","title":{"rendered":"Sass\u57fa\u7840\u4e0eVue.js\u57fa\u7840\u8bed\u6cd5\u53ca\u9ad8\u7ea7\u8bed\u6cd5"},"content":{"rendered":"<h1>Sass \u57fa\u7840<\/h1>\n<h2>Saas \u73af\u5883\u642d\u5efa\u4e0e\u57fa\u672c\u8bed\u6cd5<\/h2>\n<ul>\n<li>\u4e0b\u8f7d Visual Studio Code<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>demo.scss\n.header{\n    span{\n        color: red;\n        &amp;:active{\n            color: green;\n        }\n        &amp;:hover{\n            color: blue;\n        }\n    }\n}<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>demo.sass\n.header\n    span\n        color: red;\n        &amp;:active\n            color: green\n        &amp;:hover\n            color: blue<\/code><\/pre>\n<ul>\n<li>css<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>.header span {\n  color: red;\n}\n.header span:active {\n  color: green;\n}\n.header span:hover {\n  color: blue;\n}<\/code><\/pre>\n<h2>\u53d8\u91cf\u5165\u95e8<\/h2>\n<pre class=\"prettyprint linenums\" ><code>$small-font:14px+3px;\n$text-color:#555;\n$default-font:&#039;microsoft yahei&#039;;\n.title{\n    color: lighten($text-color,20%);\n    font-size:$small-font;\n    font-family: $default-font;\n}\n.subtitle{\n    color: darken($text-color,20%);\n    font-size:$small-font;\n}<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>.title {\n  color: #888888;\n  font-size: 17px;\n  font-family: &quot;microsoft yahei&quot;;\n}\n.subtitle {\n  color: #222222;\n  font-size: 17px;\n}\n\/*# sourceMappingURL=demo.css.map *\/<\/code><\/pre>\n<h2>\u5d4c\u5957\uff0c\u4ee3\u7801\u62c6\u5206\u53ca\u5f15\u5165<\/h2>\n<ul>\n<li>\u5d4c\u5957<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>div{\n    span{\n        color: red;\n        a{\n            color: blue;\n        }\n    }\n}\ncss\ndiv span {\n  color: red;\n}\ndiv span a {\n  color: blue;\n}<\/code><\/pre>\n<ul>\n<li>\u4ee3\u7801\u62c6\u5206<\/li>\n<\/ul>\n<p>_vir.scss [\u79c1\u6709\u7684 scss \u6587\u4ef6,\u7528\u4e8e\u5176\u4ed6\u7684\u5f15\u7528] \u4e0d\u4f1a\u751f\u6210 vir.css<\/p>\n<pre class=\"prettyprint linenums\" ><code>main.scss\n@import &#039;vir&#039;;\n@import &#039;header&#039;;\n@import &#039;content&#039;;\n<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>_vir.scss\n$color:red;\n$content-color:orange;\n_header.scss\n.header{\n    color: $color;\n    background-color: $content-color;\n}<\/code><\/pre>\n<h2>Mixin \u6df7\u5165\u7684\u4f7f\u7528<\/h2>\n<ul>\n<li>\u516c\u5171\u90e8\u5206\u7684\u62c6\u5206<\/li>\n<li>_mixins.scss<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>@mixin singleline-ellipsis($width) {\n    width: $width;\n    overflow: hidden;\n    white-space:nowrap;\n    text-overflow: ellipsis;\n}\n<\/code><\/pre>\n<ul>\n<li>main.scss<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>@import &#039;mixin&#039;;\n.text{\n    @include singleline-ellipsis(600px);\n}\n.content-text{\n    @include singleline-ellipsis(1000px);\n}<\/code><\/pre>\n<h2>\u5a92\u4f53\u67e5\u8be2\u4e0e Mixin \u7684\u914d\u5408\u4f7f\u7528<\/h2>\n<ul>\n<li>main.scss<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>@mixin ipad($height) {\n    @media screen and (min-width:768px) {\n    height:$height;\n        @content;\n    }\n}\n.header{\n    width: 1000px;\n    @include ipad(100px){\n        width: 500px;\n    }\n}\n<\/code><\/pre>\n<ul>\n<li>main.css<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>.header {\n  width: 1000px;\n}\n@media screen and (min-width: 768px) {\n  .header {\n      height: 100px;\n    width: 500px;\n  }\n}<\/code><\/pre>\n<h1>Vue \u8bed\u6cd5\u521d\u63a2<\/h1>\n<h2>\u521d\u5b66\u7f16\u5199 HelloWorld \u548c Counter<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/fixed \u56fa\u5b9a\u5728\u5e95\u90e8\n&lt;div class=&quot;footer&quot;&gt;\n        MIT Licensed | Copyright \u00a9 2022-present Damogu\n&lt;\/div&gt;\n.footer{\n    position fixed\n    height 2rem\n    bottom 1.2rem\n    left 50%\n    width 100%\n    }<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Hello World&lt;\/title&gt;\n    &lt;script src=&quot;https:\/\/unpkg.com\/vue@next&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;script&gt;\n    Vue.createApp({\n        data(){\n            return {\n                content:1\n            }\n        },\n        mounted(){\n           setInterval(()=&gt;{\n               this.content+=1;\n           },1000)\n        },\n        template:&#039;&lt;div&gt;{{content}}&lt;\/div&gt;&#039;\n    }).mount(&#039;#root&#039;);\n&lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<h2>\u7f16\u5199\u5b57\u7b26\u4e32\u53cd\u8f6c\u548c\u5185\u5bb9\u9690\u85cf\u5c0f\u529f\u80fd<\/h2>\n<ul>\n<li>\u53cd\u8f6c<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  Vue.createApp({\n        data(){\n            return {\n                content:&#039;hello world&#039;\n            }\n        },\n        methods:{\n            handleBtnClick(){\n\/\/vue \u91cc\u9762\u4e0d\u4f1a\u9762\u5411 dom \u7f16\u7a0b,\u662f\u9762\u5411\u6570\u636e\u7f16\u7a0b             this.content=this.content.split(&#039;&#039;).reverse().join(&#039;&#039;);\n            }\n        },\n        template:\n        `\n        &lt;div&gt;\n                {{content}}\n                &lt;button v-on:click=&quot;handleBtnClick&quot;&gt;\u53cd\u8f6c&lt;\/button&gt;\n        &lt;\/div&gt;\n        `\n    }).mount(&#039;#root&#039;);<\/code><\/pre>\n<ul>\n<li>\u663e\u793a\u9690\u85cf\u5185\u5bb9<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> Vue.createApp({\n        data(){\n            return {\n                show:true,}\n        },\n        methods:{\n            handleBtnClick(){\n                this.show=!this.show;\n            }\n        },\n        template:\n        `\n        &lt;div&gt;\n                &lt;span v-if=&quot;show&quot;&gt;hello world&lt;\/span&gt;\n                &lt;button v-on:click=&quot;handleBtnClick&quot;&gt;\u663e\u793a\/\u9690\u85cf&lt;\/button&gt;\n        &lt;\/div&gt;\n        `\n    }).mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u7f16\u5199 TodoList \u5c0f\u529f\u80fd\uff0c\u4e86\u89e3\u5faa\u73af\u548c\u53cc\u5411\u7ed1\u5b9a<\/h2>\n<pre class=\"prettyprint linenums\" ><code>Vue.createApp({\n        data(){\n            return {\n                inputValue:&#039;&#039;,\n                list:[]\n            }\n        },\n        methods:{\n            handleAddItem(){\n                \/\/ console.log(this.inputValue);\n                this.list.push(this.inputValue);\n                this.inputValue=&#039;&#039;;\n            }\n        },\n        \/\/1.\u5728\u67d0\u4e2a\u5c5e\u6027\u4e0a\u9700\u8981\u7ed1\u5b9a\u5185\u5bb9:v-bind:title=&quot;inputValue&quot;\n        \/\/2.\u589e\u52a0 {{inputValue}},\u5728\u6807\u7b7e\u5185\u90e8\n        template:`\n        &lt;div&gt;\n            &lt;input v-model=&quot;inputValue&quot; \/&gt;\n            &lt;button\n                v-on:click=&quot;handleAddItem&quot;\n                v-bind:title=&quot;inputValue&quot;\n            &gt;\n                \u589e\u52a0\n            &lt;\/button&gt;\n            &lt;ul&gt;\n                &lt;li v-for=&quot;(item,index) of list&quot;&gt;{{item}} {{index}}&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/div&gt;\n        `\n    }).mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u7ec4\u4ef6\u6982\u5ff5\u521d\u63a2\uff0c\u5bf9 TodoList \u8fdb\u884c\u7ec4\u4ef6\u4ee3\u7801\u62c6\u5206<\/h2>\n<pre class=\"prettyprint linenums\" ><code> const app= Vue.createApp({\n        data(){\n            return {\n                inputValue:&#039;&#039;,\n                list:[]\n            }\n        },\n        methods:{\n            handleAddItem(){\n                \/\/ console.log(this.inputValue);\n                this.list.push(this.inputValue);\n                this.inputValue=&#039;&#039;;\n            }\n        },\n        \/\/1.\u5728\u67d0\u4e2a\u5c5e\u6027\u4e0a\u9700\u8981\u7ed1\u5b9a\u5185\u5bb9:v-bind:title=&quot;inputValue&quot;\n        \/\/2.\u589e\u52a0 {{inputValue}},\u5728\u6807\u7b7e\u5185\u90e8\n        template:`\n        &lt;div&gt;\n            &lt;input v-model=&quot;inputValue&quot; \/&gt;\n            &lt;button\n                v-on:click=&quot;handleAddItem&quot;\n                v-bind:title=&quot;inputValue&quot;\n            &gt;\n                \u589e\u52a0\n            &lt;\/button&gt;\n            &lt;ul&gt;\n                &lt;todo-item v-for=&quot;(item,index) of list&quot;\n                v-bind:content=&quot;item&quot;\n                v-bind:index=&quot;index&quot;\n                \/&gt;\n            &lt;\/ul&gt;\n        &lt;\/div&gt;\n        `\n    });\n    app.component(&#039;todo-item&#039;,{\n       props:[&#039;content&#039;,&#039;index&#039;],\n        template:&#039;&lt;li&gt;{{index}}--{{content}}&lt;\/li&gt;&#039;\n    });\n    app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h1>Vue \u57fa\u7840\u8bed\u6cd5<\/h1>\n<h2>Vue \u4e2d\u5e94\u7528\u548c\u7ec4\u4ef6\u7684\u57fa\u7840\u6982\u5ff5<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/createApp,\u521b\u5efa\u4e00\u4e2a vue \u5e94\u7528,\u5b58\u50a8\u5230 app \u53d8\u91cf\u4e2d\n    \/\/\u4f20\u5165\u7684\u53c2\u6570\u8868\u793a,\u8fd9\u4e2a\u5e94\u7528\u6700\u5916\u5c42\u7684\u7ec4\u4ef6,\u5e94\u8be5\u5982\u4f55\u5c55\u793a\n    \/\/mvvm \u8bbe\u8ba1\u6a21\u5f0f, m-&gt;model \u6570\u636e, v-&gt;view \u89c6\u56fe, vm-&gt;viewModel \u89c6\u56fe\u6570\u636e\u8fde\u63a5\u5c42\n    const app= Vue.createApp({\n        data(){\n            return{\n                message:&#039;hello world&#039;\n            }\n        },\n        template:&quot;&lt;div&gt;{{message}}&lt;\/div&gt;&quot;\n    });\n    \/\/\u8fd9\u5e94\u7528\u53ea\u4f5c\u7528\u4e8e id \u7b49\u4e8e root \u7684 div \u5143\u7d20\u4e0a\u53bb\n    \/\/vm \u4ee3\u8868\u7684\u5c31\u662f vue \u5e94\u7528\u7684\u6839\u7ec4\u4ef6\n    const vm= app.mount(&#039;#root&#039;);\n    \/\/\u5728 F12 \u4e2d\u8f93\u5165 vm.$data.message[\u64cd\u4f5c\u6570\u636e,\u6539\u6570\u636e]<\/code><\/pre>\n<h2>\u7406\u89e3 Vue \u4e2d\u7684\u751f\u547d\u5468\u671f\u51fd\u6570<\/h2>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/2022021720374667.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/2022021720374667.png\" alt=\"\" \/><\/p><\/noscript>\n<pre class=\"prettyprint linenums\" ><code>&lt;body&gt;\n    &lt;div id=&quot;root&quot;&gt;\n        &lt;!-- \u5982\u679c\u6ca1\u6709\u6700\u4e0b\u65b9\u7684 template,\u5219\u2193 --&gt;\n        &lt;div&gt;{{message}}&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;script&gt;\n    \/\/\u751f\u547d\u5468\u671f\u51fd\u6570:\u5728\u67d0\u4e00\u65f6\u523b\u4f1a\u81ea\u52a8\u6267\u884c\u7684\u51fd\u6570\n    const app= Vue.createApp({\n        data(){\n            return{\n                message:&#039;hello world&#039;\n            }\n        },\n        \/\/\u5728\u5b9e\u4f8b\u751f\u6210\u4e4b\u524d\u4f1a\u81ea\u52a8\u6267\u884c\u7684\u51fd\u6570\n        beforeCreate(){\n            console.log(&#039;beforeCreate&#039;);\n        },\n        \/\/html \u6e32\u67d3\u7684\u77ac\u95f4\n        \/\/\u5728\u5b9e\u4f8b\u751f\u6210\u4e4b\u540e\u4f1a\u81ea\u52a8\u6267\u884c\u7684\u51fd\u6570\n        created(){\n            console.log(&#039;created&#039;);\n        },\n        \/\/\u5728\u7ec4\u4ef6\u5185\u5bb9\u88ab\u6e32\u67d3\u5230\u9875\u9762\u4e4b\u524d\u81ea\u52a8\u6267\u884c\u7684\u51fd\u6570,[\u6302\u8f7d\u4e4b\u524d\u6267\u884c\u7684\u51fd\u6570]\n        beforeMount(){\n            console.log(document.getElementById(&#039;root&#039;).innerHTML,&#039;beforeMount&#039;);\n        },\n        \/\/\u5728\u7ec4\u4ef6\u5185\u5bb9\u88ab\u6e32\u67d3\u5230\u9875\u9762\u4e4b\u540e\u81ea\u52a8\u6267\u884c\u7684\u51fd\u6570,[\u6302\u8f7d\u4e4b\u540e\u6267\u884c\u7684\u51fd\u6570]\n        mounted(){\n            console.log(document.getElementById(&#039;root&#039;).innerHTML,&#039;mounted&#039;);\n        },\n        \/\/\u5f53\u6570\u636e\u53d1\u751f\u53d8\u5316\u65f6\u4f1a\u7acb\u5373\u81ea\u52a8\u6267\u884c\u7684\u51fd\u6570 vm.$data.message=&#039;bye&#039; \u6539\u53d8\u6570\u636e\u65f6\n        beforeUpdate(){\n            \/\/&lt;div&gt;hello world&lt;\/div&gt; beforeUpdate\n            console.log(document.getElementById(&#039;root&#039;).innerHTML,&#039;beforeUpdate&#039;);\n        },\n        \/\/\u5f53\u6570\u636e\u53d1\u751f\u53d8\u5316,\u9875\u9762\u91cd\u65b0\u6e32\u67d3\u540e,\u4f1a\u81ea\u52a8\u6267\u884c\u7684\u51fd\u6570\n        updated(){\n            \/\/&lt;div&gt;bye&lt;\/div&gt; updated\n            console.log(document.getElementById(&#039;root&#039;).innerHTML,&#039;updated&#039;);\n        },\n        \/\/app.unmount()\n        \/\/&lt;div&gt;hello world&lt;\/div&gt; beforeUnmount\n        \/\/unmounted\n        \/\/\u5f53 Vue \u5e94\u7528\u5931\u6548\u65f6,\u81ea\u52a8\u6267\u884c\u7684\u51fd\u6570\n        beforeUnmount(){\n            console.log(document.getElementById(&#039;root&#039;).innerHTML,&#039;beforeUnmount&#039;);\n        },\n        \/\/\u5f53 Vue \u5e94\u7528\u5931\u6548\u65f6,\u4e14 dom \u5b8c\u5168\u9500\u6bc1\u4e4b\u540e,\u81ea\u52a8\u6267\u884c\u7684\u51fd\u6570\n        unmounted(){\n            console.log(document.getElementById(&#039;root&#039;).innerHTML,&#039;unmounted&#039;);\n        },\n        \/\/ template:&quot;&lt;div&gt;{{message}}&lt;\/div&gt;&quot;\n    });\n    const vm= app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u5e38\u7528\u6a21\u7248\u8bed\u6cd5\u8bb2\u89e3<\/h2>\n<pre class=\"prettyprint linenums\" ><code>  const app= Vue.createApp({\n        data(){\n            return{\n                message:&quot;hello world&quot;,\n                show:false,\n                name:&#039;title1&#039;,\n                event:&#039;mouseenter&#039;\/\/\u52a8\u6001\u53c2\u6570\n            }\n            \/\/2. return{\n            \/\/     disable:false \/\/\u53ef\u8f93\u5165\n            \/\/ }\n        },\n        \/\/6. v-on:click=&quot;handleClick&quot;\n        methods:{\n            \/\/ \u4e00\u5b9a\u8981\u5199\u5728 methods \u4e0a\n                handleClick(){\n                  alert(&#039;click&#039;)\n                }\n            },\n        \/\/1. v-html=&quot;message&quot; \u52a0\u7c97 &lt;strong&gt;hello world&lt;\/strong&gt;\n        \/\/\u5982\u679c\u4f60\u7684\u5c5e\u6027\u503c\u60f3\u53bb\u663e\u793a\u6570\u636e\u53d8\u91cf\u5185\u5bb9\u7684\u8bdd,\u8981\u7528 v-bind:title=&quot;message&quot;\n        \/\/2. \u63a7\u5236\u662f\u5426\u8f93\u5165\u5185\u5bb9\u7684\u72b6\u6001\n        \/\/ template:`&lt;input v-bind:disable=&quot;disable&quot;\/&gt;`\n        \/\/3. {{ JS \u8868\u8fbe\u5f0f }}\n        \/\/4. v-once:\u7b2c\u4e00\u6b21\u5c55\u73b0 hello world,\u540e\u9762\u4e00\u76f4\u5c31\u5c55\u73b0 hello world,\u4e0d\u4f1a\u7ba1 message \u53d8\u5316\n        \/\/\u964d\u4f4e\u4e00\u4e9b\u65e0\u7528\u7684\u6e32\u67d3,\u63d0\u9ad8\u6e32\u67d3\u7684\u6027\u80fd\n        \/\/5. v-if=&quot;show&quot; \u663e\u793a,\u9690\u85cf&lt;div \u2190&gt;\n        \/\/7. v-on: \u7b80\u5199 @,  v-bind: \u7b80\u5199 :\n        \/\/8. \u52a8\u6001\u5c5e\u6027:[name]=&quot;message&quot;\n        template:\n            `&lt;div\n            @[event]=&quot;handleClick&quot;\n            :[name]=&quot;message&quot;\n            &gt;\n                {{message}}\n            &lt;\/div&gt;`\n        \/\/9. `&lt;form action=&quot;https:\/\/www.baidu.com&quot; @click.prevent=&quot;handleClick&quot; &gt;\n        \/\/     &lt;button type=&quot;submit&quot;&gt;\u63d0\u4ea4&lt;\/button&gt;\n        \/\/ &lt;\/form&gt;\n        \/\/ `\n    });\n    const vm= app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u6570\u636e\uff0c\u65b9\u6cd5\uff0c\u8ba1\u7b97\u5c5e\u6027\u548c\u4fa6\u542c\u5668<\/h2>\n<pre class=\"prettyprint linenums\" ><code>  \/\/data: vm.$data.message=123;\n    \/\/1. computed \u548c methods \u90fd\u80fd\u5b9e\u73b0\u7684\u4e00\u4e2a\u529f\u80fd,\u5efa\u8bae\u4f7f\u7528 computed,\u56e0\u4e3a\u6709\u7f13\u5b58\n    \/\/2. computed \u548c watcher \u90fd\u80fd\u5b9e\u73b0\u7684\u529f\u80fd,\u5efa\u8bae\u4f7f\u7528 computed \u56e0\u4e3a\u66f4\u52a0\u7b80\u6d01\n    const app= Vue.createApp({\n        data(){\n            return{\n                message:&quot;hello world&quot;,\n                count:4,\n                price:5,\n                newTotal:10,\n            }\n        },\n        watch:{\n            \/\/price \u53d1\u751f\u53d8\u5316\u65f6,\u51fd\u6570\u4f1a\u6267\u884c\n            price(current,prev){\n                this.newTotal=current*this.count;\n            }\n        },\n        computed:{\n            \/\/\u8ba1\u7b97\u5c5e\u6027\u5185\u90e8\u5e26\u6709\u7f13\u5b58\u673a\u5236,\u4f5c\u9875\u9762\u6e32\u67d3\u7684\u65f6\u5019\u4f1a\u66f4\u9ad8\u6548\n            \/\/\u5f53\u8ba1\u7b97\u5c5e\u6027\u4f9d\u8d56\u7684\u5185\u5bb9\u53d1\u751f\u53d8\u66f4\u65f6,\u624d\u4f1a\u91cd\u65b0\u6267\u884c\u8ba1\u7b97\n            total(){\n                return Date.now()+this.count;\n                \/\/ return this.count*this.price;\n            }\n        },\n        methods:{\n            \/\/ formatString(string){\n            \/\/     return string.toUpperCase();\n            \/\/ },\n            \/\/\u2193\u2193 `&lt;div&gt;{{formatString(message)}}&lt;\/div&gt;`\n            \/\/\u53ea\u8981\u9875\u9762\u91cd\u65b0\u6e32\u67d3,\u624d\u4f1a\u91cd\u65b0\u8ba1\u7b97\n            getTotal(){\n                return Date.now();\n                \/\/ return this.count*this.price;\n            }\n        },\n        template:\n            `&lt;div&gt;{{message}}{{total}}&lt;\/div&gt;`\n    });\n    const vm= app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u6837\u5f0f\u7ed1\u5b9a\u8bed\u6cd5<\/h2>\n<pre class=\"prettyprint linenums\" ><code> &lt;style&gt;\n        .red{\n            color: red;\n        }\n.green{\n            color: green;\n        }\n    &lt;\/style&gt;\n&lt;script&gt;\n     const app= Vue.createApp({\n         data(){\n             return{\n                 \/\/vm.$data.classString=&#039;green&#039;\n                 classString:&#039;red&#039;,\n                 classObject:{red:true,green:false},\n                 classArray:[&#039;red&#039;,&#039;green&#039;,{brown:false}],\n                 styleString:&#039;color:yellow;background:orange&#039;,\n                 styleObject:{\n                    color:&#039;orange&#039;,\n                    background:&#039;yellow&#039;\n                 }\n             }\n         },\n         \/\/  &lt;demo class=&quot;green&quot;\/&gt;\n        template:\n            `&lt;div :style=&quot;styleObject&quot;&gt;\n             hello\n            &lt;\/div&gt;`\n    });\n    app.component(&#039;demo&#039;,{\n        template: `\n        &lt;div :class=&quot;$attrs.class&quot;&gt;one&lt;\/div&gt;\n        &lt;div &gt;two&lt;\/div&gt;\n        `\n    })\n    const vm= app.mount(&#039;#root&#039;);\n&lt;\/script&gt;<\/code><\/pre>\n<h2>\u6761\u4ef6\u6e32\u67d3<\/h2>\n<pre class=\"prettyprint linenums\" ><code>  const app= Vue.createApp({\n         data(){\n             return{\n               show:false,\n               conditionOne:false,\n               conditionTwo:true,\n             }\n         },\n         \/\/v-show=&quot;show&quot; : \u9891\u7e41\u6539\u53d8 dom \u7684\u5c55\u793a\u4e0e\u5426\n        template:`\n        &lt;div v-if=&quot;show&quot;&gt;hello&lt;\/div&gt;\n        &lt;div v-if=&quot;conditionOne&quot;&gt;if&lt;\/div&gt;\n        &lt;div v-else-if=&quot;conditionTwo&quot;&gt;elseif&lt;\/div&gt;\n        &lt;div v-else&gt;else&lt;\/div&gt;\n        &lt;div v-show=&quot;show&quot;&gt;bye&lt;\/div&gt;\n            `\n    });\n    const vm= app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u5217\u8868\u5faa\u73af\u6e32\u67d3<\/h2>\n<pre class=\"prettyprint linenums\" ><code class=\"language-js\"> &lt;script src=&quot;https:\/\/unpkg.com\/vue@next&quot;&gt;&lt;\/script&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;script&gt;\n const app = Vue.createApp({\n      data() {\n        return {\n          listArray: [&quot;dell&quot;, &quot;lee&quot;, &quot;teacher&quot;],\n          listObject: {\n            firstName: &quot;dell&quot;,\n            lastName: &quot;lee&quot;,\n            job: &quot;teacher&quot;,\n          },\n        };\n      },\n      methods: {\n        handleAddBtnClick() {\n          \/\/1.\u4f7f\u7528\u6570\u7ec4\u7684\u53d8\u66f4\u51fd\u6570 push ,pop ,shift,unshift,splice,sort,reverse\n          \/\/ this.listArray.push(&#039;hello&#039;);\u589e\u52a0\u65b0\u7684\u4e00\u4e2a\n          \/\/ this.listArray.pop(); \u4ece\u4e0b\u5f00\u59cb\u5220\u9664\n          \/\/ this.listArray.shift();\/\/\u4ece\u5f00\u5934\u5f00\u59cb\u5220\u9664\n          \/\/ this.listArray.unshift(&#039;hello&#039;);\/\/\u4ece\u5f00\u5934\u5f00\u59cb\u65b0\u589e\n          \/\/ this.listArray.reverse(); \/\/\u53d6\u53cd\n          \/\/2.\u76f4\u63a5\u66ff\u6362\u6570\u7ec4\n          \/\/ this.listArray=[&#039;bye&#039;,&#039;world&#039;]\n          \/\/ this.listArray=[&#039;bye&#039;].concat([&#039;world&#039;])\/\/bye -- 0 world -- 1\n          \/\/ this.listArray=[&#039;bye&#039;,&#039;world&#039;].filter(item=&gt;item===&#039;bye&#039;)\/\/bye -- 0\n          \/\/3.\u76f4\u63a5\u66f4\u65b0\u6570\u7ec4\u7684\u5185\u5bb9\n          \/\/ this.listArray[1]=&#039;hello&#039;\n          \/\/\u76f4\u63a5\u6dfb\u52a0\u5bf9\u8c61\u7684\u5185\u5bb9,\u4e5f\u53ef\u4ee5\u81ea\u52a8\u7684\u5c55\u793a\u51fa\u6765\n          \/\/ this.listObject.age=100;\n          \/\/ this.listObject.sex=&#039;max&#039;\n        },\n      },\n      \/\/\u5faa\u73af\u4f18\u5148\u7ea7\u6bd4 if \u9ad8 v-if=&quot;key!==&#039;lastName&#039;&quot;\u4e0d\u5c55\u793a lastname\n      \/\/ \u7528&lt;template&gt;&lt;\/template&gt;\u907f\u514d\u5916\u90e8\u591a\u4e00\u5c42 div\n      \/*&lt;div&gt;\n        &lt;div&gt;\n          teacher -- job\n        &lt;\/div&gt;\n      &lt;\/div&gt;*\/\n      template: `\n        &lt;div&gt;\n            &lt;template \n            v-for=&quot;(value,key,index) in listObject&quot; \n            :key=&quot;index&quot; \n            &gt;\n              &lt;div v-if=&quot;key!==&#039;lastName&#039;&quot;&gt;\n                {{value}} -- {{key}}&lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/template&gt;\n            &lt;div v-for=&quot;item in 10&quot;&gt;{{item}}&lt;\/div&gt;\n            &lt;button @click=&quot;handleAddBtnClick&quot;&gt;\u65b0\u589e&lt;\/button&gt;\n        &lt;\/div&gt;\n        `,\n    });\n    \/\/dell -- firstName -- 0\n    \/\/lee -- lastName -- 1\n    \/\/teacher -- job -- 2\n    const vm = app.mount(&quot;#root&quot;);\n&lt;\/script&gt;<\/code><\/pre>\n<h2>\u4e8b\u4ef6\u7ed1\u5b9a<\/h2>\n<ul>\n<li>\u4e8b\u4ef6\u4fee\u9970\u7b26:@click. stop,prevent(\u963b\u6b62\u9ed8\u8ba4\u884c\u4e3a),capture,self,once<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    const app = Vue.createApp({\n      data() {\n        return {\n          counter: 0,\n        };\n      },\n      methods: {\n        \/\/\u83b7\u53d6\u5230 event,\u8981\u989d\u5916\u4f20\u9012\u53c2\u6570,\u53c8\u8981\u83b7\u53d6\u539f\u751f\u4e8b\u4ef6\u5bf9\u8c61,\u4f7f\u7528$evevt\n        handleBtnClick(num,event) {\n          this.counter+=1\n        },\n        handleDivClick(){\n          alert(&#039;div&#039;)\n        }\n      },\n      \/\/1.\u5982\u679c\u7ed1\u5b9a\u4e00\u4e2a\u4e8b\u4ef6,\u6267\u884c\u591a\u4e2a\u51fd\u6570\u7684\u65f6\u5019,\u9017\u53f7\u9694\u5f00,\u540e\u9762\u5fc5\u987b\u52a0()\n      \/\/2.@click.stop \u5f53\u70b9\u51fb button \u65f6,\u4e8b\u4ef6\u662f\u5192\u6ce1\u7684,button \u7684\u70b9\u51fb\u4e8b\u4ef6\u4f1a\u5192\u6ce1\u5230\u4e0a\u4e00\u5c42\u7684 div \u6807\u7b7e\u4e0a,\u6240\u4ee5\u4e0a\u5c42\u7684 div \u4e5f\u4f1a\u611f\u5e94\u5230\u70b9\u51fb,\u505c\u6b62\u5192\u6ce1\u5c31@click.stop\n      \/\/3.@click.self \u70b9\u5b50\u5143\u7d20\u7684\u65f6\u5019,\u4e0d\u8981\u89e6\u53d1\u81ea\u5df1(div)\u7684 click \u4e8b\u4ef6\n      \/\/4.@scroll.passive \u63d0\u5347\u6eda\u52a8\u7684\u6027\u80fd\n      template: `\n        &lt;div&gt;\n          &lt;div @click.self=&quot;handleDivClick&quot;&gt;\n            {{counter}}\n            &lt;button @click.stop=&quot;handleBtnClick&quot;&gt;button&lt;\/button&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        `\n    });\n    const vm = app.mount(&quot;#root&quot;);<\/code><\/pre>\n<ul>\n<li>\u6309\u952e\u4fee\u9970\u7b26 enter, tab, delete, esc, up, down, left, right<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>const app = Vue.createApp({\n      methods: {\n        handleKeyDown(){\n         console.log(&#039;keydown&#039;);\n        }\n      },\n      template: `\n        &lt;div&gt;\n        &lt;input @keydown.delete= &quot;handleKeyDown&quot;\/&gt;\n        &lt;\/div&gt;\n        `\n    });<\/code><\/pre>\n<ul>\n<li>\u9f20\u6807\u4fee\u9970\u7b26: @click. left, right, middle<\/li>\n<li>\u7cbe\u786e\u4fee\u9970\u7b26: @click.ctrl.exact<\/li>\n<\/ul>\n<h2>\u8868\u5355\u4e2d\u53cc\u5411\u7ed1\u5b9a\u6307\u4ee4\u7684\u4f7f\u7528\uff081\uff09<\/h2>\n<pre class=\"prettyprint linenums\" ><code> const app = Vue.createApp({\n      data() {\n        return {\n          message:&#039;&#039;\n        };\n      },\n      methods: {},\n      \/\/ 1.&lt;input v-model=&quot;message&quot;\/&gt; , 2.textarea \u7c7b\u4f3c\n      \/\/ 3.message:false : &lt;input type=&quot;checkbox&quot; v-model=&quot;message&quot;\/&gt;\n      \/\/4. message:[] : jack&lt;input type=&quot;checkbox&quot; v-model=&quot;message&quot; value=&quot;jack&quot;\/&gt;\n      template: `\n        &lt;div&gt;\n          {{message}}\n          jack&lt;input type=&quot;radio&quot; v-model=&quot;message&quot; value=&quot;jack&quot;\/&gt;\n          lee&lt;input type=&quot;radio&quot; v-model=&quot;message&quot; value=&quot;lee&quot;\/&gt;\n        &lt;\/div&gt;`,\n    });<\/code><\/pre>\n<h2>\u8868\u5355\u4e2d\u53cc\u5411\u7ed1\u5b9a\u6307\u4ee4\u7684\u4f7f\u7528\uff082\uff09<\/h2>\n<ul>\n<li>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> const app = Vue.createApp({\n      data() {\n        return {\n          message: &quot;&quot;,\n          options: [\n            {\n              text: &quot;A&quot;,\n              value: {value: &quot;A&quot;},   \n            },\n            {            \n              text: &quot;B&quot;,\n              value: {value: &quot;B&quot;},          \n            },\n            {          \n              text: &quot;C&quot;,\n              value: {value: &quot;C&quot;},   \n            },\n          ],\n        };\n      },\n      \/\/\u5355\u9009: &lt;option disabled value=&#039;&#039;&gt;\u8bf7\u9009\u62e9\u5185\u5bb9&lt;\/option&gt;\n      template: `\n      &lt;div&gt;\n          {{message}}\n          &lt;select v-model=&quot;message&quot; multiple&gt;\n            &lt;option v-for=&quot;item in options&quot; :value=&quot;item.value&quot;&gt;{{item.text}}&lt;\/option&gt;\n          &lt;\/select&gt;\n        &lt;\/div&gt;`,\n    });<\/code><\/pre>\n<h2>\u8868\u5355\u4e2d\u53cc\u5411\u7ed1\u5b9a\u6307\u4ee4\u7684\u4f7f\u7528\uff083\uff09<\/h2>\n<ul>\n<li>\u4fee\u9970\u7b26 lazy,number,trim<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  const app = Vue.createApp({\n      data() {\n        return {\n          \/\/\u95ee: \u5982\u679c\u662f true hello,\u6ca1\u6709\u9009\u4e2d ??\n          \/\/&lt;input type=&quot;checkbox&quot; v-model=&quot;message&quot; true-value=&quot;hello&quot; false-value=&quot;world&quot;\/&gt;\n          message: &quot;123&quot;\n        };\n      },\n      \/\/v-model.lazy \u89e6\u53d1 blur \u4e8b\u4ef6\u7684\u65f6\u5019,\u624d\u540c\u6b65\u6570\u636e\u7684\u53d8\u5316:\u8282\u7ea6\u89e6\u53d1\u7684\u65f6\u95f4\u6210\u672c,\u6027\u80fd\u66f4\u9ad8\n      \/\/ {{typeof message}}: string &lt;input v-model.number=&quot;message&quot; type=&quot;number&quot;&gt;\u8f93\u5165\u6570\u5b57\u4e4b\u540e,string \u53d8\u6210 number\n      template: `\n      &lt;div&gt;\n          {{message}}\n          &lt;input v-model.trim=&quot;message&quot;\/&gt;\n      &lt;\/div&gt;`,\n    });<\/code><\/pre>\n<h1>\u63a2\u7d22\u7ec4\u4ef6\u7684\u7406\u5ff5<\/h1>\n<h2>\u7ec4\u4ef6\u7684\u5b9a\u4e49\u53ca\u590d\u7528\u6027\uff0c\u5c40\u90e8\u7ec4\u4ef6\u548c\u5168\u5c40\u7ec4\u4ef6<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/\/\u7ec4\u4ef6\u7684\u5b9a\u4e49\n    \/\/\u7ec4\u4ef6\u5177\u5907\u590d\u7528\u6027\n    \/\/\u5168\u5c40\u7ec4\u4ef6,\u53ea\u8981\u5b9a\u4e49\u4e86,\u5904\u5904\u53ef\u4ee5\u4f7f\u7528,\u6027\u80fd\u4e0d\u9ad8,\u4f46\u662f\u4f7f\u7528\u8d77\u6765\u7b80\u5355. \u540d\u5b57\u5efa\u8bae,\u5c0f\u5199\u5b57\u6bcd\u5355\u8bcd,\u4e2d\u95f4\u7528\u6a2a\u7ebf\u95f4\u9694\n    \/\/\u5c40\u90e8\u7ec4\u4ef6,\u5b9a\u4e49\u4e86,\u8981\u6ce8\u518c\u4e4b\u540e\u624d\u80fd\u4f7f\u7528,\u6027\u80fd\u6bd4\u8f83\u9ad8,\u4f7f\u7528\u8d77\u6765\u6709\u4e9b\u9ebb\u70e6. \u540d\u5b57\u5efa\u8bae,\u5927\u5199\u5b57\u6bcd\u5355\u8bcd,\u9a7c\u5cf0\u547d\u540d\n    \/\/\u5c40\u90e8\u7ec4\u4ef6\u4f7f\u7528\u65f6,\u8981\u505a\u4e00\u4e2a\u540d\u5b57\u548c\u7ec4\u4ef6\u95f4\u7684\u6620\u5c04\u5bf9\u8c61,\u4f60\u4e0d\u5199\u6620\u5c04,Vue \u5e95\u5c42\u4e5f\u4f1a\u81ea\u52a8\u5c1d\u8bd5\u5e2e\u4f60\u505a\u6620\u5c04\n     \/\/2. \u5c40\u90e8\u7ec4\u4ef6\n     \/\/ components:{counter},\n     const Counter={\n        data(){\n            return{\n                count:1\n            }\n        },\n        template:`&lt;div @click=&quot;count+=1&quot;&gt;{{count}}&lt;\/div&gt;`\n    }\n    \/\/ &#039;hello-world&#039;:helloWorld,\n    const HelloWorld={\n        template:`&lt;div&gt;hello world&lt;\/div&gt;`\n    }\n    const app = Vue.createApp({\n        components:{\n            \/\/ counter:Counter,\n            \/\/ &#039;hello-world&#039;:HelloWorld,\n            Counter,HelloWorld,\n            },\n        template:`\n        &lt;div&gt;\n            &lt;hello-world\/&gt;\n            &lt;counter\/&gt;\n        &lt;\/div&gt;`\n    });\n    \/\/1. \u5168\u5c40\u7ec4\u4ef6\n    \/\/ app.component(&#039;counter-parent&#039;,{\n    \/\/     template:`&lt;counter\/&gt;`\n    \/\/ })\n    \/\/ app.component(&#039;counter&#039;,{\n    \/\/     data(){\n    \/\/         return{\n    \/\/             count:1\n    \/\/         }\n    \/\/     },\n    \/\/     template:`&lt;div @click=&quot;count+=1&quot;&gt;{{count}}&lt;\/div&gt;`\n    \/\/ })\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u7ec4\u4ef6\u95f4\u4f20\u503c\u53ca\u4f20\u503c\u6821\u9a8c<\/h2>\n<pre class=\"prettyprint linenums\" ><code>  const app = Vue.createApp({\n        data() {\n            return { num:1234}\n        },\n        \/\/\u52a8\u6001\u5c5e\u6027\u4f20\u53c2 :content=&quot;num&quot;\n        template:\n            `&lt;div&gt;&lt;test :content=&quot;num&quot;\/&gt;&lt;\/div&gt;`\n    });\n    \/\/type: String,Boolean[num:true]\u2191\u2191\u2191,Array,Object,Function,Symbol\n    \/\/required \u5fc5\u586b\n    \/\/default \u9ed8\u8ba4\u503c\n    app.component(&#039;test&#039;, {\n        props: {\n            content:{\n                type:Number,\n                validator:function(value){\n                    return value&lt;1000;\n                },\n                default:function(){\n                    return 456;\n                }\n            }\n        },\n        template: `&lt;div&gt;{{content}}&lt;\/div&gt;`\n    })\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u5355\u9879\u6570\u636e\u6d41\u7684\u7406\u89e3<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/\/2. \u5c5e\u6027\u4f20\u7684\u65f6\u5019,\u4f7f\u7528 content-abc \u8fd9\u79cd\u547d\u540d,\u63a5\u7684\u65f6\u5019,\u4f7f\u7528 contentAbc \u547d\u540d\n    \/\/3. \u62a5\u9519: Attempting to mutate prop &quot;count&quot;. Props are readonly.\n    \/\/\u5355\u9879\u6570\u636e\u6d41\u7684\u6982\u5ff5: \u5b50\u7ec4\u4ef6\u53ef\u4ee5\u4f7f\u7528\u7236\u7ec4\u4ef6\u4f20\u9012\u8fc7\u6765\u7684\u6570\u636e,\u4f46\u662f\u7edd\u5bf9\u4e0d\u80fd\u4fee\u6539\u4f20\u9012\u8fc7\u6765\u7684\u6570\u636e\n    const app = Vue.createApp({\n        data() {\n            return {\n                \/\/ content: 1234,\n                num:1\n            }\n        },\n        \/\/1. v-bind=&quot;params&quot; &lt;==&gt; :content=&quot;params.content&quot; :a=&quot;params.a&quot; :b=&quot;params.b&quot; :c=&quot;params.c&quot;\n        template:\n            \/\/ `&lt;div&gt;&lt;test :content-abc=&quot;content&quot;\/&gt;&lt;\/div&gt;`\n            `&lt;div&gt;\n                &lt;counter :count=&quot;num&quot;\/&gt;\n            &lt;\/div&gt;`\n    });\n    \/\/ app.component(&#039;test&#039;, {\n    \/\/     props: [&#039;contentAbc&#039;],\n    \/\/     template: `&lt;div&gt;{{contentAbc}}&lt;\/div&gt;`\n    \/\/ })\n    app.component(&#039;counter&#039;, {\n        props: [&#039;count&#039;],\n        data(){\n            return{\n                myCount:this.count,\n            }\n        },\n        \/\/\u70b9\u51fb,\u6bcf\u6b21\u4fee\u6539\u7684\u662f\u81ea\u5df1\u7ec4\u4ef6 data \u7684\u5185\u5bb9,\u662f\u5141\u8bb8\u4fee\u6539\u7684\n        \/\/vue \u91cc\u9762\u4e0d\u5141\u8bb8\u5b50\u7ec4\u4ef6\u4fee\u6539\u7236\u7ec4\u4ef6\u7684\u6570\u636e,\u907f\u514d\u7ec4\u4ef6\u4e4b\u95f4\u7684\u6570\u636e\u8026\u5408,\u8ba9\u4ee3\u7801\u7ef4\u62a4\u6027\u66f4\u597d,\u907f\u514d\u4e00\u4e9b\u6f5c\u5728\u7684 bug\n        template: `&lt;div @click=&quot;myCount+=1&quot;&gt;{{myCount}}&lt;\/div&gt;`\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>Non-Props \u5c5e\u6027\u662f\u4ec0\u4e48<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/\/Non-prop \u5c5e\u6027\n    const app = Vue.createApp({\n        \/\/&lt;counter  style=&quot;color:red;&quot;\/&gt;\n        template:\n            `&lt;div&gt;\n                &lt;counter msg=&quot;hello&quot; msg1=&quot;hello1&quot;\/&gt;\n            &lt;\/div&gt;`\n    });\n    \/\/`&lt;div msg=&quot;hello&quot;&gt;Counter&lt;\/div&gt;`\n    app.component(&#039;counter&#039;, {\n        \/\/ inheritAttrs:false, \/\/\u4e0d\u6dfb\u52a0: msg=&quot;hello&quot;\n        mounted(){\n            console.log(this.$attrs.msg);\n        },\n        template:\n        \/\/v-bind:msg=&quot;$attrs.msg&quot;  \u52a0\u4e0a\u67d0\u4e2a\u5c5e\u6027\n        \/\/v-bind=&quot;$attrs&quot; \u6240\u6709\u7236\u7ec4\u4ef6\u4f20\u9012\u7684 Non-prop \u5c5e\u6027,\u90fd\u4f1a\u52a0\u5230\u8fd9\u7b2c\u4e8c\u4e2a div\n         `&lt;div v-bind:msg=&quot;$attrs.msg&quot;&gt;Counter&lt;\/div&gt;\n         &lt;div v-bind=&quot;$attrs&quot;&gt;Counter&lt;\/div&gt;`\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u7236\u5b50\u7ec4\u4ef6\u95f4\u5982\u4f55\u901a\u8fc7\u4e8b\u4ef6\u8fdb\u884c\u901a\u4fe1<\/h2>\n<pre class=\"prettyprint linenums\" ><code>   \/\/\u7236\u5b50\u7ec4\u4ef6\u5982\u679c\u5b58\u5728\u53cc\u5411\u7ed1\u5b9a\u5173\u7cfb\u7684\u65f6\u5019,\u53ef\u4ee5\u628a\u590d\u6742\u7684\u4ee3\u7801\u7f29\u51cf\n    const app = Vue.createApp({\n        data(){\n            return { count : 1}\n        },\n        methods:{\n            handleAdd(count){\n                this.count+=count;\n            }\n        },\n        \/\/\u76d1\u542c\u4e8b\u4ef6\u7528-,\u89e6\u53d1\u4e8b\u4ef6\u7528\u9a7c\u5cf0\n        \/\/modelValue =&gt;count\n        \/\/:modelValue=&quot;count&quot; @add=&quot;handleAdd&quot; =&gt; v-model=&quot;count&quot;\n        \/\/v-model:app=&quot;count&quot;\n        template:\n            `&lt;counter v-model=&quot;count&quot;\/&gt;`\n    });\n    app.component(&#039;counter&#039;, {\n        props:[&#039;modelValue&#039;],\/\/app\n        \/\/ emits:{\n        \/\/     add:(count)=&gt;{\n        \/\/         if(count&gt;0){\n        \/\/             return true;\n        \/\/         }\n        \/\/         return false;\n        \/\/     }\n        \/\/ },\n        \/\/update:modelValue [\u56fa\u5b9a\u7684] =&gt; add\n        methods:{\n            handleClick(){\n                \/\/app =&gt; modelValue\n                this.$emit(&#039;update:modelValue&#039;,this.modelValue+3);\n            }\n        },\n        template:\n         `&lt;div @click=&quot;handleClick&quot;&gt;{{modelValue}}&lt;\/div&gt;\n      `\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u7ec4\u4ef6\u95f4\u53cc\u5411\u7ed1\u5b9a\u9ad8\u7ea7\u5185\u5bb9\uff08\u9009\u5b66)<\/h2>\n<pre class=\"prettyprint linenums\" ><code>  const app = Vue.createApp({\n        data() {\n            return {\n                count: &#039;a&#039;,\n            }\n        },\n        template:\n            `&lt;counter v-model.uppercase=&quot;count&quot;\/&gt;`\n    });\n    app.component(&#039;counter&#039;, {\n        props: {\n            \/\/modelModifiers  \u4f20\u9012\u8fc7\u6765\u7684\u4fee\u9970\u7b26\n            &#039;modelValue&#039;: String,\n            &#039;modelModifiers&#039;: {\n                default: () =&gt; ({})\n            }\n        },\n        methods: {\n            handleClick() {\n                let newValue=this.modelValue+&#039;b&#039;;\n                if(this.modelModifiers.uppercase){\n                    newValue=newValue.toUpperCase();\n                }\n                this.$emit(&#039;update:modelValue&#039;, newValue);\n            }\n        },\n        template:\n            `&lt;div @click=&quot;handleClick&quot;&gt;{{modelValue}}&lt;\/div&gt;`\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u4f7f\u7528\u63d2\u69fd\u548c\u5177\u540d\u63d2\u69fd\u89e3\u51b3\u7ec4\u4ef6\u5185\u5bb9\u4f20\u9012\u95ee\u9898(1)<\/h2>\n<pre class=\"prettyprint linenums\" ><code>  const app = Vue.createApp({\n        \/\/slot \u4e2d\u4f7f\u7528\u7684\u6570\u636e,\u4f5c\u7528\u57df\u7684\u95ee\u9898\n        \/\/\u7236(\u5b50)\u6a21\u677f\u91cc\u8c03\u7528\u7684\u6570\u636e\u5c5e\u6027,\u4f7f\u7528\u7684\u90fd\u662f\u7236(\u5b50)\u6a21\u677f\u91cc\u7684\u6570\u636e\n        data(){\n            return { text :&#039;\u63d0\u4ea4&#039;}\n        },\n        \/\/ &lt;div&gt;\u63d0\u4ea4&lt;\/div&gt;   \u63d2\u69fd slot\n        template:\n            `\n            &lt;myform&gt;\n               &lt;div&gt;{{text}}&lt;\/div&gt;\n            &lt;\/myform&gt;\n            &lt;myform&gt;\n                &lt;button&gt;{{text}}&lt;\/button&gt;\n            &lt;\/myform&gt;\n            &lt;myform&gt;\n            &lt;\/myform&gt;\n            `\n    });\n    app.component(&#039;myform&#039;, {\n        methods: {\n            handleClick(){\n                alert(123)\n            }\n        },\n        template:\n        \/\/ &lt;slot&gt;default volue&lt;\/slot&gt;  \u65e0\u63d2\u69fd\u65f6,\u6709\u9ed8\u8ba4\u503c\n            `&lt;div&gt;\n                &lt;input\/&gt;\n                &lt;span @click=&quot;handleClick&quot;&gt;\n                    &lt;slot&gt;default volue&lt;\/slot&gt;\n                &lt;\/span&gt;\n            &lt;\/div&gt;`\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h3>(2)<\/h3>\n<pre class=\"prettyprint linenums\" ><code>   \/\/\u5177\u540d\u63d2\u69fd\n    const app = Vue.createApp({\n        template:`\n            &lt;layout&gt;\n            &lt;template v-slot:header&gt;\n               &lt;div&gt;header&lt;\/div&gt;\n            &lt;\/template&gt;\n            &lt;template v-slot:footer&gt;\n               &lt;div&gt;footer&lt;\/div&gt;\n            &lt;\/template&gt;\n            &lt;\/layout&gt;\n            `\n    });\n    app.component(&#039;layout&#039;, {\n        template:\n            `&lt;div&gt;\n                &lt;slot name=&quot;header&quot;&gt;&lt;\/slot&gt;\n              &lt;div&gt;content&lt;\/div&gt;\n                &lt;slot name=&quot;footer&quot;&gt;&lt;\/slot&gt;\n            &lt;\/div&gt;`\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u4f5c\u7528\u57df\u63d2\u69fd<\/h2>\n<pre class=\"prettyprint linenums\" ><code>    \/\/\u5f53\u5b50\u7ec4\u4ef6\u7684\u5185\u5bb9\u8981\u7531\u7236\u7ec4\u4ef6\u51b3\u5b9a\u7684\u65f6\u5019,\u7528\u8fd9\u4e2a\u4f5c\u7528\u57df\u63d2\u69fd\u5b9e\u73b0\n    const app = Vue.createApp({\n        \/\/\u7b80\u5199 #header -&gt; v-slot:header\n        \/\/\u5bf9\u8c61\u89e3\u6784\n        template: `\n            &lt;list v-slot=&quot;{item}&quot;&gt;\n                &lt;div&gt;{{item}}&lt;\/div&gt;\n            &lt;\/list &gt;\n            `\n    });\n    app.component(&#039;list&#039;, {\n        data() { return { list: [1, 2, 3] } },\n        template:\n            `&lt;div&gt;\n                &lt;slot v-for=&quot;item in list&quot; :item=&quot;item&quot;\/&gt;\n            &lt;\/div&gt;`\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u52a8\u6001\u7ec4\u4ef6\u548c\u5f02\u6b65\u7ec4\u4ef6<\/h2>\n<ul>\n<li>\u52a8\u6001\u7ec4\u4ef6<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>   \/\/\u52a8\u6001\u7ec4\u4ef6: \u6839\u636e\u6570\u636e\u7684\u53d8\u5316,\u7ed3\u5408 component \u8fd9\u4e2a\u6807\u7b7e,\u6765\u968f\u65f6\u52a8\u6001\u5207\u6362\u7ec4\u4ef6\u7684\u663e\u793a\n    const app = Vue.createApp({\n        data(){\n            return {currentItem:&#039;input-item&#039;}\n        },\n        methods:{\n            handleClick(){\n                if(this.currentItem===&#039;input-item&#039;){\n                    this.currentItem=&#039;common-item&#039;;\n                }else{\n                    this.currentItem=&#039;input-item&#039;;\n                }\n            }\n        },\n        \/\/keep-alive&gt; \u4fdd\u5b58\u539f\u5148\u8f93\u5165\u5185\u5bb9\n        template: `\n        &lt;keep-alive&gt;\n            &lt;component :is=&quot;currentItem&quot;\/&gt;\n        &lt;\/keep-alive&gt;\n           &lt;button @click=&quot;handleClick&quot;&gt;\u5207\u6362&lt;\/button&gt;\n            `\n    });\n    app.component(&#039;input-item&#039;, {\n        template: `&lt;input \/&gt;`\n    });\n    app.component(&#039;common-item&#039;, {\n        template: `&lt;div&gt;hello world&lt;\/div&gt;`\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<ul>\n<li>\u5f02\u6b65\u7ec4\u4ef6,,\u540c\u6b65\u7ec4\u4ef6\u7528\u7684\u591a<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>   \/\/\u5f02\u6b65\u7ec4\u4ef6:\n    const app = Vue.createApp({\n        template: `\n           &lt;div&gt;\n            &lt;common-item\/&gt;\n            &lt;async-common-item\/&gt;\n           &lt;\/div&gt;\n            `\n    });\n    app.component(&#039;common-item&#039;, {\n        template: `&lt;div&gt;hello world&lt;\/div&gt;`\n    });\n    app.component(&#039;async-common-item&#039;,Vue.defineAsyncComponent(()=&gt;{\n        return new Promise((resolve,reject)=&gt;{\n            setTimeout(()=&gt;{\n                resolve({\n                    template:`&lt;div&gt;this is an async component&lt;\/div&gt;`\n                })\n            },4000)\n        })\n    }))\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u57fa\u7840\u8bed\u6cd5\u77e5\u8bc6\u70b9\u67e5\u7f3a\u8865\u6f0f<\/h2>\n<pre class=\"prettyprint linenums\" ><code>    \/\/1. v-once \u8ba9\u67d0\u4e2a\u5143\u7d20\u6807\u7b7e\u53ea\u6e32\u67d3\u4e00\u6b21\n    \/\/ ref \u83b7\u53d6 Dom \u8282\u70b9 \/ \u7ec4\u4ef6\u5f15\u7528 \u7684\u4e00\u4e2a\u8bed\u6cd5\n    \/\/ provide \/ inject \u591a\u503c\u4f20\u9012\n    const app = Vue.createApp({\n        data(){\n            return {count:1}\n        },\n        provide(){\n            return{\n                count:this.count,\n            }\n        },\n        \/\/ mounted(){\n        \/\/     console.log(this.$refs.common.sayHello());\n        \/\/ },\n        \/\/ &lt;common-item  ref=&quot;common&quot;\/&gt;\n        \/\/\/\/ &lt;div @click=&quot;count+=1&quot; v-once&gt;  \u53ea\u6e32\u67d3\u4e00\u6b21,1 \u4e00\u76f4\n        template: `\n           &lt;div&gt;\n              &lt;child :count=&quot;count&quot;\/&gt;\n              &lt;button @click=&quot;count+=1&quot;&gt;Add&lt;\/button&gt;\n           &lt;\/div&gt;\n            `\n    });\n    app.component(&#039;child&#039;, {\n        \/\/ methods:{\n        \/\/     sayHello(){\n        \/\/         alert(&#039;hello world&#039;)\n        \/\/     }\n        \/\/ },\n        template: `&lt;child-child :count=&quot;count&quot;\/&gt;`\n    });\n    app.component(&#039;child-child&#039;, {\n        inject:[&#039;count&#039;],\n        template: `&lt;div&gt;{{count}}&lt;\/div&gt;`\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h1>Vue \u4e2d\u7684\u52a8\u753b<\/h1>\n<h2>\u4f7f\u7528 Vue \u5b9e\u73b0\u57fa\u7840\u7684 CSS \u8fc7\u6e21\u4e0e\u52a8\u753b\u6548\u679c<\/h2>\n<pre class=\"prettyprint linenums\" ><code>    &lt;style&gt;\n        \/* \u52a8\u753b\n        @keyframes leftToRight{\n            0%{\n                transform: translateX(-100px);\n            }\n            50%{\n                transform: translateX(-50px);\n            }\n            0%{\n                transform: translateX(0px);\n            }\n        }\n        .animation{\n            animation: leftToRight 3s;\n        } *\/\n        .transition{\n            transition: 3s background-color ease;\n        }\n        \/* .blue{\n            background: blue;\n        }\n        .green{\n            background: green;\n        } *\/\n    &lt;\/style&gt;\n&lt;script&gt;\n    \/\/\u8fc7\u6e21,\u52a8\u753b\n    const app = Vue.createApp({\n        data(){\n            return {\n                styleObj:{\n                    background:&#039;blue&#039;\n                }\n                \/\/ animate:{\n                \/\/     \/\/ animation:false\n                \/\/     transition:true,\n                \/\/     blue:true,\n                \/\/     green:false\n                \/\/ }\n            }\n        },\n        methods:{\n            handleClick(){\n                \/\/ this.animate.blue=!this.animate.blue\n                \/\/ this.animate.green=!this.animate.green\n                if(this.styleObj.background===&#039;blue&#039;){\n                    this.styleObj.background=&#039;green&#039;;\n                }else{\n                    this.styleObj.background=&#039;blue&#039;;\n                }\n            }\n        },\n        template: `\n           &lt;div&gt;\n              &lt;div class=&quot;transition&quot; :style=&quot;styleObj&quot;&gt;hello world&lt;\/div&gt;\n              &lt;button @click=&quot;handleClick&quot;&gt;\u5207\u6362&lt;\/button&gt;\n           &lt;\/div&gt;\n            `\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u4f7f\u7528 transition \u6807\u7b7e\u5b9e\u73b0\u5355\u5143\u7d20\u7ec4\u4ef6\u7684\u8fc7\u6e21\u548c\u52a8\u753b\u6548\u679c<\/h2>\n<ul>\n<li>(1) \u5c01\u88c5<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>   &lt;style&gt;\n        @keyframes shake{\n            0%{\n                transform: translateX(-100px);\n            }\n            50%{\n                transform: translateX(-50px);\n            }\n            100%{\n                transform: translateX(50px);\n            }\n        }\n        .v-leave-active{\n            animation:shake 3s;\n        }\n        .v-enter-active{\n            animation:shake 3s;\n        }\n    &lt;\/style&gt;\n&lt;script&gt;\n    \/\/\u5355\u5143\u7d20\/\u5355\u7ec4\u4ef6\u7684\u5165\u573a\u51fa\u573a\u52a8\u753b\n    const app = Vue.createApp({\n        data() {\n            return {\n                show: false,\n            }\n        },\n        methods: {\n            handleClick() {\n                this.show = !this.show;\n            }\n        },\n        \/\/&lt;transition name=&quot;hello&quot;&gt;  hello -&gt; v \u4e0a style\n        template: `\n           &lt;div&gt;\n           &lt;transition&gt;\n              &lt;div v-if=&quot;show&quot;&gt;hello world&lt;\/div&gt;\n              &lt;\/transition&gt;\n              &lt;button @click=&quot;handleClick&quot;&gt;\u5207\u6362&lt;\/button&gt;\n           &lt;\/div&gt;\n            `\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<ul>\n<li>(2)<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    const app = Vue.createApp({\n        data() {\n            return {\n                show: false,\n            }\n        },\n        methods: {\n            handleClick() {\n                this.show = !this.show;\n            },\n            handleBeforeEnter(el){\n                el.style.color=&quot;red&quot;;\n            },\n            handleEnterActive(el,done){\n                const animation= setInterval(()=&gt;{\n                    const color=el.style.color;\n                    if(color===&#039;red&#039;){\n                        el.style.color=&quot;green&quot;;\n                    }else{\n                        el.style.color=&quot;red&quot;;\n                    }\n                },1000)\n                setTimeout(()=&gt;{\n                    clearInterval(animation);\n                    done();\n                },3000);\n                \/\/ setTimeout()\n            },\n            handleEnterEnd(){\n                alert(123);\n            }\n        },\n        \/\/&lt;transition type=&quot;animation&quot;&gt; \u63a7\u5236\u52a8\u753b\u548c\u8fc7\u6e21\u540c\u6b65\u6267\u884c\u7684\u6548\u679c\n        \/\/:duration=&quot;{enter:1000,leave:3000}&quot; \u63a7\u5236\u65f6\u95f4\n        template:\n        \/\/el, el done,el,el,el done,el\n         `\n           &lt;div&gt;\n                &lt;transition\n                    :css=&quot;false&quot;\n                    @before-enter=&quot;handleBeforeEnter&quot;\n                    @enter=&quot;handleEnterActive&quot;\n                    @after-enter=&quot;handleEnterEnd&quot;\n                    @before-leave=\n                    @leave=\n                    @leave-after=\n                &gt;\n                    &lt;div v-show=&quot;show&quot;&gt;hello world&lt;\/div&gt;\n                &lt;\/transition&gt;\n                &lt;button @click=&quot;handleClick&quot;&gt;\u5207\u6362&lt;\/button&gt;\n           &lt;\/div&gt;\n            `\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u7ec4\u4ef6\u548c\u5143\u7d20\u5207\u6362\u52a8\u753b\u7684\u5b9e\u73b0<\/h2>\n<pre class=\"prettyprint linenums\" ><code> &lt;style&gt;\n        .v-leave-to{\n            opacity: 0;\n        }\n        .v-enter-from{\n            opacity: 0;\n        }\n        .v-enter-active,\n        .v-leave-active{\n            transition: opacity 1s ease-in;\n        }\n        .v-enter-to,\n        .v-leave-from{\n            opacity: 1;\n        }\n    &lt;\/style&gt;\n&lt;script&gt;\n    \/\/\u591a\u4e2a\u5355\u5143\u7d20\u6807\u7b7e\u4e4b\u95f4\u7684\u5207\u6362\n    \/\/\u591a\u4e2a\u5355\u7ec4\u4ef6\u4e4b\u95f4\u7684\u5207\u6362\n    const ComponentA={\n        template:&#039;&lt;div&gt;hello world&lt;\/div&gt;&#039;\n    }\n    const ComponentB={\n        template:&#039;&lt;div&gt;bye world&lt;\/div&gt;&#039;\n    }\n    const app = Vue.createApp({\n        data() {\n            return {\n                \/\/ show: false\n                component:&#039;component-a&#039;\n                }\n        },\n        methods: {\n            handleClick() {\n                \/\/ this.show = !this.show;\n               if(this.component === &#039;component-a&#039;){\n                 this.component=&#039;component-b&#039;;\n               }else{\n                this.component=&#039;component-a&#039;;\n               }\n            },\n        },\n        components:{\n            &#039;component-a&#039;:ComponentA,\n            &#039;component-b&#039;:ComponentB,\n        },\n        template:\n        \/\/in-out : \u5148\u8fdb\u6765,\u518d\u6162\u6162\u9690\u85cf\n        \/\/appear : \u7b2c\u4e00\u6b21\u8fdb\u6765,,\u4e5f\u4f1a\u6709\u6e10\u53d8\n        \/\/\u5355\u7ec4\u4ef6\u5199\u6cd5 &lt;div v-else=&quot;show&quot;&gt;bye world&lt;\/div&gt;\n         `\n           &lt;div&gt;\n                &lt;transition mode=&quot;out-in&quot; appear&gt;\n                    &lt;component :is=&quot;component&quot;\/&gt;\n                &lt;\/transition&gt;\n                &lt;button @click=&quot;handleClick&quot;&gt;\u5207\u6362&lt;\/button&gt;\n           &lt;\/div&gt;\n            `\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h2>\u5217\u8868\u52a8\u753b<\/h2>\n<ul>\n<li>\u4f5c\u4e1a: \u79fb\u9664\u52a8\u753b,\u70b9\u51fb\u6570\u5b57\u53ef\u4ee5\u5220\u9664\u7684\u529f\u80fd<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;link\n      rel=&quot;stylesheet&quot;\n      href=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/4.1.1\/animate.min.css&quot;\n    \/&gt;\n    &lt;style&gt;\n      \/* \u5165\u573a *\/\n      .v-enter-from {\n        opacity: 0;\n        transform: translateY(30px);\n      }\n      .v-enter-active {\n        transition: all 0.5s ease-in;\n      }\n      .v-enter-to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n      .v-move {\n        transition: all 0.5s ease-in;\n      }\n      .list-item {\n        display: inline-block;\n        margin-right: 10px;\n      }\n    &lt;\/style&gt;\n    &lt;script src=&quot;https:\/\/unpkg.com\/vue@next&quot;&gt;&lt;\/script&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;\n  &lt;\/body&gt;\n  &lt;script&gt;\n    \/\/\u5217\u8868\u52a8\u753b\u7684\u5b9e\u73b0\n    const app = Vue.createApp({\n      data() {\n        return {\n          list: [1, 2, 3],\n        };\n      },\n      methods: {\n        handleClick() {\n          this.list.unshift(this.list.length + 1);\n        },\n      },\n      template: `\n      &lt;div&gt;  \n        &lt;transition-group&gt;\n          &lt;span class=&quot;list-item&quot; v-for=&quot;item in list&quot; :key=&quot;item&quot;&gt;{{item}}&lt;\/span&gt;\n        &lt;\/transition-group&gt;\n        &lt;button @click=&quot;handleClick&quot;&gt;\u589e\u52a0&lt;\/button&gt;\n      &lt;\/div&gt;\n    `,\n    });\n    const vm=app.mount(&#039;#root&#039;)\n  &lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<h2>\u72b6\u6001\u52a8\u753b<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/\/\u72b6\u6001\u52a8\u753b,svg\n    const app = Vue.createApp({\n        data() {\n            return {\n                number: 1,\n                animateNumber: 1\n            }\n        },\n        methods: {\n            handleClick() {\n                this.number = 10;\n                if (this.animateNumber &lt; this.number) {\n                    const animation = setInterval(() =&gt; {\n                        this.animateNumber += 1;\n                        if (this.animateNumber === 10) {\n                            clearInterval(animation);\n                        }\n                    }, 100);\n                }\n            },\n        },\n        template:\n            `\n         &lt;div&gt;\n                &lt;div&gt;{{animateNumber}}&lt;\/div&gt;\n                &lt;button @click=&quot;handleClick&quot;&gt;\u589e\u52a0&lt;\/button&gt;\n           &lt;\/div&gt;\n        `\n    });\n    const vm = app.mount(&#039;#root&#039;);<\/code><\/pre>\n<h1>Vue \u4e2d\u7684\u9ad8\u7ea7\u8bed\u6cd5<\/h1>\n<h2>Mixin \u6df7\u5165\u7684\u57fa\u7840\u8bed\u6cd5\uff081\uff09<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/\/\u7ec4\u4ef6 data,methods \u4f18\u5148\u7ea7\u9ad8\u4e8e mixin data,methods \u7684\u4f18\u5148\u7ea7,\n    \/\/\u751f\u547d\u5468\u671f\u51fd\u6570,mixin \u7684\u5148\u6267\u884c,\u540e\u6267\u884c\u7ec4\u4ef6\u91cc\u9762\u7684\n    const myMixin = {\n      data() {\n        return { number: 2,count:1 };\n      },\n      created(){\n        console.log(&#039;mixin created&#039;);\n      },\n      methods:{\n        handleClick() {\n          console.log(&quot;mixin handleClick&quot;);\n        },\n      }\n    };\n\n    const app = Vue.createApp({\n      data() {\n        return {number:1};\n      },\n      created(){\n        console.log(&#039;created&#039;);\n      },\n      mixins: [myMixin],\n      methods: {\n        handleClick() {\n          console.log(&quot;handleClick&quot;);\n        },\n      },\n      template: `\n      &lt;div&gt;  \n        &lt;div&gt;{{number}}&lt;\/div&gt;\n        &lt;child\/&gt;\n        &lt;button @click=&quot;handleClick&quot;&gt;\u589e\u52a0&lt;\/button&gt;\n      &lt;\/div&gt;\n    `,\n    });\nconst vm = app.mount(&quot;#root&quot;);<\/code><\/pre>\n<h2>Mixin \u6df7\u5165\u7684\u57fa\u7840\u8bed\u6cd5\uff082\uff09<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/\/\u5168\u5c40 mixin \u7ef4\u62a4\u6027\u4e0d\u9ad8\n    const myMixin = {\n      number: 1,\n    };\n\n    const app = Vue.createApp({\n      mixins:[myMixin],\n      \/\/\u81ea\u5b9a\u4e49\u5c5e\u6027,\u7ec4\u4ef6\u4e2d\u7684\u5c5e\u6027\u4f18\u5148\u7ea7\u9ad8\u4e8e mixin \u5c5e\u6027\u7684\u4f18\u5148\u7ea7\n      number: 2,\n      template: `\n      &lt;div&gt;  \n        &lt;div&gt;{{this.$options.number}}&lt;\/div&gt;\n      &lt;\/div&gt;\n    `,\n    });\n    \/\/\u4fee\u6539\u4f18\u5148\u7ea7\n    app.config.optionMergeStrategies.number=(mixinVal,appValue)=&gt;{\n        return mixinVal||appValue\n    }<\/code><\/pre>\n<h2>\u5f00\u53d1\u5b9e\u73b0 Vue \u4e2d\u7684\u81ea\u5b9a\u4e49\u6307\u4ee4\uff081\uff09<\/h2>\n<pre class=\"prettyprint linenums\" ><code>    \/*\u5c40\u90e8\u6307\u4ee4\n    const directives = {\n      focus: {\n        mounted(el) {\n          el.focus();\n        },\n      },\n    };*\/\n    \/\/\u81ea\u5b9a\u4e49\u6307\u4ee4 directive\n    const app = Vue.createApp({\n      data() {\n        return {\n          hello:true\n        }\n      },\n      \/\/\u5c40\u90e8: directives:directives,\n      template: `\n        &lt;div&gt;  \n          &lt;div v-if=&quot;hello&quot;&gt;\n            &lt;input v-focus\/&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n    `,\n    });\n\n    app.directive(&quot;focus&quot;, {\n      beforeMount(el) {\n        console.log(&quot;beforeMount&quot;);\n      },\n      mounted(el) {\n        console.log(&quot;mounted&quot;);\n        el.focus();\n      },\n      beforeUpdate(){\n        console.log(&quot;beforeUpdate&quot;);\n      },\n      updated(){\n        console.log(&#039;updated&#039;);\n      },\n      \/\/\u5373\u5c06\u9500\u6bc1\n      beforeUnmount(){\n        console.log(&#039;beforeUnmount&#039;);\n      },\n      \/\/\u9500\u6bc1\u8fc7\u540e\n      unmounted(){\n        console.log(&#039;unmounted&#039;);\n      }\n    });\n    const vm = app.mount(&quot;#root&quot;);<\/code><\/pre>\n<h2>\u5f00\u53d1\u5b9e\u73b0 Vue \u4e2d\u7684\u81ea\u5b9a\u4e49\u6307\u4ee4\uff082\uff09<\/h2>\n<pre class=\"prettyprint linenums\" ><code> .header{\n        position: absolute;\n      }<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>   const app = Vue.createApp({\n      data() {\n        return {\n          distance:110\n        }\n      },\n       \/\/v-pos:left=&quot;distance&quot;  \u8ddd\u79bb\u5de6\u4fa7\u6709\u8ddd\u79bb\n      template: `\n        &lt;div&gt;  \n          &lt;div v-pos:left=&quot;distance&quot; class=&#039;header&#039;&gt;\n            &lt;input\/&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n    `,\n    });\n    \/\/\u7b80\u5199 \u2193 mounted,undated : top:300 &lt;div v-pos=&quot;top&quot; class=&#039;header&#039;&gt;\n    app.directive(&#039;pos&#039;,(el,binding)=&gt;{\n      el.style[binding.arg]=(binding.value+&#039;px&#039;)\n    })\n\n    \/\/ app.directive(&quot;pos&quot;, {\n    \/\/  mounted(el,binding){\n    \/\/   el.style.top=(binding.value+&#039;px&#039;)\n    \/\/  },\n    \/\/  \/\/\u5f53\u6570\u636e\u53d1\u751f\u53d8\u5316\u65f6,\u7ec4\u4ef6\u8981\u91cd\u65b0\u6e32\u67d3,\u8fd9\u4f1a\u91cd\u65b0\u91cd\u7f6e\u4e00\u4e0b\u9ad8\u5ea6\n    \/\/  undated(el,binding){\n\n    \/\/   el.style.top=(binding.value+&#039;px&#039;)\n    \/\/  }\n    \/\/ });\n    const vm = app.mount(&quot;#root&quot;);<\/code><\/pre>\n<h2>Teleport \u4f20\u9001\u95e8\u529f\u80fd<\/h2>\n<pre class=\"prettyprint linenums\" ><code>    &lt;style&gt;\n      .area {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 200px;\n        height: 300px;\n        background: green;\n      }\n      .mask {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        background: #000;\n        opacity: 0.5;\n        color: #fff;\n        font-size: 100px;\n      }\n    &lt;\/style&gt;\n    &lt;script src=&quot;https:\/\/unpkg.com\/vue@next&quot;&gt;&lt;\/script&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;\n    &lt;div id=&quot;hello&quot;&gt;&lt;\/div&gt;\n\n  &lt;\/body&gt;\n  &lt;script&gt;\n    const app = Vue.createApp({\n      data() {\n        return {\n          show: false,\n          message:&#039;hello&#039;\n        };\n      },\n      methods: {\n        handleBtnClick() {\n          this.show = !this.show;\n        },\n      },\n      \/\/&lt;teleport to=&quot;body&quot;&gt; \u4f20\u9012\u7ed9 body,\u8499\u5c42\u94fa\u6ee1\u5c4f\u5e55\n      \/\/\u5728\u8499\u5c42\u663e\u793a\u6587\u5b57\n      template: `\n        &lt;div class=&quot;area&quot;&gt;  \n          &lt;button @click=&quot;handleBtnClick&quot;&gt;\u6309\u94ae&lt;\/button&gt;\n          &lt;teleport to=&quot;body&quot;&gt;\n            &lt;div class=&quot;mask&quot; v-show=&quot;show&quot;&gt;{{message}}&lt;\/div&gt;\n          &lt;\/teleport&gt;\n        &lt;\/div&gt;\n    `,\n    });\n    const vm = app.mount(&quot;#root&quot;);\n  &lt;\/script&gt;<\/code><\/pre>\n<h2>\u66f4\u52a0\u5e95\u5c42\u7684 render \u51fd\u6570(\u9009\u5b66)<\/h2>\n<pre class=\"prettyprint linenums\" ><code>    \/\/render function\n    \/\/template -&gt; render -&gt; h -&gt; \u865a\u62df DOM(JS \u5bf9\u8c61)-&gt;\u771f\u5b9e DOM -&gt;\u5c55\u793a\u5230\u9875\u9762\u4e0a\n    const app = Vue.createApp({\n      template: `\n      &lt;my-title :level=&quot;2&quot;&gt;\n        hello de\n      &lt;\/my-title&gt;\n      `,\n    });\n    \/\/\u5c55\u793a\u4e0d\u540c\u5927\u5c0f\u7684\u6807\u9898 hello\n    app.component(&quot;my-title&quot;, {\n      props:[&#039;level&#039;],\n      render(){\n        const {h}=Vue;\n        \/\/\u865a\u62df dom: 1.\u53ef\u4ee5\u8ba9 vue \u7684\u6027\u80fd\u66f4\u5feb 2.\u8ba9 vue \u5177\u5907\u4e00\u4e2a\u8de8\u5e73\u53f0\u7684\u80fd\u529b (weex \u5f00\u53d1\u5de5\u5177\u53bb\u7f16\u5199\u79fb\u52a8\u7aef\u7684\u4ee3\u7801)\n        \/*\n        {\n          tagName:&#039;div&#039;,\n          attributes:{},\n          text:&#039;hello&#039;,\n        }\n        *\/\n         return h(&quot;h&quot; + this.level, {}, [\n          this.$slots.default(),\n         \/\/\u65e0\u9650\u5d4c\u5957\n          h(&quot;h4&quot;, {}, &quot;dell&quot;),\n        ]); \/\/\u8fd4\u56de\u865a\u62df dom \u8282\u70b9\u7684\u51fd\u6570\n      }\n    });\n    const vm = app.mount(&quot;#root&quot;);<\/code><\/pre>\n<h2>\u63d2\u4ef6\u7684\u5b9a\u4e49\u548c\u4f7f\u7528<\/h2>\n<pre class=\"prettyprint linenums\" ><code class=\"language-js\">    \/\/plugin \u63d2\u4ef6,\u4e5f\u662f\u628a\u901a\u7528\u6027\u7684\u529f\u80fd\u5c01\u88c5\u8d77\u6765\n    const myPlugin = {\n      install(app, options) {\n        app.provide(&quot;name&quot;, &quot;delllee&quot;);\n        app.directive(&quot;focus&quot;, {\n          mouted(el) {\n            el.focus();\n          },\n        });\n        app.mixin({\n          mounted() {\n            console.log(&quot;mixin&quot;);\n          },\n        });\n        app.config.globalProperties.$sayHello = &quot;hello world&quot;;\n      },\n    };\n\n    const app = Vue.createApp({\n      template: `\n        &lt;my-title \/&gt;\n     `,\n    });\n\n    app.component(&quot;my-title&quot;, {\n      inject: [&quot;name&quot;],\n      mounted() {\n        console.log(this.$sayHello);\n      },\n      template: `&lt;div&gt;{{name}}&lt;input v-focus\/&gt;&lt;\/div&gt;`,\n    });\n\n    app.use(myPlugin, { name: &quot;dell&quot; });\n    const vm = app.mount(&quot;#root&quot;);<\/code><\/pre>\n<h2>\u6570\u636e\u6821\u9a8c\u63d2\u4ef6\u5f00\u53d1\u5b9e\u4f8b<\/h2>\n<pre class=\"prettyprint linenums\" ><code class=\"language-js\"> const app = Vue.createApp({\n      data() {\n        return {\n          name: &quot;dell&quot;,\n          age: 28,\n        };\n      },\n      rules: {\n        age: {\n          validate: (age) =&gt; age &gt; 25,\n          message: &quot;too young&quot;,\n        },\n        name: {\n          validate: (name) =&gt; name.length &gt;= 4,\n          message: &quot;name too short&quot;,\n        },\n      },\n      template: `\n        &lt;div&gt;name:{{name}},age:{{age}}&lt;\/div&gt;\n     `,\n    });\n\n    const validatorPlugin = (app, options) =&gt; {\n      app.mixin({\n        created() {\n          for (let key in this.$options.rules) {\n            const item = this.$options.rules[key];\n            this.$watch(key, (value) =&gt; {\n              const result = item.validate(value);\n              if (!result) console.log(item.message);\n            });\n          }\n        },\n      });\n    };\n\n    app.use(validatorPlugin)\n    const vm = app.mount(&quot;#root&quot;);<\/code><\/pre>\n<h1>Composition API<\/h1>\n<h2>Setup \u51fd\u6570\u7684\u4f7f\u7528<\/h2>\n<pre class=\"prettyprint linenums\" ><code> const app = Vue.createApp({\n      template: `\n        &lt;div @click=&quot;handleClick&quot;&gt;{{name}}&lt;\/div&gt;\n     `,\n      methods: {\n        test() {\n          console.log(this.$options.setup());\n        },\n      },\n      mounted() {\n        this.test();\n      },\n      \/\/created \u5b9e\u4f8b\u88ab\u5b8c\u5168\u521d\u59cb\u5316\u4e4b\u524d\n      setup(props, context) {\n        return {\n          name: &quot;dell&quot;,\n          handleClick: () =&gt; {\n            alert(123);\n          },\n        };\n      },\n    });\n\n    const vm = app.mount(&quot;#root&quot;);<\/code><\/pre>\n<h2>ref\uff0creactive \u54cd\u5e94\u5f0f\u5f15\u7528\u7684\u7528\u6cd5\u548c\u539f\u7406\uff081\uff09<\/h2>\n<pre class=\"prettyprint linenums\" ><code>    \/\/ref, reactive \u54cd\u5e94\u5f0f\u7684\u5f15\u7528\n    \/\/\u539f\u7406: \u901a\u8fc7 proxy \u5bf9\u6570\u636e\u8fdb\u884c\u5c01\u88c5, \u5f53\u6570\u636e\u53d8\u5316\u65f6, \u89e6\u53d1\u6a21\u677f\u7b49\u5185\u5bb9\u7684\u66f4\u65b0\n    \/\/ref \u5904\u7406\u57fa\u7840\u7c7b\u578b\u7684\u6570\u636e\n    \/\/reactive \u5904\u7406\u975e\u57fa\u7840\u7c7b\u578b\u7684\u6570\u636e\n    const app = Vue.createApp({\n      template: `\n       &lt;div&gt;{{nameObj[0]}}&lt;\/div&gt;\n      `,\n      setup(props, context) {\n        \/*(1)\n         const {ref}=Vue;\n         proxy,&#039;dell&#039;\u53d8\u6210 proxy({value:&#039;dell&#039;})\u8fd9\u6837\u7684\u4e00\u4e2a\u54cd\u5e94\u5f0f\u5f15\u7528\n         let name = ref(&#039;dell&#039;);\n         setTimeout(() =&gt; {\n           name.value = &quot;lee&quot;;\n         }, 2000);\n         return { name };*\/\n\n        const { reactive } = Vue;\n        \/\/proxy,{ name: &quot;dell&quot; }\u53d8\u6210 proxy({ name: &quot;dell&quot; })\u8fd9\u6837\u7684\u4e00\u4e2a\u54cd\u5e94\u5f0f\u5f15\u7528\n        const nameObj = reactive([123]);\n        setTimeout(() =&gt; {\n          nameObj[0] = 456;\n        }, 2000);\n        return { nameObj };\n      },\n    });\n\n    const vm = app.mount(&quot;#root&quot;);<\/code><\/pre>\n<h2>ref\uff0creactive \u54cd\u5e94\u5f0f\u5f15\u7528\u7684\u7528\u6cd5\u548c\u539f\u7406\uff082\uff09<\/h2>\n<pre class=\"prettyprint linenums\" ><code>    const app = Vue.createApp({\n      template: `\n       &lt;div&gt;{{name}}&lt;\/div&gt;\n      `,\n      setup(props, context) {\n        const { reactive,readonly,toRefs } = Vue;\n        const nameObj = reactive({name:&#039;dell&#039;,age:28});\n        \/\/copy \u51fa\u6765\u7684\u4e0d\u80fd\u88ab\u54cd\u5e94\u5f0f\u4fee\u6539\u7684\n        \/\/const copyNameObj=readonly(nameObj)\n        setTimeout(() =&gt; {\n          nameObj.name=&#039;lee&#039;\n          \/\/ nameObj[0] = 456;\n          \/\/ copyNameObj[0]=456\n        }, 2000);\n        \/*toRefs \n          proxy({name:&#039;dell&#039;,age:28}),{\n            name:proxy({value:&#039;dell&#039;}),\n            age:proxy({value:28})\n          }\n        *\/\n        const {name}=toRefs(nameObj);\n        return { name };\n      },\n    });\n\n    const vm = app.mount(&quot;#root&quot;);<\/code><\/pre>\n<h2>toRef \u4ee5\u53ca context \u53c2\u6570(1)<\/h2>\n<pre class=\"prettyprint linenums\" ><code>  const app = Vue.createApp({\n      template: `\n       &lt;div&gt;{{age}}&lt;\/div&gt;\n      `,\n      setup(props, context) {\n        \/\/toRefs \u4ece data \u8fd9\u54cd\u5e94\u5f0f\u5bf9\u8c61\u65f6\u627e\u6570\u636e\u7684\u65f6\u5019,\n        \/\/\u5982\u679c\u627e\u4e0d\u5230\u7684\u8bdd,\u4e0d\u4f1a\u7ed9 age \u9ed8\u8ba4\u7684\u54cd\u5e94\u5f0f\u5f15\u7528,\u800c\u662f\u7ed9 undefined\n        const { reactive,toRef } = Vue;\n        const data = reactive({name:&#039;dell&#039;});\/\/\u4f46\u662f\u6700\u597d\u7ed9\u4e2a\u9ed8\u8ba4\u503c age:0\n        const age=toRef(data,&#039;age&#039;)\/\/\u53d6\u4e0d\u5230\u6570\u636e\u5219\u7f6e\u7a7a\n        setTimeout(()=&gt;{\n          age.value=&#039;lee&#039;\n        },2000)\n        return { age };\n      },\n    });<\/code><\/pre>\n<h2>toRef \u4ee5\u53ca context \u53c2\u6570\uff082\uff09<\/h2>\n<pre class=\"prettyprint linenums\" ><code>   const app = Vue.createApp({\n      methods: {\n        handleChange() {\n          alert(&quot;change&quot;);\n        },\n      },\n      template: `&lt;child @change=&#039;handleChange&#039;&gt;parent&lt;\/child&gt;`,\n    });\n    \/\/\u7236\u7ec4\u4ef6\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\n    app.component(&quot;child&quot;, {\n      mounted() {\n        \/\/ console.log(this.$slots);\n        this.$emit(&quot;change&quot;);\n      },\n      template: &#039;&lt;div @click=&quot;handleClick&quot;&gt;123324&lt;\/div&gt;&#039;,\n      setup(props, context) {\n        const { h } = Vue;\n        \/\/\u901a\u8fc7 slots \u53ef\u4ee5\u5b9e\u73b0\u4f20\u7edf\u7684 this.$slots \u7684\u4f5c\u7528,\n        \/\/emit \u53ef\u4ee5\u5b9e\u73b0\u4f20\u7edf\u8bed\u6cd5\u4e2d\u7684 this.$emit \u7684\u5411\u4e0a\u89e6\u53d1\u7684\u4e00\u4e2a\u529f\u80fd\n        const { attrs, slots, emit } = context;\n        \/\/ console.log(attrs);\/\/\u83b7\u53d6 None-Props \u5c5e\u6027\u7684\u5185\u5bb9\n        \/\/ return ()=&gt;h(&#039;div&#039;,{},slots.default())\n        function handleClick() {\n          emit(&quot;change&quot;);\n        }\n        return {\n          handleClick,\n        };\n      },\n    });<\/code><\/pre>\n<h2>\u4f7f\u7528 Composition API \u5f00\u53d1 TodoList<\/h2>\n<pre class=\"prettyprint linenums\" ><code>    \/\/\u5173\u4e8e list \u64cd\u4f5c\u7684\u5185\u5bb9\u8fdb\u884c\u4e86\u5c01\u88c5\n    const listRelativeEffect = () =&gt; {\n      const { reactive } = Vue;\n      const list = reactive([]);\n      const addItemToList = (item) =&gt; {\n        list.push(item);\n      };\n      return { list, addItemToList };\n    };\n\n    \/\/\u5173\u4e8e inputValue \u64cd\u4f5c\u7684\u5185\u5bb9\u8fdb\u884c\u4e86\u5c01\u88c5\n    const inputRelativeEffect = () =&gt; {\n      const { ref } = Vue;\n      const inputValue = ref(&quot;&quot;);\n      const handleInputValueChange = (e) =&gt; {\n        inputValue.value = e.target.value;\n      };\n      return { inputValue, handleInputValueChange };\n    };\n    const app = Vue.createApp({\n      setup() {\n        \/\/\u6d41\u7a0b\u8c03\u5ea6\u4e2d\u8f6c\n        const { list, addItemToList } = listRelativeEffect();\n        const { inputValue, handleInputValueChange } = inputRelativeEffect();\n\n        return {\n          list,\n          addItemToList,\n          inputValue,\n          handleInputValueChange,\n        };\n      },\n      template: `\n      &lt;div&gt;\n        &lt;div&gt;\n          &lt;input :value=&quot;inputValue&quot; @input=&quot;handleInputValueChange&quot;\/&gt;\n          &lt;button @click=&quot;()=&gt;addItemToList(inputValue)&quot;&gt;\u63d0\u4ea4&lt;\/button&gt;\n        &lt;\/div&gt;\n        &lt;ul&gt;\n          &lt;li v-for=&quot;(item,index) in list&quot; :key=&quot;index&quot;&gt;{{item}}&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n      `,\n    });<\/code><\/pre>\n<h2>computed \u65b9\u6cd5\u751f\u6210\u8ba1\u7b97\u5c5e\u6027<\/h2>\n<pre class=\"prettyprint linenums\" ><code>     const app = Vue.createApp({\n      setup() {\n        const { ref, reactive,computed } = Vue;\n        const countObj=reactive({count:0})\n        \/\/ const count = ref(0);\n        const handleClick = () =&gt; {\n          \/\/ count.value += 1;\n          countObj.count+=1\n        };\n        let countAddFive = computed({\n          get: () =&gt; {\n            \/\/ return count.value + 5;\n            return countObj.count + 5;\n          },\n          set: (param) =&gt; {\n            \/\/ count.value = param-5;\/\/95--100\n            countObj.count=param-5;\n          },\n        });\n        setTimeout(() =&gt; {\n          countAddFive.value = 100;\n        }, 3000);\n        return { countObj, handleClick, countAddFive };\n      },\n      template: `\n      &lt;div&gt;\n        &lt;span @click=&quot;handleClick&quot;&gt;{{countObj.count}}&lt;\/span&gt;--{{countAddFive}}\n      &lt;\/div&gt;\n      `,\n    });<\/code><\/pre>\n<h2>watch \u548c watchEffect \u7684\u4f7f\u7528\u548c\u5dee\u5f02\u6027\uff081\uff09<\/h2>\n<pre class=\"prettyprint linenums\" ><code>    \/\/watch \u4fa6\u542c\u5668\n    const app = Vue.createApp({\n      setup() {\n        const { ref, reactive, watch, toRefs } = Vue;\n\n        const nameObj = reactive({ name: &quot;dell&quot; ,enName:&#039;lee&#039;});\n        \/\/ \u5177\u5907\u4e00\u5b9a\u7684\u60f0\u6027 lazy\n        \/\/ \u53c2\u6570\u53ef\u4ee5\u62ff\u5230\u539f\u59cb\u548c\u5f53\u524d\u503c\n        \/\/ const name = ref(&quot;dell&quot;);\n        \/\/ watch(name, (currentValue, prevValue) =&gt; {\n        \/\/   console.log(currentValue, prevValue);\n        \/\/ });\n        watch(\n          [() =&gt; nameObj.name,() =&gt; nameObj.enName],\n          ([curName,curEng],[prevName,preEng]) =&gt; {\n            console.log(curName,curEng,&#039;---&#039;,prevName,preEng);\n          }\n        );\n        const { name ,enName} = toRefs(nameObj);\n        return { name,enName };\n      },\n      template: `\n      &lt;div&gt;\n        &lt;div&gt;\n          Name: &lt;input v-model=&quot;name&quot;\/&gt;\n        &lt;\/div&gt;\n        &lt;div&gt;\n          Name is {{name}}\n        &lt;\/div&gt;\n        &lt;div&gt;\n          Name: &lt;input v-model=&quot;enName&quot;\/&gt;\n        &lt;\/div&gt;\n        &lt;div&gt;\n          Name is {{enName}}\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      `,\n    });<\/code><\/pre>\n<h2>watch \u548c watchEffect \u7684\u4f7f\u7528\u548c\u5dee\u5f02\u6027\uff082\uff09<\/h2>\n<ul>\n<li>watch \u4fa6\u542c\u5668<\/li>\n<li>watchEffect \u4fa6\u542c\u5668,\u504f\u5411\u4e8e effect<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>        watch(\n        [() =&gt; nameObj.name,() =&gt; nameObj.enName],\n        ([curName,curEng],[prevName,preEng]) =&gt; {\n        console.log(&#039;watch&#039;,curName,prevName,&#039;---&#039;,curEng,preEng);\n        },{immediate:true}\n        );\n       \/\/\u7acb\u5373\u6267\u884c,\u6ca1\u6709\u60f0\u6027 immediate\n        const stop = watchEffect(() =&gt; {\n          \/\/\u6709\u4e9b\u5f02\u6b65\u64cd\u4f5c\n          \/\/\u6709\u4f9d\u8d56,\u6539\u53d8\u65f6\u90fd\u4f1a\u91cd\u65b0\u6267\u884c,\u8f93\u51fa\u6539\u7684\u503c,\n          \/\/\u4e0d\u9700\u8981\u4f20\u9012\u4f60\u8981\u4fa6\u542c\u7684\u5185\u5bb9,\u81ea\u52a8\u4f1a\u611f\u77e5\u4ee3\u7801\u4f9d\u8d56,\u4e0d\u9700\u8981\u4f20\u9012\u5f88\u591a\u53c2\u6570,\u53ea\u8981\u4f20\u9012\u4e00\u4e2a\u56de\u8c03\u51fd\u6570\n          \/\/watchEffect \u4e0d\u80fd\u83b7\u53d6\u4e4b\u524d\u6570\u636e\u7684\u503c\n          console.log(nameObj.name);\n          setTimeout(() =&gt; {\n            stop();\n          }, 5000);\n        });<\/code><\/pre>\n<h2>\u751f\u547d\u5468\u671f\u51fd\u6570\u7684\u65b0\u5199\u6cd5<\/h2>\n<pre class=\"prettyprint linenums\" ><code>  const { ref, onBeforeMount, onMounted,   onBeforeUpdate, onUpdated ,onRenderTracked,onRenderTriggered} =\n          Vue;\n        const name = ref(&quot;dell&quot;);\n        onBeforeUpdate(() =&gt; {\n          console.log(&quot;onBeforeUpdate&quot;);\n        });\n        \/\/\u5728\u9875\u9762\u91cd\u65b0\u6e32\u67d3\u7684\u65f6\u5019,\u6bcf\u6b21\u6e32\u67d3\u4e4b\u540e,vue \u90fd\u4f1a\u91cd\u65b0\u6536\u96c6\u54cd\u5e94\u5f0f\u7684\u4f9d\u8d56,\u5c31\u4f1a\u6267\u884c\n        onRenderTracked(()=&gt;{\n          console.log(&#039;onRenderTracked&#039;);\n        })\n        \/\/\u91cd\u65b0\u89e6\u53d1\u9875\u9762\u6e32\u67d3\u624d\u4f1a\u6267\u884c\n        onRenderTriggered(()=&gt;{\n          console.log(&#039;onRenderTriggered&#039;);\n        })\n       const handeClick = () =&gt; {\n          name.value = &quot;lee&quot;;\n        };\n        return { name, handeClick };\n      },\n      template: `\n      &lt;div @click=&quot;handeClick&quot;&gt;\n       {{name}}\n      &lt;\/div&gt;\n      `,\n    });<\/code><\/pre>\n<h2>Provide,Inject,\u6a21\u7248 Ref \u7684\u7528\u6cd5<\/h2>\n<pre class=\"prettyprint linenums\" ><code> const app = Vue.createApp({\n      setup() {\n        const {provide,ref,readonly}=Vue;\n        const name=ref(&#039;dell&#039;);\n        provide(&#039;name&#039;,readonly(name))\n        provide(&#039;changeName&#039;,(value)=&gt;{\n          name.value=value\n        })\n        return {};\n      },\n      template: `\n      &lt;div&gt;\n        &lt;child\/&gt;\n      &lt;\/div&gt;\n      `,\n    });\n\n    app.component(&#039;child&#039;,{\n      setup(){\n        const {inject}=Vue;\n        const name=inject(&#039;name&#039;)\n        const changeName=inject(&#039;changeName&#039;)\n        \/\/\u5728\u5b50\u7ec4\u4ef6\u4fee\u6539\u7236\u7ec4\u4ef6\u7684\u6570\u636e,\u4e0d\u7b26\u5408\u5355\u5411\u6570\u636e\u6d41\u7684\u8981\u6c42\n        const handleClick=()=&gt;{\n          \/\/ name.value=&#039;lee&#039;\/\/ \u00d7\n          changeName(&#039;lee&#039;)\n        }\n        return {name,handleClick}\n      },\n      template:&#039;&lt;div @click=&quot;handleClick&quot;&gt;{{name}}&lt;\/div&gt;&#039;\n    })<\/code><\/pre>\n<ul>\n<li>dom ref\n<ul>\n<li>CompositionAPI \u7684\u8bed\u6cd5\u4e0b,\u83b7\u53d6\u771f\u5b9e\u7684 DOM \u5143\u7d20\u8282\u70b9<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> const app = Vue.createApp({\n      setup() {\n        const {ref,onMounted}=Vue\n        const hello=ref(null)\n        onMounted(()=&gt;{\n            console.log(hello.value);\n        })\n        return {hello};\n      },\n      template: `\n      &lt;div&gt;\n        &lt;div ref=&quot;hello&quot;&gt;hello w&lt;\/div&gt;\n      &lt;\/div&gt;\n      `,\n    });<\/code><\/pre>\n<h2>\u4f7f\u7528\u5355\u6587\u4ef6\u7ec4\u4ef6\u7f16\u5199 TodoList<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n  &lt;div&gt;\n    &lt;input v-model=&quot;inputValue&quot;\/&gt;\n    &lt;button class=&quot;button&quot; @click=&quot;handleAddItem&quot;&gt;\u63d0\u4ea4&lt;\/button&gt;\n  &lt;\/div&gt;\n  &lt;ul&gt;\n    &lt;list-item v-for=&quot;(item, index) in list&quot; :key=&quot;index&quot; :msg=&quot;item&quot;\/&gt;\n  &lt;\/ul&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport { reactive, ref } from &quot;vue&quot;;\nimport ListItem from &#039;.\/components\/ListItem&#039;\n\nexport default {\n  name: &quot;App&quot;,\n  components:{\n    ListItem\n  },\n  setup() {\n    const inputValue=ref(&#039;&#039;)\n    const list = reactive([]);\n\n    const handleAddItem=()=&gt;{\n      list.push(inputValue.value)\n      inputValue.value=&#039;&#039;\n    }\n    return {inputValue, list ,handleAddItem};\n  },\n};\n&lt;\/script&gt;<\/code><\/pre>\n<h2>Vue-Router \u8def\u7531\u7684\u7406\u89e3\u548c\u4f7f\u7528<\/h2>\n<ul>\n<li>router-link  \u662f\u8df3\u8f6c\u8def\u7531\u7684\u6807\u7b7e<\/li>\n<li>router-view  \u8d1f\u8d23\u5c55\u793a\u5f53\u524d\u8def\u7531\u5bf9\u5e94\u7684\u7ec4\u4ef6\u5185\u5bb9<\/li>\n<li>\u5f02\u6b65\u52a0\u8f7d\u8def\u7531 : \u8bbf\u95ee\u8be5\u9875\u9762\u7684\u65f6\u5019,\u624d\u53bb\u52a0\u8f7d\u8be5\u9875\u9762<br \/>\ncomponent: () =&gt; import(\/<em> webpackChunkName: &quot;about&quot; <\/em>\/ '..\/views\/AboutView.vue')<\/li>\n<\/ul>\n<h2>VueX \u7684\u8bed\u6cd5\u8be6\u89e3(1)<\/h2>\n<ul>\n<li>src\/store\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/VueX \u6570\u636e\u7ba1\u7406\u6846\u67b6\n\/\/VueX \u521b\u5efa\u4e86\u4e00\u4e2a\u5168\u5c40\u552f\u4e00\u7684\u4ed3\u5e93,\u7528\u6765\u5b58\u653e\u5168\u5c40\u7684\u6570\u636e\nexport default createStore({\n  state: {\n    name:&#039;dell&#039;\n  },\n  })<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n  &lt;div class=&quot;home&quot;&gt;\n    &lt;h1&gt;{{myName}}&lt;\/h1&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n\nexport default {\n  name: &quot;HomeView&quot;,\n  computed: {\n    myName() {\n      return this.$store.state.name;\n    }\n  }\n};\n&lt;\/script&gt;<\/code><\/pre>\n<h2>VueX \u7684\u8bed\u6cd5\u8be6\u89e3(2)<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n  &lt;div class=&quot;about&quot;&gt;\n    &lt;h1 @click=&quot;handleClick&quot;&gt;This is an about page&lt;\/h1&gt;\n    &lt;h1&gt;{{ myName }}&lt;\/h1&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\n\nexport default {\n  name: &quot;AboutView&quot;,\n  computed: {\n    myName() {\n      return this.$store.state.name;\n    }\n  },\n  methods: {\n    handleClick() {\n      \/\/\u60f3\u6539\u53d8\u6570\u636e,vuex \u8981\u6c42\u7b2c\u4e00\u6b65,\u5fc5\u987b\u6d3e\u53d1\u4e00\u4e2a action\n      \/\/\u5982\u679c\u4e0d\u6d89\u53ca\u5230\u5f02\u6b65\u64cd\u4f5c,\u53ea\u662f\u540c\u6b65\u4fee\u6539\u6570\u636e,\u53ef\u4ee5\u7b80\u5316\u4ee3\u7801,\u76f4\u63a5\u63d0\u4ea4 \u6570\u636e\u7684\u4fee\u6539\n      \/\/ this.$store.commit(&#039;change&#039;)  \u5c06 store\/index.js \u4e2d\u7684 actions \u6ce8\u91ca\n      \/**\n       * 1.dispatch \u65b9\u6cd5,\u6d3e\u53d1\u4e00\u4e2a action,\u540d\u5b57\u53eb\u505a change\n       * 2.\u611f\u77e5\u5230 change \u8fd9\u4e2a action,\u6267\u884c store \u4e2d actions \u4e0b\u9762\u7684 change \u65b9\u6cd5\n       * 3.commit \u63d0\u4ea4\u4e00\u4e2a\u53eb\u505a change \u7684\u6570\u636e\u6539\u53d8\n       * 4.mutation \u611f\u77e5\u5230\u63d0\u4ea4\u7684 change \u6539\u53d8,\u6267\u884c change \u65b9\u6cd5\u6539\u53d8\u6570\u636e\n       *\/\n      this.$store.dispatch(&#039;change&#039;,&#039;hello&#039;);\n    }\n  }\n};\n&lt;\/script&gt;<\/code><\/pre>\n<ul>\n<li>src\/store\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import { createStore } from &#039;vuex&#039;\n\n\/\/VueX \u6570\u636e\u7ba1\u7406\u6846\u67b6\n\/\/VueX \u521b\u5efa\u4e86\u4e00\u4e2a\u5168\u5c40\u552f\u4e00\u7684\u4ed3\u5e93,\u7528\u6765\u5b58\u653e\u5168\u5c40\u7684\u6570\u636e\nexport default createStore({\n  state: {\n    name:&#039;dell&#039;\n  },\n  getters: {\n  },\n  \/\/mutation \u91cc\u9762\u53ea\u5141\u8bb8\u5199\u540c\u6b65\u4ee3\u7801,\u4e0d\u5141\u8bb8\u5199\u5f02\u6b65\u4ee3\u7801,\n  \/\/commit \u548c mutation \u505a\u5173\u8054\n  mutations: {\n    \/\/\u7b2c\u56db\u6b65,\u5bf9\u5e94\u7684 mutation \u88ab\u6267\u884c\n   change(state,str){\n      \/\/\u7b2c\u4e94\u90e8,\u5728 mutation \u91cc\u9762\u4fee\u6539\u6570\u636e\n      \/\/\u5728 action \u4e2d\u5199\u5f02\u6b65\u64cd\u4f5c: setTimeout(()=&gt;{\n        state.name=&#039;lee&#039;\n      \/\/},2000)\n    }\n  },\n  \/\/\u653e\u5f02\u6b65\u4ee3\u7801\n  \/\/dispatch \u548c actions \u4f5c\u5173\u8054\n  actions: {\n    \/\/\u7b2c\u4e8c\u6b65,store \u611f\u77e5\u5230\u4f60\u51fa\u53d1\u4e86\u4e00\u4e2a\u53eb\u505a change \u7684 action,\u6267\u884c change \u65b9\u6cd5\n    change(store,str){\n      \/\/\u7b2c\u4e09\u6b65,\u63d0\u4ea4\u4e00\u4e2a commit,\u89e6\u53d1\u4e00\u4e2a mutation\n      setTimeout(()=&gt;{\n          store.commit(&#039;change&#039;,str)\n      },2000)\n    }\n  },\n  modules: {\n  }\n})<\/code><\/pre>\n<h2>CompositionAPI \u4e2d\u5982\u4f55\u4f7f\u7528 VueX<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n  &lt;div class=&quot;about&quot;&gt;\n    &lt;h1 @click=&quot;handleClick&quot;&gt;This is an about page&lt;\/h1&gt;\n    &lt;h1&gt;{{ name }}&lt;\/h1&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\n\/\/\u89e3\u6784\nimport {toRefs} from &quot;vue&quot;;\nimport {useStore} from &quot;vuex&quot;;\n\nexport default {\n  name: &quot;AboutView&quot;,\n  setup() {\n    const store = useStore();\n    const {name} = toRefs(store.state);\n    const handleClick = () =&gt; {\n      \/\/ store.commit(&#039;changeName&#039;,&#039;hello&#039;)\n      store.dispatch(&quot;getData&quot;);\n    };\n    return {name, handleClick};\n  }\n};\n&lt;\/script&gt;<\/code><\/pre>\n<ul>\n<li>src\/store\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import { createStore } from &#039;vuex&#039;\n\nexport default createStore({\n  state: {\n    name:&#039;dell&#039;\n  },\n  mutations: {\n    changeName(state,str){\n        state.name=str\n    }\n  },\n  actions: {\n    getData(store){\n      setTimeout(()=&gt;{\n        store.commit(&#039;changeName&#039;,&#039;hello2&#039;)\n      },2000)\n    }\n  }\n})<\/code><\/pre>\n<h2>\u4f7f\u7528 axios \u53d1\u9001 ajax \u8bf7\u6c42<\/h2>\n<ul>\n<li>npm install axios -S<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n  &lt;div class=&quot;about&quot;&gt;\n    &lt;h1 @click=&quot;handleClick&quot;&gt;This is an about page&lt;\/h1&gt;\n    &lt;h1&gt;{{ name }}&lt;\/h1&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n\/\/\u89e3\u6784\nimport {toRefs} from &quot;vue&quot;;\nimport {useStore} from &quot;vuex&quot;;\n\nexport default {\n  name: &quot;AboutView&quot;,\n  setup() {\n    const store = useStore();\n    const {name} = toRefs(store.state);\n    const handleClick = () =&gt; {\n      \/\/ store.commit(&#039;changeName&#039;,&#039;hello&#039;)\n      store.dispatch(&quot;getData&quot;);\n    };\n    return {name, handleClick};\n  }\n};\n&lt;\/script&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>import { createStore } from &#039;vuex&#039;\nimport axios from &quot;axios&quot;;\nexport default createStore({\n  state: {\n    name:&#039;dell&#039;\n  },\n  mutations: {\n    changeName(state,str){\n        state.name=str\n    }\n  },\n  actions: {\n    getData(store){\n      axios.get(&#039;https:\/\/www.fastmock.site\/mock\/ae8e9031947a302fed5f92425995aa19\/jd\/api\/user\/register&#039;)\n        .then((response)=&gt;{\n          const msg=response.data.desc\n          store.commit(&#039;changeName&#039;,msg)\n        })\n    }\n  }\n})<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Sass \u57fa\u7840 Saas \u73af\u5883\u642d\u5efa\u4e0e\u57fa\u672c\u8bed\u6cd5 \u4e0b\u8f7d Visual Studio Code demo.scss  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-2889","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2889"}],"version-history":[{"count":50,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2889\/revisions"}],"predecessor-version":[{"id":4162,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2889\/revisions\/4162"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}