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

开始吧...

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

  • 学习vue需要的基础知识是一些模块化的思想和ES6的一些语法.
优点
  • 数据驱动
  • 组件化

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

<body>  
     <div id="element"> 
      <!--插值--> {{helloWorld}} 
      <br/> 
      <input type="text" v-model="helloWorld"/> 
    </div>  
    <!--导入vue的框架--> 
    <script src="//cdn.bootcss.com/vue/1.0.25/vue.js"></script> 
    <script type="text/javascript"> 
        //创建一个vue.js的实例对象
        new Vue({ 
            el:"#element", 
            data:{ 
                helloWorld:"Hello!World!",
            } 
        }); 
</script> 
</body>

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

2.vue的一个组件

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

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

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

小节总结

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

推荐阅读更多精彩内容