基础知识-第一节:vue.js简介和框架基础概念

开始吧...

这一节简单的介绍了vue的一个基本概念.

• 学习vue需要的基础知识是一些模块化的思想和ES6的一些语法.

优点

• 数据驱动
• 组件化

---

我们根据官网的教程来写得一个第一个案例就可以发现vuejs作为MVVM框架他的使用很简单,很容易上手.

  
     
 
       {{helloWorld}} 
      
 
       
    
  
     
     
     

代码分析:
创建了一个vue的实例,然后通过el属性来绑定DOM元素,限定该实例的一个作用范围.data属性来作为数据model.通过{{}}(插值)来将数据模型渲染到Dom上(也就是View层).通过表单元素的指令v-model来将是图层的DOM节点和数据模型进行绑定,

2.vue的一个组件

上面我们讲了VUE的核心思想就是数据驱动和组件化.任何一个页面都可以被抽象成由多个组件组合而成的一个东西.这里我们学习一下vue.js的组件的基本构成,见下图所示:

一个vue.js的组件构成.png

很容易知道 是组件的模板, 是组件的逻辑. 是组件的样式.这样将模板,样式,逻辑写在一个 .vue后缀文件里面的东西就叫做 vue的一个组件.

小节总结

上面我们简单的学习了vue.js的一个写法,他的核心思想:数据驱动和组件开发模式.都是很有意思的改变.让前端开发更加的迅速,更加的敏捷.