vue学习（上）

什么是MVVM

MVVM是一种软件架构模式，是一种简化用户界面的事件驱动编程方式

核心是ViewModel层，负责转换Model中的数据对象让数据变得更容易管理和使用

简单理解：

Model(data层，可从后端请求拿的数据，也可自己伪造)view：视图层ViewModel：相当于页面调试，与view,model双向绑定，随时更新，动态更改 MVVM特点

完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施重要的一环前端不用专注于写数据核心和实现了DOM监听与数据绑定 V-bind

你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”.

    鼠标悬停几秒钟查看此处动态绑定的提示信息！

v-if


  现在你看到我了
  现在你看到我了

//data返回seen: true


  A
  B
  C
  D

data:{
type: 'A'
}

v-for

 {{item.message}}
data:{
            items: [
                {message:"我爱你java"},
                {message:"java你爱我吗"}
            ]
        }

数组隐藏属性

{{item.message}}---{{index}}
//输出结果
我爱你java---0
java你爱我吗---1

v-on

方法必须定义在vue的methods中


var vm = new Vue({
        el:"#app",
        data:{
            message: "任建勇你好啊"
        },
        methods: {
            sayHi: function(event){
                alert(this.message);
            }
        }
    });

什么是数据双向绑定

即当数据发生变换，试图也发生变化

视图发生变换，数据也会同步变化

可以用v-model 指令在表单、、元素上创建双向数据绑定

//单行输入框，多行框

{{message}}
var vm = new Vue({
        el:"#app",
        data:{
            message: "123"
        }
    });

//单选框

    性别：
    男
    女
    
        选中了谁：{{message}}
    

var vm = new Vue({
        el:"#app",
        data:{
            message: ''
        }
    });

下拉框


    下拉框：
    
    
        选择了{{selected}}
    

var vm = new Vue({
        el:"#app",
        data: {
            selected: ''
        }
    });

组件

定义一个组件

组件和var是同级的，所以接收数据：data中数据给items,每个item的值给组件，组件中必须用props接收

Axios

Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API [JS 中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON数据为什么要用 Axios

由于Vue.js是一个视图层框架，严格遵守 SoC（关注度分离原则），所以vue.js并不包括 AJAX 的通信功能，推荐使用Axios 框架。少用JQuery，因为它操作Dom太频繁

Vue生命周期

一堆方法

略略略

mounted() 和 data() 方法




  {{data.name}}
  

var vm = new Vue({
        el: "#app",
        data(){//此data非彼data:
            return{
                data:{
                    name:null,
                    age:null,
                    obj:{
                        aaa:null,
                        bbb:null,
                        url:null
                    }
                }
            }
        },
        mounted(){//钩子函数 链式编程  ES6新特性
            axios.get('../renjianyong.json').then(response=>(this.data=response.data));
        }
    });

Vue三大特性

计算属性

一个能够将计算结果缓存起来的属性（将行为转换成了静态的属性）

可以想象成缓存

methods中方法和computed 中方法名不能相同

currentTime{{currentTime()}}

内容分发

：插槽

通过插槽实现动态

自定义事件

远程调用methods中方法

组件通过this.$emit() 方法绑定前端的自定义事件（@click方法）

自定义事件事件绑定Methods中方法

小结

基础语法条件判断：if for网络通信：axios组件以及页面布局

vue学习（上）

A

B

C

D

Java相关栏目本月热门文章