Vue基础语法，双向绑定

前言：几种常见的UI框架

　　　Ant——Design：阿里巴巴，基于React的UI框架

　　　ElementUI，iview，ice：腾讯，　　基于Vue的UI框架

　　　BootStrap：Twitter，

　　　AmazeUI：简单，常用

Node.js框架及其项目管理工具：

　　Express：Node JS 框架

　　Koa：Express简化版

　　NPM：项目综合管理工具，类似Maven

　　YARN：NPM的代替方案，类似Maven和Gradle的关系

目前：前端为主的MV*时代

　　mvc（同步通信为主）：Model，View，Controller

　　mvp（异步通信为主）：Model，view，Presenter

　　mvvm（异步通信为主）：Model，View，ViewModel

前后端分离：主要的思想就是关注度分离原则

正题VUE

1.是mvvm模式的实现者

　　常见开发工具：VsCode

　　　　　　　　　Hubilder

　　　　　　　　　Sublime

　　　　　　　　　WebStrom

也可以用IDEA去做：下插件vue.js

CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

扩展：vm理解

　　1.首先，MVC时代，M（Model）指的是后端处理数据那一层（dao，serviice），V（View）视图，如，html，css等，C（Contrroller），前端与后端的联系都是通过它来实现，去处理前端的映射请求，到相应的 Comtroller，在Controller内含有开发者设定好的Model和数据的处理方法，执行完成后，再去转发或重定向，

　　2.MVVM时代，其中vm，可以理解为前端和后端的中间件，后端仅需提供json，json传到vm层通过处理能够实时的将数据传到前端视图，前端视图再也不用考虑数据的传输和加载，仅需在使用后端数据处加{{message}}就可以，而且VM是双向绑定前后端的。　

　　是MVVM的实现者核心是DOM监听（实时的监听后端数据更新），和双向绑定　
　

Vue常用的7个属性

　　el属性：

　　　　用来指示从什么地方开始解析vue的语法，可以说是一个占位符

　　data属性：

　　　　用来组织从view中抽象出来的数据，可以输将视图层的数据抽象出来存放在data中

　　template属性：

　　　　用来设置模板，会替换页面属性，包括占位符

　　method：

　　　　防止页面中的业务逻辑，js方法一般都放置在method中

　　render：

一，基础语法

　　1.1，v-if，v-else，v-else-if　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<!--view层，模板-->
<div id="app">
    <h1>{{message}}</h1>
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='D'">d</h1>
</div>



<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--创建vue对象,是vue框架创建的对象-->
<script>
    var vm = new Vue({
        <!--属性，通过id选择，#字符锁定作用-->
        el:"#app",
        <!--model,数据-->
        <!--对象，键值对-->
        data:{
            ok : true,
            type:'A'
        }
    });
</script>

</body>
</html>

　　1.2，v-for，遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--绑定元素-->
<div id="app">

    <li v-for="item in items">
        {{item.message
        }}
    </li>

</div>



<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js" ></script>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            items:[
                {message:'king'},
                {message:'king2'}
            ]
        }
    })
</script>

</body>
</html>

　　1.3绑定事件（方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--绑定事件-->
    <button v-on:click="sayHi">Click On</button>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            message:"king"
        },
        //方法
        methods:{//方法必须定义在vue的methods对象中，v-on：去绑定事件
            sayHi:function (event){
                alert(this.message)
            }
        }
    })

</script>

</body>
</html>

二，双向绑定　　

　　Vue.js是一个MVVM框架，就是数据的双向绑定：当数据发生变化时视图也会发生变化，视图发生变化时数据也会发生变化

小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--实现了双向绑定 -->
    <!--v-model是同步输入框的value-->


    请输入文本：<input textarea v-model="message"/>{{message}}

    请输入文本（文本框）：<textarea id="" name="" cols="30" rows="20" v-model="message"></textarea>
                        {{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"123"
        }
    })
</script>

</body>
</html>