vue

初探vue

1.什么是MVVM

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

采用双向绑定（data-binding）：即数据双向绑定，数据和视图同步变化。View的变动，自动反映在 ViewModel，反之亦然

2.mvvm的优点

mvvm和mvc模式一样，主要目的是分离视图和模型

低耦合，View可独立于Model变化和修改，ViewModel可以绑定到不同的View上。
可复用，可以把视图逻辑放在VM里面，让多个View重用这段视图逻辑
独立开发，开发人员可专注于业务逻辑和数据的开发，设计人员可以专注于页面设计
可测试，可以针对VM来测试

一、vue基本语法

1. v-if

    <h1 v-if="message1===hello,vue1">123</h1>
    <h1 v-else-if="message2===hello,vue2">hello</h1>
    <h1 v-else="message3===hello,vue3">hellohellohello</h1>

2. v-for

<li v-for="(it,index) in message">{{it.id}}--->{{index}}</li>
<script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: [{
                    id: 11111
                }, {
                    id: 22222222
                }, {
                    id: 333333333333
                }, ]
            }
        });
    </script>

二、vue的七个属性

el属性
- 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
- 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
- 用来设置模板，会替换页面元素，包括占位符。
methods属性
- 放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
- 创建真正的Virtual Dom
computed属性
- 用来计算
watch属性
- watch:function(new,old){}
  - 监听data中数据的变化
  - 两个参数，一个返回新值，一个返回旧值，

三、vue绑定事件

1. v-on简写 @

v-on 指令用于绑定HTML事件：v-on:click 缩写为 @click

    <div id="app">
        <button v-on:click="say">dianwo</button>
        </div>
        
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js "></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js " crossorigin="anonymous "></script>
    
    <script>
        var vm = new Vue({
            el: "#app ",
            data: {
                haha: "呱呱呱",
            },
            //方法必须定义在vue的methods属性里面
            methods: {
                say: function() {
                    alert(this.haha);
                }

            }
        });
    </script>

2. v-bind简写 `:`

v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href

3. v-model 实现数据双向绑定

<body>
    
    <div id="app">
        <input type="text" v-model=" message ">
        <hr> <textarea v-model=" message "></textarea>
        <hr>
        <input type="radio" v-model=" message " name="sex" value="男">男
        <br>
        <input type="radio" v-model=" message " name="sex" value="女">女
        <hr>
        <select v-model=" message ">
            <option value="" disabled selected>--请选择--</option>
            <option>阿迪达斯</option>
            <option>乔丹</option>
            <option>耐克</option>
       </select>
        <hr>
        <label><input v-model=" message " name="Fruit" type="checkbox" value="" />苹果 </label>
        <label><input v-model=" message " name="Fruit" type="checkbox" value="" />桃子 </label>
        <label><input v-model=" message " name="Fruit" type="checkbox" value="" />香蕉 </label>
        <label><input v-model=" message " name="Fruit" type="checkbox" value="" />梨 </label>
        <hr>
        <br> <span style="color:red "> 双向绑定展示: {{message}}</span>
    </div>
    
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js "></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js " crossorigin="anonymous "></script>
    
    <script>
        var vm = new Vue({
            el: "#app ",
            data: {
                message: " "
            }
        });
    </script>
</body>

四、vue component 组件

component，可自定义标签名字

<div id="app">
        <adidas v-for="it in message" v-bind:its="it"></adidas>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js "></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js " crossorigin="anonymous "></script>

    <script>
        Vue.component("adidas", {
            props: ['its'],
            template: '<li>{{its}}</li>'
        });
        var vm = new Vue({
            el: "#app ",
            data: {
                message: ['java', 'mysql', 'keke']
            }
        });
    </script>

v-for，遍历数组

v-bind，把遍历出来的it绑定到its属性上简写:

五、vue异步通信axios

1.什么是axios

axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，主要作用就是实现ajax异步通信，特点：

从浏览器中创建XmlHttpRequests
从node.js创建http请求
支持Promise API（js链式编程）
拦截请求和响应
转换请求数据和响应格式
取消请求
自动转换json数据
客户端支持防御XSRF（跨域请求伪造）

为什么用axios

