Vue.js学习
在学习vue之前，需先学习node.js与webpack
1.关于Vue.js
Vue.js用于构建交互式的web界面的库。他提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API，Vue.js集成在MVVM模式上的试图模型层，并通过双向绑定连接视图和模型。实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其他的MVVM框架，Vue.js更容易上手。Vue.js是一个用于创建Web交互界面的库。它让你通过简单而灵活的API创建由数据驱动的UI组件。
npm（node package manager）：作为node的包管理工具，极大地便利了我们的开发工作。
包括：安装、卸载、更新、查看、搜索、发布等。
    你的团队无需去亲自开发一些特定功能的模块，而是直接引用各个领域专家写好的代码。即使你的团队不需要引用外部代码，这种基于模块的开发方式也能很好的推动团队开发。
    Node.js：
Node.js就是运行在服务端的JavaScript。
Node.js是一个基于Chrome JavaScript运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的v8引擎，v8引擎执行JavaScript的速度非常快，性能非常好。
    webstrom：
        为JS开发做了很多优化，
    MVVM(Model-View-ViewModel)：MVVM框架的由来白女士MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。
2.安装Vue.js
1、独立版本
直接下载<script>标签引入，Vue会被注册为一个全局变量。
2、CDN
可以从jsdelivr或cdnjs获取
3、CSP兼容
有些环境，如Goole Chrome Apps ，强制应用内容安全策略（CSP），不能使用new Function()对表达式求值。
4、NPM
使用Vue构建大型应用时使用NPM安装，NPM能很好地和诸如Webpack 或 Browserify的CommonJS模块打包器配合使用。Vue.js也提供配套工具来开发文件组件
$  npm install vue
$  npm install vue@csp
5、命令行工具
Vue.js提供一个官方命令行功能工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热加载、保护时静态检查以及可用于生产的构建配置的
全局安装 vue-cli
$ npm install –g vue-cli
创建一个基于”webpack”项目的新模板
Vue init webpack my-project
安装依赖
cd my-project
npm intstall
npm rul build
6、Bower
3.Vue.js起步
起步
我们以Vue数据绑定的快速导览开始。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/vue.min.js"></script>
<title></title>
   
</head>
<body>
    <div id="app">
        <pjquery学习在线教程>{{message}}</p>
        <input v-model="message">
        <ul>                       
            <li v-for="todo in todos">
                {{ }}
            </li>
        </ul>
       
        <button v-on:click="reverseMessage">Reverse Message</button>
       
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'Hello Vue.js!',
            todos:[
                {text:'Learn JavaScript'},
                {text:'Learn Vue.js'},
                {text:'Build Something AweSome'}
            ]
        },
        methods:{
            reverseMessage:function(){
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>
</html>
4.Vue.js概述
概述
Vue.js是一个构建数据驱动的web界面的库。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
Vue.js自身不是一个全能框架—它值聚焦于视图层。因此它非常容易学习，非常容易与其他库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用。
响应的数据绑定
Vue.js的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。在使用Jquery手工操作DOM时，我们的代码常常是命令式的、重复的与易错的。Vue.js拥有数据
驱动的试图概念。通俗地讲，它意味着我们在普通HTML模板中使用特殊的语法将DOM“绑定”到底层数据。一旦创建了绑定，DOM将与数据保持同步。每当修改了数据，DOM便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与DOM更新搅在一起。这让我们的代码更容易撰写、理解与维护。
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="greeting">Hello</p>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。