vue.js入门

1.什么是vue.js　

　　Vue.js 是用于构建交互式的 Web 界面的库。

　　它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。

2.vue.js的特点　　

  • 简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
  • 数据驱动： 自动追踪依赖的模板表达式和计算属性。
  • 组件化： 用解耦、可复用的组件来构造界面。
  • 轻量： ~24kb min+gzip，无依赖。
  • 快速： 精确有效的异步批量 DOM 更新。
  • 模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。
    • 可扩展的数据绑定机制
    • 原生对象即模型
    • 简洁明了的 API
    • 组件化 UI 构建
    • 多个轻量库搭配使用

3.vue.js下载　　

　　直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

　　Vue.js 官网下载地址：http://vuejs.org/guide/installation.html

4.vue.js编写代码示例

　　HTML页面显示Hello World！ 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--导入js目录下的vue.js-->
        <script src="js/vue.js"></script>
        
        <!--JSP动态获取项目名目录下的js文件中的vue.js-->
        <!--<script src="${pageContext.request.contextPath}/js/vue.js"></script>-->
            
    </head>
    <body>
        
        <!-- MVVM模式  -->
    <!--这是View-->
    <div id="div1">
        {{ userName }}
    </div>
    
    <script>
        /*这是Model*/
        var myModel = {
            userName: 'Hello World!'
        }
        
        // 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model 
        new Vue ({
            el: '#div1',
            data: myModel
        })
    </script>
        
    </body>
</html>

 

posted @ 2017-11-27 16:34  大大狼狗  阅读(157)  评论(0)    收藏  举报