Vue.js是什么

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

使用准备

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

 
      开始学习使用vue.js了复制代码

模板渲染

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

 
      
    
      {
   { message }}
    
    
      var app = new Vue({  el: '#app',  data: {   message: 'Hello Vue!'  } })
    复制代码

表单绑定

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

 
      
    
 
      
      
     
你输入的内容是: {
   { message }}
    
    
      var app = new Vue({   el: '#app',   data: {     message: ''   } })
    复制代码

事件处理

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

 
      
    
 
     弹出'嗨'
    
复制代码

组件化

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

    
    
    
    
 
     
      我的组件
     
    
复制代码

总结

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

下一篇