1-1. Vue.js核心知识之实例简介

Vue.js是什么

Vue.js是一套用于构建用户界面的渐进式框架。Vue.js的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合。Vue.js与现代化的工具链以及各种支持类库结合使用时，能够为复杂的单页应用提供驱动。

使用准备

创建一个demo.html文件，并引入Vue.js

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
开始学习使用vue.js了
</body>
</html>

模板渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
 {{ message }}
</div>
<srcipt>
 var app = new Vue({
  el: '#app',
  data: {
   message: 'Hello Vue!'
  }
 })
</srcipt>
</body>
</html>

表单绑定

我们可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
 <!-- 你输入到input框中的内容会实时显示到p标签中 -->
 <input v-model="message">
 <p>你输入的内容是: {{ message }}</p>
</div>
<srcipt>
 var app = new Vue({
   el: '#app',
   data: {
     message: ''
   }
 })
</srcipt>
</body>
</html>

事件处理

Vue中可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
 <button v-on:click="say('嗨')">弹出'嗨'</button>
</div>
<script>
 new Vue({
  el: 'app',
  methods: {
   say: function (message) {
    alert(message)
   }
  }
 })
</script>
</body>
</html>

组件化

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

<!--全局注册-->
<template>
 <div id="app">
   <my-component></my-component>
 </div>
</template>

<script>
 // 全局注册组件
 Vue.component('my-component', {
   template: '<div>我的组件</div>'
 })

 // 创建根实例
 new Vue({
   el: '#app'
 })
</script>

<!--渲染后的HTML-->
<div id="app">
 <div>我的组件</div>
</div>

总结

本节学习 vue.js 的核心知识点莫过于模板渲染、表单绑定、事件处理、组件化这几点了，下面我们针对每一个知识点细细学习。