(vue学习）记录1

vue只关心视图层html+css+js视图层是双向数据绑定，视图发生变化时，数据也会发生变化。网络通信axios页面跳转 vue-route状态管理 vuex大大减少DOM操作1.基本语法v-开头为指令v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。<!DOCTYPE html><html><h

mcl19909949541

160人浏览 · 2021-09-22 22:40:32

mcl19909949541 · 2021-09-22 22:40:32 发布

vue只关心视图层
html+css+js视图层
是双向数据绑定，视图发生变化时，数据也会发生变化。

网络通信 axios
页面跳转 vue-route
状态管理 vuex

大大减少DOM操作

1.基本语法

v-开头为指令
v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
v-bind即把vm中的data与标签中的值绑定（如id，class等）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>

</head>
<body>
<!--view层-->
<div id="app" class="demo">
    <span v-bind:title="message">hello</span>

</div>


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

    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello vue"
        }

    })

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

判断

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>

</head>
<body>
<!--view层-->
<div id="app" class="demo">
    <h1 v-if="ok">yes</h1>
    <h1 v-else> NO</h1>
</div>


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

    var vm = new Vue({
        el:"#app",
        data:{
           items:[
               {message:1},
               {message:2}
           ]
        }

    })

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

循环

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>

</head>
<body>
<!--view层-->
<div id="app" class="demo">
    <h1 v-for="irem in items">
        {{irem.message}}
    </h1>
</div>


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

    var vm = new Vue({
        el:"#app",
        data:{
           items:[
               {message:1},
               {message:2}
           ]
        }

    })

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

函数事件绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>

</head>
<body>
<!--view层-->
<div id="app" class="demo">
 <button v-on:click="sayHi">adas</button>
</div>


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

    var vm = new Vue({
        el:"#app",
        data:{
           items:[
               {message:1},
               {message:2}

           ],
            methods:{
               sayHi:function () {
                   alert(this.items);
               }
            }

        }

    })

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

动态绑定 v-model
将传入的值传入v-model的message中，v-model的message再传入进vm的message中，再通过vm传到{{message}}中

<body>
<!--view层-->
<div id="app" class="demo">
    <input type="text" v-model="message">{{message}}
</div>


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

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




    })

</script>
</body>

双选框

<body>
<!--view层-->
<div id="app" class="demo">
    <input type="radio" name="sex" value="man"v-model="checked" >man
    <input type="radio" name="sex" value="woman" v-model="checked">woman
    <p>
        {{checked}}
    </p>
</div>


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

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

    })

</script>
</body>

vue组件

组件component即为自定义标签，其中的props即为id，class等变量，这里用v-for将vm中的data里面的items取出，用item保存，再用v-bind把item的值与qin这个自定义变量绑定，即可通过qin将内容传入自定义组件中。
数据传输顺序为 vm-component-component内部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>

</head>
<body>
<!--view层-->
<div id="app" class="demo">
   <mcl v-for="item in items" v-bind:qin="item"></mcl>


</div>


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

    Vue.component("mcl",{
        props:['qin'],
        template:'<li>{{qin}}</li>'
    });

    var vm = new Vue({
        el:"#app",
        data:{
            message:null,
            checked:'',
            items:['as','asd','adsdas']
          },

    })

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

在这里插入图片描述

Axios异步通信

用钩子函数axios获取信息，用data（）方法存到vm里面用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>

</head>
<body>
<!--view层-->
<div id="app" class="demo">
    <div>
        {{info.address.xxx}}
        {{info.name}}
    </div>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.4/axios.min.js" integrity="sha512-lTLt+W7MrmDfKam+r3D2LURu0F47a3QaW5nF0c6Hl0JDZ57ruei+ovbg7BrZ+0bjVJ5YgzsAWE+RreERbpPE1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>



    var vm = new Vue({
        el:"#app",

            data() {
                return {
                    info:{
                        name:null,
                        address:{
                            xxx:null,
                            yyy:null
                        }
                    }

                }
            },

        mounted(){//钩子函数
            axios.get("").then(response=>(this.info=response.data));//往其中传入json
        }

    })

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