Vue.js 入门小Demo

框架介绍

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计

Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合

同时具备angular和react的优点,轻量级,api简单,文档齐全

Demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
</head>
<body>
<div id="app">
    <h1>{{ origin_message }}</h1>
    <h1>Your input is {{ message }}</h1>
    <!--    输入框和显示文本会一起变化-->
    <input type="text" v-model="message">
</div>
<script>
    var vm = new Vue({
        el : '#app',
        data: {
            origin_message:'Hello World!',
          message : '双向绑定'
        }
    });
</script>
</body>
</html>

这里通过<script>结合CDN的方式引入

但如果希望用 Vue 构建大型应用,则推荐使用NPM安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用

效果截图

效果截图

参考

中文官网

评论或私信站长


  1. #该文章暂时没有评论