• Vue初步(笔记)


    生命周期

    在这里插入图片描述

    组件初步

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <fxz  v-for="a in arr" v-bind:F="a"></fxz>
        </div>
    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            Vue.component("fxz",{ //注册组件的格式
                props:['F'],
                template:'<li>{{F}}</li>>'
            });
            var vm = new Vue({
                el:'#app',
                data:{
                    arr:["北京","上海","广东","深圳"]
                }
            })
        </script>
    </body>
    </html>
    

    axios异步通信

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            {{info.name}}<br>
            {{info.page}}<br>
            {{info.url}}
        </div>
        <!--导入vue cdn-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!--导入axios cdn-->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data(){ //以函数的形式获取info变量
                    return {
                        info:{ //inofo变量中储存axios获取到的数据
                            name:'',
                            url:'',
                            page:''
                        }
                    }
                },
                mounted(){//生命周期函数 在挂载完成时执行
                    //通过axios以get方式在上级目录中的json文件中获取数据
                    axios.get('../package.json').then(response=>(this.info=response.data))
                }
            })
        </script>
    </body>
    </html>
    

    json文件:

    {
      "name":"狂神说java",
      "url": "http://baidu.com",
      "page": "1",
      "isNonProfit":"true",
      "address": {
        "street": "含光门",
        "city":"陕西西安",
        "country": "中国"
      },
      "links": [
        {
          "name": "B站",
          "url": "https://www.bilibili.com/"
        },
        {
          "name": "4399",
          "url": "https://www.4399.com/"
        },
        {
          "name": "百度",
          "url": "https://www.baidu.com/"
        }
      ]
    }
    

    插槽

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <todo>
                <todo-items slot="todo-items" v-for="item in items" :item1="item"></todo-items>
                <todo-title slot="todo-title" :title1="title"></todo-title>
            </todo>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            Vue.component("todo",{
                template:'<div>
    ' +
                    '        <slot name="todo-title"></slot>
    ' +
                    '        <ul>
    ' +
                    '            <slot name="todo-items"></slot>
    ' +
                    '        </ul>
    ' +
                    '    </div>'
            });
            Vue.component("todo-title",{
                props: ['title1'],
                template: '<h2>{{title1}}</h2>'
            });
            Vue.component("todo-items",{
                props:['item1'],
                template:'<li>{{item1}}</li>'
            });
            var vm = new Vue({
                el:'#app',
                data:{
                    title:'做项目',
                    items:['前端','后端','数据库']
                }
            })
        </script>
    </body>
    </html>
    

    自定义事件分发

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <todo>
                <todo-title slot="todo-title" :title1="title"></todo-title>
                <todo-items slot="todo-items" v-for="(item,index) in items"
                            :index1="index" :item1="item" @remove="removeIt(index)">
                </todo-items>
            </todo>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            Vue.component('todo',{
                template:'<div>
    ' +
                    '        <slot name="todo-title"></slot>
    ' +
                    '        <ul>
    ' +
                    '            <slot name="todo-items"></slot>
    ' +
                    '        </ul>
    ' +
                    '    </div>'
            });
            Vue.component("todo-title",{
                props: ['title1'],
                template: '<h2>{{title1}}</h2>'
            });
            Vue.component('todo-items',{
                props: ['index1','item1'],
                template:'<li>{{index1}} {{item1}} <button @click="remove">删除</button></li>>',//按下按钮 触发组件中的remove方法
                methods: {
                    remove: function (index1) { //remove方法会抛出一个事件
                        this.$emit('remove',index1)
                    }
                }
            });
            var vm = new Vue({
                el:'#app',
                data:{
                    title:'城市',
                    items:['北京','上海','广东','深圳']
                },
                methods:{
                    removeIt:function(index){
                        this.items.splice(index,1)
                    }
                }
            })
        </script>
    </body>
    </html>
    

    路由

    1: 安装路由:

    npm install vue-router --save
    

    2:在componebts下创建组件

    3:src下创建router包,并创建路由配置文件index.js

    import Vue from 'vue'
    //导入路由
    import VueRouter from 'vue-router'
    //导入组件
    import Content from "../components/Content";
    import Main from "../components/Main"
    //安装路由
    Vue.use(VueRouter);
    
    //配置导出路由
    export default new VueRouter({
        routes:[
            {
                //路由路径
                path:'/content',
                component:Content
            },
            {
                path: '/main',
                component: Main
            }
        ]
    });
    

    4:在App.vue中引用router-link创建连接 引用router-view创建视图

    <template>
      <div id="app">
        VUE-ROUTER<br>
        <router-link to="/main">首页</router-link>
        <router-link to="/content">内容页</router-link>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
    }
    </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>
    
    

    5:在main.js中导入router,并讲router加入配置

    
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    Vue.config.productionTip = false
    
    
    new Vue({
      el:'#app',
      router,
      render: h => h(App),
    }).$mount('#app')
    
    

    6:运行

     npm run dev
    

    单词

    use 使用
    path 路径
    router 路由
    export 导出
    default 默认
    modules 模块
    children 孩子
    template 模板
    components 组件
    
  • 相关阅读:
    Bzoj 1878: [SDOI2009]HH的项链 莫队
    BZOJ 2140: 稳定婚姻 Tarjan Map
    Bzoj 2190 : [SDOI2008]仪仗队 数论 特判
    bzoj 16801740 : [Usaco2005 Mar]Yogurt factory 贪心 双倍经验
    BZOJ 5387: [Lydsy1806月赛]质数拆分
    BZOJ 1379: [Baltic2001]Postman 水题
    Bzoj : 1823: [JSOI2010]满汉全席
    4952: [Wf2017]Need for Speed 二分
    BZOJ 2301: [HAOI2011]Problem b 2045: 双亲数 同BZOJ 1101 Zap 莫比乌斯反演 3倍经验
    BZOJ 1030: [JSOI2007]文本生成器 AC自动机
  • 原文地址:https://www.cnblogs.com/fxzemmm/p/14847919.html
Copyright © 2020-2023  润新知