vue是一个视图层框架，并且作者严格遵守SoC（关注度分离原则）所以vue并不包含ajax的通信功能。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
</head>

<body>
    <div id="app">
        {{ info.name }}
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return { //请求的返回参数的格式，必须和json字符串一样
                    info: {
                        name: null,
                        info: null
                    }
                }
            },
            mounted() {
                axios.get('data.json')
                    .then(response => (console.log(data)));
            }
        })
    </script>
</body>

</html>

六、vue计算属性

computed：可以把计算出来的结果，保存在属性中，缓存在内存中，除非缓存刷新，否则不会再重新计算；而methods中的方法不会把结果放在缓存，会重新计算结果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <p>nowtime:{{nowtime}}</p>
    </div>

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

    <script>
        var vm = new Vue({
            el: '#app',
            computed: {
                nowtime: function() {
                    return Date.now();
                }
            }
        });
    </script>

</body>
</html>

七、插槽 slot

内容分发：在vue.js中，我们使用<slot>元素作为承载分发内容的出口，作者称为插槽。

比如：制作一个待办事项组件，该组合由标题和内容组成，这三个组件又是相互独立，该如何操作？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <adidas v-for="it in message" v-bind:its="it"></adidas>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js "></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js " crossorigin="anonymous "></script>

    <script>
        Vue.component("adidas", {
            props: ['its'],
            template: '<li>{{its}}</li>'
        });
        var vm = new Vue({
            el: "#app ",
            data: {
                message: ['java', 'mysql', 'keke']
            }
        });
    </script>
</body>

</html>

自定义分发事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <course>
            <course-title slot="course-title" v-bind:title="title"></course-title>
            <course-con slot="course-con" v-for="(msg,index) in msg" v-bind:msg="msg" :index="index" v-on:remove="removemsg(index)"></course-con>
        </course>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        Vue.component("course", {
            template: '<div>
                 <slot name="course-title"></slot> 
                    <ul> 
                        <slot name="course-con"></slot> 
                    </ul> 
                       </div>'
        });

        Vue.component("course-title", {
            props: ['title'],
            template: ' <h2><i>{{title}}</i></h2> '
        });

        Vue.component("course-con", {
            props: ['msg', 'index'],
            template: '<li><i>{{index}} --- {{msg}} </i> <button @click="remove">删除</button></li>',
            methods: {
                remove: function(index) {
                    this.$emit('remove', index);
                }
            }

        });

        var vm = new Vue({
            el: '#app',
            data: {
                title: '课程名',
                msg: ['java', 'mysql', 'linux']
            },
            methods: {
                removemsg: function(index) {
                    console.log("删除了" + this.msg[index]);
                    this.msg.splice(index, 1); //从指定索引位置开始删除n个元素
                }
            },
        });
    </script>


</body>

</html>

八、vue-cli

vue-cli 是官方提供的一个脚手架，用于快速生成一个vue项目模板。

主要功能

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

需要的环境

node.js : http://nodejs.cn/download/
git官网下载 : https://git-scm.com/downloads/
淘宝镜像下载 : https://npm.taobao.org/mirrors/git-for-windows/

安装node.js淘宝镜像下载加速器( cnpm )

# 配置淘宝镜像
# -g 全局安装
npm config set registry https://registry.npm.taobao.org
npm install cnpm -g

# 或者使用这条语句解决下载慢的问题
npm install --registry=https://registry.npm.taobao.org

安装 vue-cli

npm install -g @vue/cli

九、webpack

webpack是一个js应用的静态模块打包器（module bundler）。处理应用程序时，会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundler。

hello.js

exports.sayHi=function () {
    document.write("<h1>kk历险记</h1>")
}

main.js

var hello = require("./hello");
hello.sayHi();

webpack.config.js

module.exports= {
    entry: './module/main.js',
    output: {
        filename: './js/bundle.js'
    }
};

index.html

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

<script src="dist/js/bundle.js"></script>
</body>
</html>

十、vue-router 路由

安装vue-router

npm install vue-router --save-dev

First.vue

<template>
<h1>内容页面</h1>
</template>

<script>
export default {
  name: "First"
}
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">

    <router-link to="/First">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import First from '../src/components/First.vue'

export default {
  name: 'App',
  components: {
    First
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>