vue基础

Exercise


Application


Hello World

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 
        1、引入vue.js
        2、定义一个div,id为app
        3、创建Vue实例
        4、显示Vue的数据 
        -->
        {{name}}
        <p>{{name}}</p>
    </div>
    <script>
        //实例化vue即创建vue案例,vue有七大属性(唯一根元素)
        var vm = new Vue({
            /*属性1:el,表示当前Vue要控制的页面区域,el的属性值是一个字符串,一个选择器,
            通过el将vue实例与div进行绑定,绑定之后,vue就可以操作div及其子元素,并且数据也可以显示在div内部*/
            el: '#app',
            //属性2:date(vue实例数据对象),表示当前Vue要控制的区域的数据,date的属性值是一个对象
            data: {
                name: 'Vue实例绑定成功'
            }
            //属性3:template:用来设置模板,会替换页面元素,包括占位符
            //属性4:methods:放置页面中的业务逻辑,js方法一般都放置在methods中
            //属性5:render:创建真正的Virtual Dom
            //属性6:computed:计算属性,保存计算结果
            //属性7:watch:监听data中数据的变化。两个参数,一个返回新值,一个返回旧值
            //components:定义子组件、filters:过滤器
        })
        console.log(vm.$data.name);
        console.log(vm.name);
    </script>
</body>

</html>



标签绑定

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-on是事件监听,v-bind是单向绑定,v-model:双向绑定,{{msg}}:插值表达式 -->
        <button v-on:click="hi">click</button>
        <br>
        <span v-bind:title='msg'>
            悬停信息提示
        </span>
        <input type="text" v-bind:value="msg" />{{msg}}
        <input type="text" v-model="msg" />{{msg}}
        <br><br>
        <input type="text" v-model.lazy="a_0" />
        <!-- .lazy(焦点变更即更新) .number(只留数字) .trim(去首尾空格)等 -->
        <br>{{a_0}}<br>
        <input type="checkbox" v-model="a_1" />我想
        {{a_1}}
        <p>你想选啥
            <input type="checkbox" v-model="a_2" value="1号" />1号
            <input type="checkbox" v-model="a_2" value="2号" />2号
            <input type="checkbox" v-model="a_2" value="3号" />3号
        </p>
        {{a_2}}
        <p>你还想选啥
            <input type="radio" v-model="a_3" value="1号" />1号
            <input type="radio" v-model="a_3" value="2号" />2号
            <input type="radio" v-model="a_3" value="3号" />3号
        </p>
        {{a_3}}
        <br>
        <div v-html="url"></div><br>
        <!-- v-show是显示/隐藏,v-if是创建/删除 -->
        <div v-show="isShow">看到我没</div><br>
        <div v-if="isHave">那我呢</div><br>
        <button v-on:click="zhe">点这儿</button><br>
        <br>
        <h1 v-if="type==='L'">L</h1>
        <h1 v-else-if="type==='XL'">XL</h1>
        <h1 v-else-if="type==='XXL'">XXL</h1>
        <!-- vm.type = 'XXL'则会改变h1提示的信息 -->
        <br>
        <li v-for="(item,i) in items">
            值:{{item}},索引:{{i}}
        </li>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue.js',
                a_0: '',
                a_1: false,
                a_2: [],
                a_3: '',
                url: '<h1>v-html与v-show</h1>',
                isShow: false,
                isHave: false,
                type: 'L',
                items: ['大?', '加大?', '加加大']  //push可以增加数组元素,最好使用Vue.set(vm.item,0,'好大'),如果是对象,也可以选set

            },
            methods: {                            //方法必须定义在methods事件中,通过v-on绑定
                hi: function () {
                    alert(this.msg)
                },
                zhe: function () {
                    this.isShow = !this.isShow;
                    this.isHave = !this.isHave;
                }
            }
        });
    </script>
</body>

</html>



Axios异步通信

Axios 是一个开源的可以用在浏览器端和 Node JS 的异步通信框架,主要作用是实现AJAX异步通信。

特点:

  • 从浏览器创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF(跨站请求伪造)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="vue">
        <div>{{info.name}}</div>
        <div>{{info.address.street}}</div>
        <!-- 只要不是<div>类型的都要写v-bind -->
        <a v-bind:href="info.url">点这儿</a>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue',
            data() {
                return {     //请求返回的参数必须和json字符串一样
                    info: {
                        name: null,
                        address: {
                            street: null,
                            city: null,
                            country: null
                        },
                        url: null
                    }
                }
            },
            mounted() {  //钩子函数,链式编程
                axios.get('/data.json').then(response => (this.info = response.data));
            }
        });
    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <!-- 如果上述地址失效,实验不成功,则需要更换CDN源或者手动下载文件并引用 -->
