第一节：代码片段制作、template几种写法、各种场景下的this剖析

一. 代码片段制作

（PS：已经迁移到单独的分类下，详见：https://www.cnblogs.com/yaopengfei/p/17162646.html）

1. 复制自己所需要的代码

 比如要把下面的代码制作成代码片段

            Vue.createApp({
                template: '#myApp',
                data() {
                    return {
                        message: 'Hello Vue3!'
                    }
                },
                methods:{
                    
                }
            }).mount('#app');

2. 到 https://snippet-generator.app 网站中生成代码片段 

3. 复制生成的代码片段，copy到对应的开发工具中

(1). HubilderX

(2). VsCode

　文件→首选项→用户片段→选择vue→复制代码

二. template几种写法

1. 直接用template标签（推荐）

<body>
        <div id="app"></div>
        <!-- 推荐写法 -->
        <template id="myApp">
            <div>
                {{message}}
            </div>
        </template>
        <script src="../js/vue3.js"></script>
        <script>
            Vue.createApp({
                template: '#myApp',
                data() {
                    return {
                        message: 'Hello Vue3!'
                    }
                }
            }).mount('#app');                
        </script>
  </body>

2. 使用Script标签

<body>
    <div id="app"></div>
    <!-- 或者 直接使用script标签 -->
    <script type="x-template" id="myApp">
        <div>
               {{message}}
          </div>
    </script>
        <script src="../js/vue3.js"></script>
        <script>
            Vue.createApp({
                template: '#myApp',
                data() {
                    return {
                        message: 'Hello Vue3!'
                    }
                }
            }).mount('#app');                
        </script>
  </body>

3. 代码里写死

<body>
    <div id="app"></div>
        <script src="../js/vue3.js"></script>
        <script>
            // 或者直接写死(不推荐)
            Vue.createApp({
                template: 
                    `<div>
                        {{message}}
                    </div>`,
                data() {
                    return {
                        message: 'Hello Vue3!'
                    }
                }
            }).mount('#app');            
        </script>
  </body>

 

三. 各种场景下this剖析

(强烈推荐：https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA) 

1. methods中的方法为什么不能使用箭头函数（官方文档有给出解释）？

官方解释：

　不应该使用箭头函数来定义method函数(例如 plus : () => this.a++ ，其中a是data中声明的变量)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向组件实例。this.a 将等于 undefined。

深度剖析：

　如果我们使用箭头函数，那么这个this就会是window了。

为什么会是windows？

　这里涉及到箭头函数使用this的查找规则，它会在自己的上层作用域中来查找this；

　最终刚好找到的是script作用域中的this，所以就是window；

2. 不使用箭头函数的情况下，this到底指向的是什么？

　事实上Vue的源码当中就是对methods中的所有函数进行了遍历，并且通过bind绑定了this：

3.  待补充。。。。

 

 

 

 

 

 

!

  • 作       者 : Yaopengfei(姚鹏飞)
  • 博客地址 : http://www.cnblogs.com/yaopengfei/
  • 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
  • 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
 
posted @ 2021-09-06 15:50  Yaopengfei  阅读(369)  评论(1)  编辑  收藏  举报