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