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