</head>
<body>
    <!-- 这是View  现在就是template模板-->
    <div id="app">
        <button v-on:click='x_1'>点这儿</button>
        <button v-on:click='x_2'>点这儿</button>
        {{ getdata }}
    </div>
    <!--  注意如果是vscode要安装插件Live Server开启HTTP服务 -->
    <script>
        var vm = new Vue
        (
            {
                el: '#app', 
                data:
                {
                    getdata:'',
                },
                // mounted()
                // {
                //     axios.get('/data.json').then
                //     (
                //         response=>
                //         (
                //             console.log(response.data)
                //             // 注意.data才是数据
                //         )
                //     );
                //     axios.get('/data.json').then(response=>(this.getdata = response.data));
                // },


                // ==================mounted安装(钩子函数)自动调用==================
                mounted: function () 
                {
                    axios.get('/data.json').then(response=>(console.log(response.data)));
                    axios.get('/data.json').then(response=>(this.getdata = response.data));
                },


                // ==================methods方法(七大属性之一) 需要被调用==================
                methods: 
                {
                    x_1:function(){axios.get('/data.json').then(response=>(console.log(response.data)))},
                    x_2:function(){axios.get('/data.json').then(response=>(this.getdata = response.data))},
                }
            }
        );
    </script>
</body>
</html>
{
    "name": "广州ttg",
    "url": "https://weibo.com/u/6383293935",
    "page": "1",
    "address": {
        "street": "Tianhe",
        "city": "Guangzhou",
        "country": "China"
    },
    "links": {
        "name": "武汉es",
        "url": "https://weibo.com/u/6025941641"
    }
}



计算属性computed

计算出来的结果,保存在属性中。内存中运行:虚拟Dom

Vue特有的计算属性:1、计算结果保存在内存中 2、重复调用不变,类似缓存

​ 使用的时候,是调用属性(即cTime2没有括号),而非方法

基础

<!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>
    <!-- view层 -->
    <div id="app">
        <p>cTime1{{ cTime1() }}</p>
        <p>cTime1{{ cTime2 }}</p>
        <!-- <p>cTime1{{ cTime2() }}</p>这样写错误 -->
    </div>


    <!-- 导入Vue.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script>
        var vm = new Vue
            (
                {
                    el: "#app",
                    data:
                    {
                        message: "Hello , FastAPI"
                    },
                    methods:  // 方法
                    {
                        cTime1: function () {
                            return Date.now();
                        }
                    },
                    computed: // 注意方法不与上面methods里面的重名
                    {   
                        cTime2: function () {
                            this.message;     // 当这个值被赋予新值后,Date.now会重新计算
                            return Date.now();
                        }
                    },
                }
            )
    </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">
        <input type="text" v-model="inputing" />
        <ul>
            <li v-for="d in myList">
                {{d}}
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue
            (
                {
                    el: "#app",
                    data:
                    {
                        inputing: "",
                        list: ["Hi", "Ha", "Hab", "Habc", "Habcd"],
                    },
                    computed:  //1、计算结果保存在内存中  2、重复调用不变,类似缓存
                    {
                        myList: function () {
                            //假设在内存中:["Hi","Ha","Hab","Habc","Habcd"]
                            return this.list.filter
                                (
                                    item =>
                                        item.indexOf(this.inputing) > -1
                                )
                            /*filter对数组中的每个元素都执行一次指定的函数(callback),并且创建一个新的数组
                              indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置
                              如果要检索的字符串值没有出现,则该方法返回-1*/
                        }
                    },
                }
            )
    </script>
</body>

</html>



组件component(非单一)

注意事项:1、必须一个根节点(root element),只要与内部标签不冲突。
     2、组件间可通过props进行通讯
     3、组件可以有多个属性,但是data属性的写法必须是方法+返回值

基础

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 这是View  现在就是template模板-->
    <!-- 这里是根组件的templet模板 -->
    <div id="app">
        <abar></abar>
        <!-- <abar></abar>放在根组件的child中,就是根组件的child -->
        <bbar></bbar>
    </div>


    <script>
        // 全局定义(注册)组件
        Vue.component
            (
                'abar',
                {
                    template: `
                    <div style='background:#ccc'>
                        【公共root组件的child组件:abar组件】
                        <button @click='ccc'>确定</button>
                        <child></child>
                        <abar_child></abar_child>
                    </div>`,
                    data()  //注意这里的data写法,不能写属性
                    {
                        return { abarname: "abarname" }
                    },
                    methods:
                    {
                        ccc() {
                            alert('abar');
                        }
                    },
                    // 样式要单文件组件的写法才可实现
                    components: // 局部定义(注册)组件
                    {
                        abar_child:
                        {
                            template: `<div>【abar_child组件,只能在abar组件中使用】</div>`
                        }
                    }
                }
            );

        Vue.component
            (
                'child',
                {
                    template: `<div>【公共child组件】</div>`
                }
            );

        Vue.component
            (
                'bbar',
                {
                    template: `
                        <div>
                            【与abar的同级兄弟组件:bbar组件】
                            <child></child>
                        </div>`
                }
            )

        var vm = new Vue // 这里new实例后,就自动创建root组件(根组件)
            (
                {
                    el: '#app',
                }
            )
    </script>
