Vue

一  node.js

　　Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。

　　Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

二 npm　　

　　NPM的全称是Node Package Manager[1]  ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

　　Nodejs自身提供了基本的模块，但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是，Nodejs库和框架为我们提供了帮助，让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦，有了NPM，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。

三 webpack

　　本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

四 babel

　　Babel 通过语法转换器支持最新版本的 JavaScript 。 这些插件允许你立刻使用新语法，无需等待浏览器支持。

五  Vue

　　Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

　　1 vue中有它自己特殊的语法 插值{{}}  react {}  angular {{}}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="id1" >
    {{message}}
</div>
<script>
    var a = new Vue({
        el:'#id1',
        data:{
            message:'xxx',
        }
    })
</script>

　　2 vue中核心语法：指令系统  v-*

　　　　1)v-if

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="id1" v-if='a'>
    <h3>111</h3>
</div>
<script>
    var a = new Vue({
        el:'#id1',
        data:{
            a:true,
            b:false,

        }
    })
</script>

　　　　2) v-Show

<div id="id1" v-Show="b">
    <h3>111</h3>
</div>
<script>
    var a = new Vue({
        el:'#id1',
        data:{
            a:true,
            b:false,
        }
    })
</script>

　　　　PS v-Show 与v-if的区别是：

　　　　当同为false时：

　　　　v-Show：

<div id="id1" style="display: none;"><h3>111</h3></div>

　　　　v-if：

　　　　直接没了。

　　　　3）v-on 绑定事件

　　　　v-on:click   ===  @click

<div id="id1" v-if="isTrue">
    <h2>h2</h2>
<!--<button v-on:click="xxx">按钮</button>-->
<button @click="xxx">按钮</button>
</div>

<script>
    var app = new Vue({
        el:'#id1',
        data:{
            isTrue:true,
        },
        methods:{
            xxx(){
                this.isTrue = !this.isTrue
            }
        }
    })

</script>

　　　　4)v-bind 属性绑定

　　　　v-bind:xxx   === :xxx

<script src="./vue.js"></script>
<div id="id1" v-if="isTrue">
    <h2>h2</h2>
    <!--<a v-bind:href="url">百度一下</a>-->
    <a :href="url">百度一下</a>
</div>

<script>
    var app = new Vue({
        el:'#id1',
        data:{
            isTrue:true,
            url:'https://www.baidu.com'
        },
    })

</script>

　　　　5 ) v-for 

<div id="id1" v-if="isTrue">
    <h2>h2</h2>
    <ul>
        <li v-for="(pic,index) in pics">{{index}}</li>
    </ul>
</div>

<script>
    var app = new Vue({
        el:'#id1',
        data:{
            isTrue:true,
            url:'https://www.baidu.com',
            currentpic:'./images/0.png',
            pics:[
                    './images/0.png',
                    './images/1.png',
                    './images/2.png',
                    './images/3.png',
                    ]
        },
            
    })
</script>

 　　　　6）v-model  轻松实现表单输入和应用状态之间的双向绑定

　　　　　　双向绑定的意思就是，最开始页面显示是export default中的data中的 'xxxx'。当你在页面中有input 渲染出来的输入框内写入数据后，export default中的username='xxxx'，也会随之改变。牛逼！ 这就实际上拿到了input框中的数据。需求搞定了。

<template>
  <div>
    <input type="text" v-model="username">姓名
    {{username}}
  </div>


</template>

<script>
  export default{
      name:'test',
      data(){
          return{
              username:'xxxx',
          }
      }
  }
</script>

<style>

</style>