zoukankan      html  css  js  c++  java

  • vue

    初探vue

    1.什么是MVVM

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

    img

    ​ 采用双向绑定（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淘宝镜像下载加速器( 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>

    main.js

    import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from './router'

Vue.config.productionTip = false

Vue.use(VueRouter)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

    /router/index.js

    import Vue from "vue"
import VueRouter from 'vue-router'
import First from "../components/First";

Vue.use(VueRouter)

export default  new VueRouter({
  routes:[
    {
      path:'/first',
      name:'first',
      //跳转的组件
      component:First
    }
  ]
});

    十一、vue + elementUI

    npm安装

    npm i element-ui -s

    CDN安装

    目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

    <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

    vue-elementUI 我的GitHub仓库传送门
  • 相关阅读:
    做足以让自己骄傲的活
    Count(*) 与 count(field) 一样吗？
    Explain Plan试分析
    Oracle SQL Developer中查看解释计划Explain Plan的两种方法
    整理+学习《骆昊-Java面试题全集（上）》
    【转】Java就业指导
    如何清晰的、高质量的给面试官介绍自己的电商项目【借鉴】
    留存的图片
    Linux学习_006_JavaEE程序员常用linux命令整理
    给Linux初学者的七个建议，值得一读
  • 原文地址：https://www.cnblogs.com/qqkkOvO/p/14368008.html
Copyright © 2011-2022 走看看