Vue

Soc：

HTML + CSS +JS ：视图：给用户看，刷新后台数据

网络通信：axios

页面跳转：vue-router

状态管理：vuex

Vue-UI：ICE

webpack打包

CSS预处理器：用一门专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件

  • SASS：基于Ruby
  • LESS：基于Node.js

虚拟Dom：利用内存

计算属性：Vue特色

Axios：前端通信框架

MVVM + Dom

UI 框架

  • Ant-Design：阿里巴巴出品，基于React的UI框架
  • ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
  • BootStarp
  • AmazeUI

JavaScript构建工具

  • Babel：js编译工具，主要用于浏览器不支持的E
  • WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载

三端统一

图片说明

MVVM

一种软件架构模式

M MV V

MV进行前后端双向绑定

  • Model：模型层 --> JavaScript对象
  • View：视图层 --> Dom(HTML操作的元素)
  • ViewModel：连接视图和数据的中间件
  • 前后端双向绑定
  • 核心 : DOM监听和数据绑定

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信
图片说明
图片说明

Vue的第一个程序

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

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




<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello,vue"
        }
    });

</script>
</body>
</html>

v-bind ：绑定

{{}}

v-if

v-else 判断循环

<div id="app">
    <span v-bind:title="message">
        动态信息提示
    </span>
    <!-- if、else判断 -->
    <h1 v-if="type==='A'">Yes</h1>
    <h1 v-else-if="type==='B'">No</h1>
    <!-- for循环遍历 -->
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>
    var vm = new Vue({
        el:"#app",
        data:{
            message: "hello,vue",
            ok : true,
            type: 'A',
            items: [
                {message: 'Rickduck'},
                {message: 'Rick2'}
            ]
        }
    });

</script>

事件

  • on 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message: "Rick"
        },
        methods:{
            say: function (){
                alert(this.message)
            }
        }
    });

</script>

双向绑定

图片说明

  • v-model
  • 会忽略表单元素的value、checked、selected等特性的初始值
  • 需要对组件声明初始值

Vue组件

  • Vue.component：创建一个组件
  • v-for = "item in items"：遍历items数组，以item命名
  • v-bind:name='item'：Vue组件对象进行数据绑定，将Vue中name对象绑定到item
  • props：Vue中对象名 
<div id="app">
    <li>hello</li>
    <Rick v-for="item in items" v-bind:attr="item"></Rick>
</div>


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

    Vue.component("Rick",{
        props:['attr'],
        template: '<li>{{attr}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            items: ["java","python","linux"]
        }
    });

</script>

Axios异步通信

  • 可以用在浏览器端和NodeJS的异步通信框架
  • 主要作用实现AJAX异步通信 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

    var vm = new Vue({
        el: "#vue",
        data(){
            return{
                info: {
                    name: null,
                    address: {
                        street: null,
                        city: null
                    }
                }
            }
        },
        mounted(){
            //钩子函数
            axios.get('data.json').then(response=>(this.info=response.data));
        }
    });

</script>

闪烁问题 ：网络延迟

    <!-- v-clock：解决闪烁问题 -->
    <style>
        [v-clock]{
            display: none;
        }
    </style>

Vue生命周期

计算属性

  • 计算属性是属性
  • 通过{{filedName}}调用
  • 当内部内容发生改变时会重新计算~
  • 类似于缓存 
<div id="vue">
    <div>{{currentTime}}</div>
    <div>{{mes}}</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

    var vm = new Vue({
        el: "#vue",
        data:{
            message: "null",
            mes: "1"
        },
        computed: {
            currentTime: function (){
                this.mes = this.message;
                return Date.now();
            }
        }
    });

</script>

  • methods：定义方法，调用方法需要带括号 例如:currentTime()

  • computed：定义计算属性，调用属性使用currentTime2，不需要带括号

  • 如果在方法中的值发生变化，则缓存会刷新

  • 计算属性的主要特性是为了将不经常变化的计算结果进行缓存，减少系统开销

slot