vue3学习

1、vite

Vite是Vue3的作Web开发构建工具

npm init vite-app <project-name>

cd <project-name>

npm install

npm run dev

　　

特点：

因为没有打包工作要做，所以服务器冷启动非常快。

代码是按需编译的，因此只有在当前页面上实际导入的代码才会编译。我们不必等到整个应用程序打包后才开始开发，这对于有几十个页面的应用程序来说是一个巨大的不同。

热模块更新（HMR）的性能与模块总数解耦。这使得无论应用程序有多大，HMR都能保持快速

 

2、实例创建方法：

vue2：

      const app = new Vue({
          dl: '#app',
          data() {
              return {
                  
              }
          },
      })

vue3：

      const app1 = Vue.createApp({
        data() {
            return {
                
            }
        },
      }).mount('#app');

　　

3、v-bind指令：

   <p :class="{类名1：布尔值，类名2：布尔值}"></p>

<p :class="{red: isRed, color: isColor}"></p>   // 多采用对象写法

　　

4、v-on：@

不传参数：

    <div id='app'>
      <button @click='btnClick1()'>按钮1</button>
      <button @click='btnClick2'>按钮2</button>
    </div>
    
    <script src='https://unpkg.com/vue@next'></script>
    <script>
      const app1 = Vue.createApp({
         data() {
           return {
           }
         },
         methods: {
             btnClick1(arg) {
                console.log(arg)    // 加括号调用不传实参：打印undefined
             },
             btnClick2(arg1) {
                console.log(arg1);  // 加括号调用不传实参：打印鼠标事件对象
             }
         },
      }).mount('#app');

　　

 传参数：

传什么，打印什么。