</body>

</html>

父传子

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 这是View  现在就是template模板-->
    <!-- 这里是根组件的template模板 -->
    <div id="app">
        <bbar thename='主页' :show='false'></bbar>
        <bbar thename='简介' :show='true'></bbar>
        <bbar thename='产品' :show='true'></bbar>
        <br>
        ---------------------------
        <br>
        <bbar :thename='p_name'></bbar>
        <br>

    </div>


    <script>
        Vue.component
            (
                'bbar',
                {
                    template: `
                        <div>
                            >>>
                            <button v-if='show' @click='c'>首页</button>
                            【root的child组件:bbar组件】【{{ thename }}】
                        </div>`,
                    // props: ['thename','show']  // 接受父组件传进来的属性
                    props: // 接受父组件传进来的属性
                    {
                        thename: String,
                        show: Boolean,
                        // show:String, // 这样会有问题
                    },
                    methods: {
                        c() {
                            alert('首页');
                        }
                    },
                }
            )

        var vm = new Vue // 这里new实例后,就自动创建root组件(根组件)
            (
                {
                    el: '#app',
                    data:
                    {
                        p_name: 'root组件的p_name属性'
                        // 即父组件传参给子组件使用bind绑定
                    },
                }
            )
    </script>
</body>

</html>

子传父

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 这是View  现在就是template模板-->
    <!-- 这里是根组件的templet模板 -->
    <div id="app">

        <bbar @b_event='receive($event)'></bbar>
        <br>
        {{ show }}

    </div>


    <script>

        Vue.component
            (
                'bbar',
                {
                    template: `
                        <div>
                            【root的child组件:bbar组件】
                            <button @click='send()'>点这发送给父组件</button>
                        </div>`,
                    methods:
                    {
                        send() {
                            this.$emit('b_event', '你好') // 分发事件
                            // this.$emit('b_event',this.xxxxx) 
                            // // 这里也可以传data的属性
                        }
                    },
                }
            )

        var vm = new Vue // 这里new实例后,就自动创建root组件(根组件)
            (
                {
                    el: '#app',
                    data:
                    {
                        p_name: 'root组件的p_name属性(使用bind绑定)',
                        show: []
                    },
                    methods:
                    {
                        receive(e) { this.show.push(`【父组件收到消息!${e}】`) }
                    },
                }
            )
        // 举例说明子传父的应用
    </script>
</body>

</html>

refs

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 这是View  现在就是template模板-->
    <!-- 这里是根组件的templet模板 -->
    <div id="app">

        <input type="text" ref='input_ref'>
        <button @click='click_a'>点这</button>
        <bbar ref='bbar_ref'></bbar>

    </div>


    <script>
        Vue.component
            (
                'bbar',
                {
                    template: `
                        <div>
                            【root的child组件:bbar组件】
                        </div>`,
                    data() {
                        return { bbar_name: '我叫bbar' }
                    },
                    methods:
                    {
                        f(data) {
                            console.log('这是bbar的方法', data);
                        }

                    },
                }
            )

        var vm = new Vue // 这里new实例后,就自动创建root组件(根组件)
            (
                {
                    el: '#app',
                    data:
                    {

                    },
                    methods:
                    {
                        click_a() {
                            console.log(this.$refs.input_ref.value);
                            console.log(this.$refs.bbar_ref.bbar_name);
                            this.$refs.bbar_ref.f('');
                            this.$refs.bbar_ref.f('父传子消息');
                            // ref放标签上,拿到原生节点
                            // ref放组件上,拿到组件对象
                        }
                    },
                }
            )
    </script>
</body>

</html>

