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 的核心知识点莫过于模板渲染、表单绑定、事件处理、组件化这几点了，下面我们针对每一个知识点细细学习。