vue3知识点

简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
以下内容基于vue3

安装

• 在页面上以 CDN 包的形式导入。

<script src="https://unpkg.com/vue@next"></script>

• 下载 JavaScript 文件并自行托管。
  https://cdn.jsdelivr.net/npm/vue@next/dist/
  https://unpkg.com/browse/[email protected]/dist/
• 使用 npm 安装它。
  建议将 NPM 源设置为国内的镜像，可以大幅提升安装速度

npm install vue@next
npm install -D @vue/compiler-sfc //单文件组件配套工具

• 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。

yarn global add @vue/cli
# 或
npm install -g @vue/cli

vue upgrade --next

创建vue

<script src="https://unpkg.com/vue@next"></script>
<div id="hello-vue" class="demo">
  {
  { message }}
</div>

<script>
const HelloVueApp = {
     
  data() {
      //data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。
  //它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
    return {
     
      message: 'Hello Vue!!'
    }

  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue') //hello-vue是渲染的起点

const app = Vue.createApp({
     
	data() {
     
		return {
      count: 4 }
	},
	methods: {
     
    increment() {
     
      // `this` 指向该组件实例
      this.count++
    }
  }
})
const vm = app.mount('#app')
vm.$data.message = "a" // 修改 vm.message 的值也会更新 $data.message 
vm.message = "b" // 修改 vm.message 的值也会更新 $data.message 
vm.increment() // 调用方法
</script>

模板语法

数据绑定最常见的形式就是使用 {
  {...}}（双大括号）的文本插值
<div id="app">
  <p>{
  { message }}</p>
</div>

如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值
<span v-once>这个将不会改变: {
  { message }}</span>

使用 v-html 指令用于输出 html 代码
<p>使用 v-html 指令: <span v-html="rawHtml"></span></p>

属性中的值应使用 v-bind 指令
<div v-bind:id="dynamicId"></div>

对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来
<button v-bind:disabled="isButtonDisabled">按钮</button>

<!-- 完整语法 -->
<a v-bind:href="url"></a>
v-bind 缩写
<a :href="url"></a>

Vue.js 都提供了完全的 JavaScript 表达式支持。
{
  {5+5}}<br>
{
  {ok ? 'YES' : 'NO' }}<br>
{
  { message.split('').reverse().join('') }}
<!--  这是语句，不是表达式：-->
{
  { var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{
  { if (ok) { return message } }}

指令是带有 v- 前缀的特殊属性。
<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>

事件
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
v-on 缩写
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>

用户输入 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<div id="app">
    <p>{
  { message }}</p>
    <input v-model="message">
</div>

条件语句

条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示
<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>

如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素
<div id="app">
    <template v-if="seen">
        <h1>网站</h1>
        <p>Google</p>
        <p>Runoob</p>
        <p>Taobao</p>
    </template>
</div>

可以用 v-else 指令给 v-if 添加一个 "else" 块
<div id="app">
    <div v-if="Math.random() > 0.5">
      随机数大于 0.5
    </div>
    <div v-else>
      随机数小于等于 0.5
    </div>
</div>

v-else-if 即 v-if 的 else-if 块，可以链式的使用多次
<div id="app">
    <div v-if="type === 'A'">
         A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>

可以使用 v-show 指令来根据条件展示元素（更改display为none）
<h1 v-show="ok">Hello!</h1>

循环

循环使用 v-for 指令。
<div id="app">
  迭代数组
  <ol>
    <li v-for="site in sites">
      {
  { site.text }}
    </li>
  </ol>
  v-for 还支持一个可选的第二个参数，参数值为当前项的索引
  <ol>
    <li v-for="(site, index) in sites">
      {
  { index }} -{
  { site.text }}
    </li>
  </ol>
  迭代对象
  <ul>
    <li v-for="value in object">
    {
  { value }}
    </li>
  </ul>
  也可以提供第二个的参数为键名
  <ul>
    <li v-for="(value, key) in object">
    {
  { key }} : {
  { value }}
    </li>
  </ul>
  第三个参数为索引
  <ul>
    <li v-for="(value, key, index) in object">
     {
  { index }}. {
  { key }} : {
  { value }}
    </li>
  </ul>
  迭代整数
  <ul>
    <li v-for="n in 10">
     {
  { n }}
    </li>
  </ul>
  template使用循环
  <ul>
    <template v-for="site in sites">
      <li>{
  { site.name }}</li>
      <li>--------------</li>
    </template>
  </ul>
</div>
 
<script>
const app = {
     
  data() {
     
    return {
     
      object: {
     
        name: '菜鸟教程',
        url: 'http://www.runoob.com',
        slogan: '学的不仅是技术，更是梦想！'
      }
    }
  }
}
</script>

在自定义组件上，你可以像在任何普通元素上一样使用 v-for
<my-component v-for="item in items" :key="item.id"></my-component>

为了把迭代数据传递到组件里，我们要使用 props
<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。

注册全局组件
<script>
const app = Vue.createApp({
     ...})

app.component('my-component-name', {
     
  /* ... */
})
</script>
注册后，我们可以使用以下方式来调用组件
<my-component-name></my-component-name>
例子
<script>
// 创建一个Vue 应用
const app = Vue.createApp({
     })

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {