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