第一次接触Vue，看文档还是有点蒙蔽的，直接快进到Quick Start

第一个Demo#

  • 下载Vue:

    1
    2
    3
    4
    5
    npm create vue@latest  # 添加vue的依赖--后面的选项全选no
    cd <your-project-name>  #进入vue的工作目录
    npm install  #估计也是安装依赖，反正我不操心
    npm run dev #启动项目--这个最重要了
    npm run build # 编译成应用程序，反正开发阶段不需要理解这个

  • 刚刚安装好依赖估计是这样的：

    不用看注释，这个是我尝试的东西。

    image-20240710005159848

  • 然后 npm run dev 启动，就会出现这个图案

    image-20240710005303848

  • 为了更好理解一下这个框架，我稍作一下修改

    创建 ./src/apps.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <template>
        <h1>{{ message }}</h1>
      </template>
      
      <script>
      export default {
        data() {
          return {
            message: 'Hello Vue 3!'
          };
        }
      };
      </script>

    然后把./main.js的代码稍作修改

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // import './assets/main.css'

    // import { createApp } from 'vue'
    // import App from './App.vue'

    // createApp(App).mount('#app')
     
    import { createApp } from 'vue'

    import App from './apps.vue'

    createApp(App).mount('#app')

    刷新一下刚才打开的页面发现：

    image-20240710005642037

    好了这就改完了，下面说一下体会

  • public里面有个index.html，那个是树的顶端，vue生成的代码像一颗树一样插入到index.html里

  • 整个代码是 index.html -> main.js -> App.vue -> other vue component 这个逻辑链实现的

  • 下面的话摘自官方文档：

    • Every Vue application starts by creating a new application instance with the createApp function:
    • Every app requires a “root component” that can contain other components as its children.
    • If you are using Single-File Components, we typically import the root component from another file:
    • An application instance won’t render anything until its .mount() method is called. It expects a “container” argument, which can either be an actual DOM element or a selector string:
    • The .mount() method should always be called after all app configurations and asset registrations are done. Also note that its return value, unlike the asset registration methods, is the root component instance instead of the application instance..mount()

Template#

Text Interpolation#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script >
export default {
  name: 'TheWelcome',
  data(){
    return {
      msg: 'Hello Vue 3 + Vite'
    }
  }

}
</script>

v-html#

将html渲染形式渲染到字符串上

v-bind#

动态改变 id ,但id变化时 DOM 中元素跟着变化

下面的代码，但按一下按钮的时候，:id变化，导致字符串的颜色变化

  • :id
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
  <div id="app">
    <!-- 使用 v-bind 动态绑定 id -->
    <div :id="dynamicId">This is a div with dynamic id</div>
    <!-- 绑定 id 通过缩写形式 -->
    <button @click="changeId">Change ID</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicId: 'initial-id'
    };
  },
  methods: {
    changeId() {
      // 修改动态 id
      this.dynamicId = 'new-id';
    }
  }
};
</script>

<style>
  #initial-id{
    color: red;
  }

  #new-id{
    color: blue;
  }
</style>
  • :disabled
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div :disabled="isButtonDisabled">
      <h1>{{ isButtonDisabled }}</h1>
  </div>

  <button @click="change">Change</button>
</template>

<script >
export default {
  name: 'test',
  data(){
    return {
      isButtonDisabled: true
    }
  },

  method: {
    change(){
      this.isButtonDisabled = !this.isButtonDisabled
    }
  }
};
</script>

Mutiple binding#

1
2
3
4
5
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

Using JavaScript Expressions#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <h1>{{ test }}</h1>

  <button @click="test++">Click me</button>
</template>

<script>
  export default{
    data(){
      return{
        test: 1
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <h1>{{ ok ? 'yes' : 'no' }}</h1>
  <!-- 按钮点击事件绑定到 isOk 方法 -->
  <button @click="isOk">Click me</button>
</template>

<script>
export default {
  name: 'TheWelcome',
  data() {
    return {
      ok: true // 初始状态为 true
    };
  },
  methods: {
    // 定义 isOk 方法，用于切换 ok 的布尔值
    isOk() {
      this.ok = !this.ok;
    }
  }
}
</script>

Directive(指令)#

Directives are special attributes with the v- prefix.

Vue provides a number of built-in directives, including v-html and v-bind which we have introduced above.

Some directives can take an “argument”,

In the shorthand, everything before the argument (i.e., v-bind:) is condensed into a single character, :.

1
2
3
4
5
6
7
8
9
<a v-bind:href="url"> ... </a>

<!-- shorthand -->
<a :href="url"> ... </a>
------------------------------------------------------------------------
<a v-on:click="doSomething"> ... </a>

<!-- shorthand -->
<a @click="doSomething"> ... </a>

Dynamic Arguments#

<a v-on:[eventName]="doSomething"> ... </a> is ok

but <a :['foo' + bar]="value"> ... </a> isn’t ok

Reactivity Fundamentals (响应的知识)#

Declaring Reactive State#

ref() -> import { ref } from 'vue'