事件总线

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 这是View  现在就是template模板-->
    <!-- 注意:未来学习的状态管理(vuex)可完成本节内容 -->
    <div id="app">
        <bbar></bbar>
        <cbar></cbar>
    </div>


    <script>

        Vue.component
            (
                'bbar',
                {
                    template: `
                    <div>
                        【bbar组件 希望发送给cbar】
                        <input type="text" ref='b_text' />
                        <button @click='send()'>点这发送cbar</button>
                    </div>`,
                    methods: {
                        send() {
                            bus.$emit('c_message', this.$refs.b_text.value)
                        }
                    },
                }
            );
        Vue.component
            (
                'cbar', // 这个负责监听
                {
                    template: `
                    <div>
                        【我是cbar】
                    </div>`,
                    mounted() // 当前组件DOM创建后的钩子函数
                    {
                        bus.$on('c_message', (data) => { console.log('已收到bbar的消息', data); });
                    },
                }

            );

        var bus = new Vue(); // 空Vue实例,即中央事件总线
        var vm = new Vue // 这里new实例后,就自动创建root组件(根组件)
            (
                {
                    el: '#app',
                    data: {},
                }
            )
    </script>
</body>

</html>

动态组件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <keep-alive>
            <component :is="who"></component>
            <!-- 注意这里的切换组件,是直接删掉和创建 -->
            <!-- 如果需要保持home组件的input状态,需要keep-alive包裹 -->
        </keep-alive>
        <ul>
            <li><a @click="who='home'">首页</ a>
            </li>
            <li><a @click="who='news'">新闻</ a>
            </li>
            <li><a @click="who='blog'">博客</ a>
            </li>
        </ul>
    </div>


    <script>
        var vm = new Vue // 这里new实例后,就自动创建root组件(根组件)
            (
                {
                    el: '#app',
                    data: {
                        who: 'home'
                    },
                    components: {
                        "home": {
                            template:
                                `<div>
                            home
                            <input type="text">
                        </div>`
                        },
                        "news": {
                            template: `<div>news</div>`
                        },
                        "blog": {
                            template: `<div>blog</div>`
                        },
                    }
                }
            )
    </script>
</body>

</html>



插槽

有名插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app"> 
        <child>
            <div slot="no.1">【我正插在no.1的slot插槽里 ^_^】</div>
            <div slot="no.2">【我正插在no.2的slot插槽里 ^_^】</div>
        </child>

        <swiper>
            <li v-for="data in datalist">
                {{ data }}
            </li>
        </swiper>
    </div>


    <script>
        Vue.component
        (
            "child",
            {
                template:`
                    <div>
                        <slot name="no.1"></slot>
                        【我上面的内容是插槽内容 0_0】
                        <slot name="no.2"></slot>
                    </div>`
            }
        );
        Vue.component
        (
            "swiper",
            {
                template:`
                    <div>
                        <ul>
                            <slot></slot>
                        </ul>
                    </div>`
            }
        );

        var vm = new Vue // 这里new实例后,就自动创建root组件(根组件)
        (
            {
                el: '#app', 
                data:
                {
                    datalist:['123', '456', '789',]
                },
            }
        )

    </script>
</body>
</html>

嵌套、传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <!-- view层 -->
    <div id="app">
        <todo>
            <todo-title slot="todo-title" :title_e="title"></todo-title>
            <todo-items slot="todo-items" v-for="item in todoItems" :item_m="item"></todo-items>
            <!-- 这里的slot是固定的,title_e是自定义,item_m是自定义 -->
        </todo>
    </div>
    
    
    <script>
        Vue.component( 
            'todo',
            {
                template:"<div>\
                                <slot name='todo-title'></slot>\
                                <ul>\
                                    <slot name='todo-items'></slot>\
                                </ul>\
                          </div>"
            }
        );
        Vue.component(
            'todo-title',{
                props: ['title_e'],
                template: '<div>{{ title_e }}</div>'
            }
        );
        Vue.component(
            'todo-items',{
                props: ['item_m'],
                template: '<li>{{ item_m }}</li>'
            }
        );


        var vm = new Vue // root组件
        (
            {
                el: "#app",
                data: 
                {
                    title: '我是title,啊哈哈哈哈',
                    todoItems: ['你好', '您好', 'Hello']
                },
            }
        )
    </script>
</body>
</html>

应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app"> 
        <abar>
            <button @click="isShow=!isShow">ShowButton</button>
            <!-- 这样写可以访问到父组件的作用域,即可以访问isShow -->
        </abar>
        <bbar v-show="isShow"></bbar>
    </div>


    <script>
        Vue.component
        (
            "abar",
            {
                template:`
                    <div>
                        abar
                        <slot></slot>
                    </div>`
            }
        );
        Vue.component
        (
            "bbar",
            {
                template:`
                    <div style="background:yellow;width:200px;">
                        <ul>
                            <li>123</li>
                            <li>456</li>
                            <li>789</li>
                        </ul>
                    </div>`
            }
        );

        var vm = new Vue // 这里new实例后,就自动创建root组件(根组件)
        (
            {
                el: '#app', 
                data:
                {
                    isShow:false
                },
            }
        )

    </script>
</body>
</html>
posted @ 2022-11-07 22:46  旅行的七仔  阅读(33)  评论(0)    收藏  举报