Vue3的使用--002

Vue3包含vue2的语法，学习vue3就行。

前提要求， 安装大于node.js15.0。

创建Vue  项目  ：

npm init Vue@lastest  : 这一执行将会安装并执行create-vue, 他是Vue 官方的脚手架工具。你将会看到一些Typescript 和测试支持之类的可选功能提示：

 第一个是项目名称：名字不要有大写。

npm install 创建的是node_modules文件 

Vue 3 是一款现代化的 JavaScript 框架，提供了非常灵活的组件化开发方式，其核心的响应式系统更是让开发者可以轻松地实现数据的双向绑定。下面是一些 Vue3 的基础笔记：

1. 创建 Vue 3 项目：

 

    npm install -g @vue/cli
    vue create my-project
    cd my-project
    npm run serve

2. 创建 Vue 3 实例：

 

    const app = Vue.createApp({
        // options
    });

3. 组件语法：
 

    app.component('component-name', {
        // options
    });

 

4. 属性绑定：

v-bind ==:

    <template>
        <div>
            <h1 :class="className">{{ title }}</h1>
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                    title: 'Hello World',
                    className: 'highlight'
                };
            }
        };
    </script>

 

5. 事件绑定：
 

    <template>
        <div>
            <button @click="handleClick">Click Me</button>
        </div>
    </template>
    <script>
        export default {
            methods: {
                handleClick() {
                    console.log('Button clicked');
                }
            }
        };
    </script>

6. 条件渲染：
 

 <template>
        <div>
            <p v-if="showMessage">Hello World</p>
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                    showMessage: true
                };
            }
        };
    </script>

7. 循环渲染：
 

    <template>
        <div>
            <ul>
                <li v-for="item in items" :key="item.id">
                    {{ item.name }}
                </li>
            </ul>
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                    items: [
                        { id: 1, name: 'Item 1' },
                        { id: 2, name: 'Item 2' },
                        { id: 3, name: 'Item 3' }
                    ]
                };
            }
        };
    </script>

Vue3 是一个灵活且易学的框架，它提供了一系列的工具和方法来帮助开发者快速实现高效的 Web 应用。使用 Vue3，你可以在短时间内构建出一个优秀的应用，并享受到 Vue 带来的高开发效率、强大的数据绑定和灵活的组件化开发方式。

8，文本插值

<script >
export default {
  data(){
    return{
      msg:"亲爱的佳佳，\n" +
          "\n" +
          "我知道你是一个乐观开朗的女孩。你的笑容总能带给人无限的温暖和动力。就算面对一些困难，你也会用乐观的心态去迎接它，这让我非常钦佩和敬佩。\n" +
          "\n" +
          "佳佳，我想和你共同迎接人生的挑战,期待某时——我们的相遇。\n" +
          "\n" +
          "",
      hello:"hello world  你好世界！"
    }
  }
}
</script>

<template>
<h1>佳佳同学</h1>
  <h4>{{ msg }}</h4>
  <h4>{{ hello }}</h4>
</template>

Vue3 的模板语法与 Vue2 有些许不同，下面介绍 Vue3 的模板语法：变量和表达式
Vue3 的模板语法使用单花括号（{{}}）表示变量和表达式，具体例如：

可以求具体的值  {{ num1+num2 }} 结果为：30；

<template>
  <div>
    <p>{{msg}}</p>
    <p>{{num1 + num2}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello World",
      num1: 10,
      num2: 20
    }
  }
}
</script>

指令
Vue3 的指令使用 v- 前缀形式，可以绑定到 HTML 元素、组件或者指令。
v-if：根据表达式的值条件地渲染元素。

<template>
  <div>
    <p v-if="isVisible">{{msg}}</p>
    <button @click="isVisible = !isVisible">{{isVisible ? 'Hide' : 'Show'}}</button>
  </div>
</template><script>
export default {
  data() {
    return {
      msg: "Hello World",
      isVisible: true
    }
  }
}
</script>

v-for：循环渲染元素。

v-for of == v-for in   :功能一样

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Orange"]
    }
  }
}
</script>

v-bind：动态地绑定一个或多个属性。

<template>
  <div>
    <button :class="{ active: isActive }">Click Me</button>
    <button :style="{ color: btnColor }">Click Me</button>
  </div>
</template><script>
export default {
  data() {
    return {
      isActive: true,
      btnColor: 'red'
    }
  }
}
</script>

v-on：监听 DOM 事件并执行 JavaScript 代码或者调用 Vue3 方法。

<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
}
</script>
v-model：创建双向绑定。
<template>
  <div>
    <input type="text" v-model="msg" />
    <p>You input: {{msg}}</p>
  </div>
</template><script>
export default {
  data() {
    return {
      msg: "Hello World"
    }
  }
}
</script>

插槽
Vue3 还引入了新的插槽语法，用于在组件之间分发内容。具体如下：

<template>
  <div>
    <sidebar>
      <template #header>
        <h1>My Sidebar</h1>
      </template>
      <template #content>
        <p>This is my content.</p>
      </template>
    </sidebar>
  </div>
</template>

<script>
import Sidebar from "./Sidebar.vue"
export default {
  components: { Sidebar }
}
</script>

在 Sidebar 组件内使用 <slot> 来插入具名插槽，使用 <template> 标签和 # 号来定义和命名插槽，在父组件内使用时也需要这种方式来调用。

以上就是 Vue3 的模板语法，可以看到 Vue3 引入了不少新特性，开发者在使用时需要注意语法的变化。