渐进式框架-Vue(实现响应的数据绑定和组合)

Vue.js是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。(当数据更新的时候，界面自动更新)

Vue下载地址(开发环境)...

一、声明式渲染

允许采用简洁的模板语法（JSON）来声明式地将数据渲染进 DOM 的系统

• 1.1、JSON

什么是json?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

• 1.2、 json语法

对象是一个无序的“‘名称/值’对”集合。一个json对象以 {左括号 开始， }右括号 结束。每个“名称”后跟一个 :冒号 ；“‘名称/值’ 对”之间使用 ,逗号 分隔

 {name:'小明'}
 {name:'小明',age: 23}
 {name:'小明',age: 23, sex:false}
 { 
   name:'小明',
   age: 23, 
   sex:false, 
   class:{
           name:'一班',
           num:1001
         }
 }

 ['小明'，'张三','小丽']
 {studenname: ['小明'，'张三','小丽']}   
 {
     student:[
         {name:'小明',age:23},
         {name:'张三',age:21},
         {name:'李四',age:22}
     ]
 }

第一个Vue：

<div id="app">
  {{ message }}
</div>

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

等价于：

const app = document.getElementById('app');
app.innerHTML = 'Hello Vue!';

• 可以看到在 Vue 构造器中有一个el参数，它是DOM元素中的 id。
• data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
• methods用于定义的函数，可以通过 return来返回函数值。

二、条件与循环

2.1、v-if/v-else-if/v-else 判断条件

 <div id="app">
         <div v-if = "isRemove">移除我if</div>
         <div v-else = "isRemove">显示我else</div>
</div>

const vm = new Vue({
        el:"#app",
        data:{
            isRemove:false, 
 },

v-if带有移除功能
不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构

2.2、v-show

显示隐藏，等价于 display属性

<div id="app">       
        <div v-show="isShow">隐藏显示指令</div>
        <div v-show="noShow">隐藏显示指令</div>
</div>

 const vm = new Vue({
            el:'#app',
            data:{   
              noShow:false,       
              isShow:true,
            }
        });

2.3、v-for绑定数组的数据来渲染一个项目列表（循环数组）

 <li v-for = "index in arr">{{index.name}}:{{index.age}}</li>

const vm = new Vue({
        el:"#app",
 data:{
            isRemove:false,
            arr:[
                {name:"张三",age:20},
                {name:"李四",age:21},
                {name:"王五",age:22},
                {name:"赵六",age:23},
            ],
            setColor:"red",
            number:123456,            
        },
})

• v-for循环添加到li中并新建li

三、插值

1、{{msg}}

<span>{{msg}}</span>

2、v-text

主要用来更新text，等同于JS的text属性。

<span v-text="msg"></span>

3、v-html

主要用用来更新html,等同JS的innerHtml属性（可以获取html标签）

<span v-html="msg"></span>

4、v-once

只被赋值一次

<span v-once>{{msg}}</span>

5、v-cloak

解决页面闪烁

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak>
 
</div>

6、v-model

双向绑定表单元素的value值

<input type="text" v-model="val">