Vue.js 3.x 快速入门

起步

对于初学者来说,学习 Vue.js 最好是在一个单一的 HTML 页面中进行,因为只须用 <script> 标签引入一个 JS 文件,就能使用 Vue.js 了。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>

Vue.js 把 应用 看作由 组件 组成的树状结构。每个组件都有 DOM 元素与之对应。一个应用至少包含一个根组件。由此可见,应用的初始化至少包含下列两个步骤:

  1. 调用 Vue.createApp() 创建一个应用实例,同时创建一个根组件。
  2. 调用应用实例的 mount() 方法,把应用实例(根组件)挂载到某个 DOM 元素。

绑定文本

这需要提供一个占位符(放在 {{}} 中)。

<div id="app">
  <h1>{{ message }}</h1>
</div>

调用 Vue.createApp() 创建应用实例,再调用应用实例的 mount() 方法完成挂载。

<script>
const selector = '#app';
const property = {
  data() {
    return {
      message: 'Hello, world!'
    };
  }
};

const app = Vue.createApp(property);
const vm = app.mount(selector);
</script>

应用实例的大多数方法都返回 this,但 mount() 方法返回的是根组件的实例。

{{ message }} 最终会被替换成 Hello, world!

<div id="app">
  <h1>Hello, world!</h1>
</div>

传递给 Vue.createApp() 方法的对象包含了创建根组件所需的各种 组件选项

data() 方法必须返回一个对象,这个对象称为 数据对象。组件实例会代理数据对象的属性。也就是说,可以把数据对象的属性当作组件实例的属性来访问,组件选项中的函数也可以通过 this 访问数据对象的属性。

<script>
const selector = '#app';
const property = {
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  mounted() {
    console.log(this.message); // Hello, world!
  }
};

const app = Vue.createApp(property);
const vm = app.mount(selector);

console.log(vm.message); // Hello, world!
</script>

mounted() 方法会在应用实例完成挂载后被调用。

也可以直接访问某些组件选项。但必须加上 $ 前缀。例如 $el 是组件对应的 DOM 元素。

<script>
...
const app = Vue.createApp(property);
const vm = app.mount(selector);

console.log(vm.$el); // <span>
</script>

生命周期钩子

mounted() 类似的组件选项称为生命周期钩子,常用的有:

  • created() 在挂载前(调用 app.mount() 前)调用,此时 $el 不可用。
  • mounted() 在挂载后(调用 app.mount() 后)调用。
  • beforeUnmount() 在卸载之前调用(调用 app.unmount() 前)。
<div id="app" v-cloak>
  <p>{{ reversedText }}</p>
</div>

<script>
const property = {
  data() {
    return {
      text: '123456'
    };
  },
  computed: {
    reversedText() {
      console.log(2);
      return this.text.split('').reverse().join('');
    }
  },
  created() {
    console.log(1);
  },
  mounted() {
    console.log(3);
  },
  beforeUnmount() {
    console.log(4);
  }
};

const app = Vue.createApp(property);
app.mount('#app');
app.unmount();
// 1
// 2
// 3
// 4
</script>

绑定 HTML

给元素添加 v-html 属性。

<div id="app" v-cloak>
  <span v-html="link"></span>
</div>

<script>
const property = {
  data() {
    return {
      link: '<a href="/user/login">Login</a>'
    };
  }
};

Vue.createApp(property).mount('#app');
</script>

data.link 会被渲染成一个可以点击的 <a> 元素,插入 <span>

<div id="app">
  <span>
    <a href="/user/login">Login</a>
  </span>
</div>

绑定属性

要让元素的 href 属性和变量 url 绑定,只须给元素添加 v-bind:href="url" 属性。

<div id="app">
  <a v-bind:href="url">Login</a>
</div>

<script>
const property = {
  data() {
    return {
      url: '/user/login'
    };
  }
};
...
</script>
<div id="app">
  <a href="/user/login">跳转</a>
</div>

v-bind:xxx 可以简写为 :xxx

<div id="app">
  <a :href="url">Login</a>
</div>

绑定事件

新增组件选项 methods,对象类型,元素应当是函数。这些函数被调用时,this 指向所在组件实例。

<script>
const property = {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  methods: {
    foo() {
      return this.message; // Hello, Vue.js!
    }
  }
};
...
</script>

这些函数可以直接在 HTML 中调用,结果就是函数的返回值。

<div id="app">
  <p>{{ foo() }}</p>
</div>
<div id="app">
  <p>Hello, Vue.js!</p>
</div>

除了作为普通函数调用外,还可以作为事件处理函数。为 HTML 标签绑定事件的方式是添加 v-on:xxx 属性,其中 xxx 就是事件名。

<div id="app">
  <button v-on:click="onClick">点击</button>
</div>

上例为 <button> 标签绑定了一个点击事件,事件处理函数为 onClick()。这时就需要在 methods 中给出 onClick()

<script>
const property = {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  methods: {
    onClick() {
      console.log(this.message); // Hello, Vue.js!
    }
  }
};
...
</script>

现在,只要触发 <button> 标签的点击事件,methods 中的 onClick() 就会被调用。

作为事件处理函数,可以在函数名后面跟上小括号,以传递参数。如果要使用 JavaScript 原生的事件对象,可以直接使用变量 $event

<div id="app">
  <button v-on:click="onClick(123, $event)">点击</button>
</div>

<script>
const property = {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  methods: {
    onClick(a, b, c) {
      console.log(a); // 123
      console.log(b); // click { target: button, ...
      console.log(c); // undefined
    }
  }
};
...
</script>

如果只写函数名,而函数的定义又带有形参,则第一个参数传入事件对象。

<div id="app">
  <button v-on:click="onClick">点击</button>
</div>

<script>
const property = {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  methods: {
    onClick(a, b, c) {
      console.log(a); // click { target: button, ...
      console.log(b); // undefined
      console.log(c); // undefined
    }
  }
};
...
</script>

v-on:xxxx 可以简写为 @xxxx

<div id="app">
  <button @click="onClick">点击</button>
</div>

计算属性

组件选项 computed 的用法 methods 相同,区别在于,调用 computed 中的函数,只写函数名,不写小括号。

<div id="app">
  <p>{{ reversedText }}</p>
</div>

<script>
const property = {
  data() {
    return {
      text: '123456'
    };
  },
  computed: {
    reversedText() {
      return this.text.split('').reverse().join('');
    }
  }
};
...
</script>

reversedText 看起来像是 data 中的一员,而不像函数调用,因此被称为 计算属性

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 1

写的不错,学习了。

5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!