1 vue概述

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

什么场景应用VUE？
绝大多数以数据操作（增删改查）为主的PC端或挪动端我的项目都可用vue开发比方: 美团，饿了么，淘宝，知乎，公众点评，微博...

1.1 vue的MVVM设计思维

MVVM是一种设计思维，对晚期的web前端开发做了加强，将前端代码按其职责的不同分成了三局部：

  • 界面(View)局部：由html+css形成，并容许在html,css中间接应用变量，表达式，语句等。
  • 模型局部(Model)：个别为一个JSON格局的对象，用于存储view中须要的数据和函数。
  • 视图模型(ViewModel):专门负责主动保护模型对象中的变量与界面中的变量同步。

因为有了ViewModel的存在，数据能够主动同步到界面上，简直防止了大量反复的编码！

2 插值语法

Vue.js 的外围是一个容许采纳简洁的模板语法来申明式地将数据渲染进 DOM 的零碎：

<div id="app">  {{ message }}</div>
var app = new Vue({  el: '#app',  data: {    message: 'Hello Vue!'  }})

后果：

Hello Vue!

3 vue常见的指令语法

v-bind
元素的属性值随着程序内容的变动而变动，可应用v-bind：

<元素 v-bind:属性名="变量或js表达式">简化模式，根本语法如：<元素 :属性名="变量或js表达式">
<!-- 绑定一个 attribute --><img v-bind:src="imageSrc"><!-- 缩写 --><img :src="imageSrc">

v-show

v-if和v-else

v-else-if

v-for
为以后遍历的元素提供别名：

<div v-for="item in items">  {{ item.text }}</div>

v-on
@click为v-on:click的缩写

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <script src="js/vue.js"></script>    </head>    <body>        <div id="app">            <h1 v-on:click="handleClick(1)">{{ msg }}</h1>            <h1 @click="handleClick(2)">{{ msg }}</h1>        </div>    </body>    <script>        new Vue({            el: "#app",            data: {                msg: "Hello Vue."            },            methods:{                handleClick: function( who ){                    this.msg = who+"- 你好，世界";                }            }        });    </script></html>

v-html

v-text

v-model
你能够用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创立双向数据绑定。它会依据控件类型主动选取正确的办法来更新元素。

会疏忽所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据起源。你应该通过 JavaScript 在组件的 data 选项中申明初始值

v-model 在外部为不同的输出元素应用不同的 property 并抛出不同的事件：

  • text 和 textarea 元素应用 value property 和 input 事件；
  • checkbox 和 radio 应用 checked property 和 change 事件；
  • select 字段将 value 作为 prop 并将 change 作为事件。

实例测试：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <script src="../js/vue.js"></script>    </head>    <body>        <div id="app">            v-text:<div v-text="txt"></div>            v-html:<div v-html="html"></div>                        v-if:            <div v-if="age>18">成年</div>            <div v-if="age<=18">未成年</div>                        v-else:            <div v-if="age>18">成年</div>            <div v-else="age<=18">未成年</div>                        v-else-if:小于60不及格，60-90及格，90-100优良            <div v-if="score>=90">优良</div>            <div v-else-if="score>=60">及格</div>            <div v-else="score<60">不及格</div>                        v-show:            <div v-show="age>18">一枝老花</div>                        v-for:(foreach,o代表以后对象，每次从数组中获取一个值，寄存在中)            <div v-for="o in colors">{{o}}</div>            <div v-for="(a,b,c,) in person">{{a}}，{{b}}，{{c}}</div>            <div v-for="(v,k,i,) in person">{{i}}，{{k}}，{{v}}</div>                        <div v-for="(v,k,i) in animal">{{cat}}</div>                        object对象：            <div v-for="p in person">{{p}}</div>            <div>{{person.name}}</div>            <div>{{person.tostring()}}</div>                    </div>    </body>    <script>        new Vue({            el:"#app",            data:{                txt:"这是一个文本",                html:"<div style = 'font-size:26px'>这是一个大字</div>",                age:17,                score:62,                colors:['red','blue','green'],                person:{                    name:"jack",                    age:20,                    address:"北京欢迎您",                    tostring:function(){                        return this.name+","+this.age;                    }                },                animal:{                    name:"dog",                    age:2,                    color:"red",                    cat:{                        name:"猫咪"                    }                }            }        })    </script></html>

后果：