VUE-01

VUE介绍

一套用于构建用户界面的渐进式框架
什么是渐进式
https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx=1&sn=14fe8a5c72aaa98c11bf6fc57ae1b6c0&source=41#wechat_redirect

1. 声明式渲染
2. 组件系统
3. 客户端路由（单页应用 single page application SPA）
4. 状态管理
5. 构建工具
   声明式渲染和命令式渲染
   声明式：只需要声明在那里，程序会帮我们处理底层逻辑（数组的map方法）
   命令式：需要用具体的代码表达在那里，要做什么，怎么实现(for 循环数组)
   vue声明式渲染：只要初始化vue实例，数据就可以绑定到DOM模板上。

VUE框架的特点
构建用户界面，只关注View层
简单易学，简洁，轻量、快速
渐进式框架

认识MVC开发模式
M----Model----模型----数据（建模：把人的信息抽选出来）
V----View-----视图----表现层（HTML/CSS 用户的入口）
C----Controller—控制器----业务逻辑

MVC开发模式的缺点
1、M和V的耦合度高
2、C特别臃肿
变种的开发模式MVP
P:presenter（主持人）
优点：如果M或V发生了变化，只要修改P就可以了。M和V没有耦合了
缺点：P会变得特别特别的臃肿

变种的开发模式MVVM
VM:viewmodel 视图层+模型层，两个融合
优点： M和V没有耦合了，部分的业务逻辑分给了V，不会特别臃肿

VUE的两个核心点

1. 响应式的数据绑定
   当数据发生变化，视图会自动更新
   忘记操作DOM这回事，专注于数据的操作
2. 可组合的视图组件
   把视图按照功能划分成若干个组件，组件可以一级一级的组合成应用，形成倒置
   的组件树。
   使用组件的优点：便于维护、重用性好、便于测试

vue起步
引包
启动 new Vue(options);
配置options（选项）对象：{el:发生行为的目的地, template:装载数据的模板}
静态数据的装载

new Vue({
	el:"#app",
	template:'<div><h1>hello world</h1></div>'
})

动态数据的装载

new Vue({
    el:"#app",
    template:'<div><h1>hello world{{text}}</h1></div>',
    data:function(){
        return {
            text:"大家好"
        }
    }
})

插值表达式{{ 表达式 }}“Mustache”语法（胡子语法）
{{ a?b:c }} {{ {name:’web’,sex:’man’} }}

vue中的指令
概念：为了更方便的控制页面中的模板和数据，vue提供的一些操作叫指令。
所有指令都是以v-xxx开头的属性，就像是在html中添加自定义属性一样。
指令其实是vue封装好操作DOM行为而设置的一些暗号。
常用指令
v-text 就是innerText
v-html 就是innerHTML
v-if 值为true 元素插入 值false 元素移除
v-else-if
v-else
v-show 值为true 元素显示 值false 元素 display: none;

new Vue({
    el:"#app",
    template:`
    <!--必须只能放一个根节点-->
        <div>
            <span v-text="text"></span>
            <span v-html="html"></span>
            <button v-if="isExit">测试v-if</button>
            <!--以下的3个指令必须是相邻的元素-->
            <button v-if=" num==1 ">测试v-if</button>
            <button v-else-if=" num==2 ">测试v-if-else</button>
            <button v-else>测试v-else</button>
            <hr>
            <button v-show="isShow">测试v-show</button>
        </div>
    `,
    data:function(){
        return {
            text:"大家好",
            html:"<strong>大家好</strong>",
            isExit:true,
            num:1,
            isShow:false
        }
    }
})
 

给元素属性绑定值v-bind
两种写法
1、 v-bind:属性=”变量”
2、 ：属性=”变量”

new Vue({
    el:"#app",
    template:`
    <!--必须只能放一个根节点-->
        <div>
            <input type="text" v-bind:value="myValue" :file=" 'XXX' ">
        </div>
    `,
    data:function(){
        return {
           myValue:"hello"
        }
    }
})

给元素绑定事件v-on
两种写法
1、 v-on:事件属性=”表达式 || 函数名”
2、 @事件属性=”表达式 || 函数名”

new Vue({
    el:"#app",
    template:`
        <div>
            <input type="text" v-bind:value="myValue" :file=" 'XXX' ">
            <button v-on:click="myValue='abc'">点击改变myValue的值</button>
            <button @click=" myValue='123' ">点击改变myValue的值</button>
        </div>
    `,
    data:function(){
        return {
           myValue:"hello"
        }
    }
})

这里是通过事件修改vue中的数据，再通过v-bind实现单向数据响应
 
v-model实现双向数据响应

    <div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
    </div>
    <script>
        var message="hello world";
        var vm=new Vue({
            el:"#app",
            data:{//数据对象上的属性会成为  实例对象上的属性
                msg:message
            }
        })
        console.log(vm);
/* 
            在控制台中输入  vm.msg="abc"   也能修改
         */
    </script>

特别提醒：v-model只能给具有value属性的元素添加

new Vue({
    el:"#app",
    template:`
        <div>
            <input type="text" v-model="myValue">
            <span v-show=" myValue=='' ">用户名不能为空</span>
        </div>
    `,
    data:function(){
        return {
           myValue:"请输入用户名"
        }
    }
})

v-for输出数组和对象数据到页面
语法形式：
v-for=”item in arr”
v-for=”(item,index) in arr”
v-for=”(value,key,index) in obj”

new Vue({
    el:"#app",
    template:`
        <div>
            <ul>
                <li v-for="item in stus" :class="item.myclass">{{ item.name }}</li>
            </ul>
            <ul>
                <li v-for="(value,key,index) in fruit" :class="index%2==0?'bga':'bgl'">{{ key+':'+value }}</li>
            </ul>
        </div>
    `,
    data:function(){
        return {
           stus:[{name:'张三',myclass:'bga'},{name:'李四',myclass:'bgl'},{name:'王五',myclass:'bga'},],
        fruit:{'apple':'10kg','banana':'30kg','orange':'50kg'}
        }
    }
})

指令小结
操纵文本节点：v-text v-html
操纵属性节点：v-bind:属性 或 :属性
操纵事件属性：v-on:事件属性 或 @事件属性
操纵元素：v-if v-else-if v-else（插入移除元素） v-show（显示隐藏元素）
操纵数据：v-mode（双向数据流 元素要有value属性） v-for（多数据的循环展示）