Vue基础1

作者: Taoyongpan | 来源:发表于2018-05-23 21:13 被阅读0次

    Vue简介

      百度百科:Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
      Vue.js是一个js的MVVM的库,是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js;同时比起 React + Redux 相对复杂的架构,Vue.js 更加轻量级也更加容易上手,是初创项目的首选前端框架。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。并且作者是华人的关系,Vue拥有着对华人开发者最友好的api文档和官方教程。

    Vue使用

      我也是刚接触Vue框架,写下了第一个demo,给我的感觉很像Kissy的使用感觉,使用的时候直接引入CDN就可以了,就像我们写其他demo的时候,直接先来个三件套,html,css,js三个文件,然后直接写js,在html页面引入即可,首先先来一个入门化的小demo;
    html页面代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue.js</title>
        <!-- 引入CDN -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
        
    </head>
    <body>
        <div id="top">
            {{ name }}
        </div>
        <script src = "test.js"></script>
    </body>
    </html>
    

    js代码:

    new Vue({
        el:'#top',
        data:{
            name:'Tao'
        }
    })
    

    el就是来绑定div块的;
    data里面可以给一些变量赋值,在html页面直接两个中括号{{}}里面引入变量即可显示;

    很简单的小demo,会接着学习,每日更新;

    相关文章

      网友评论

        本文标题:Vue基础1

        本文链接:https://www.haomeiwen.com/subject/ikedjftx.html