vueday_01

最新推荐文章于 2024-03-21 19:18:57 发布

打工人在路上

最新推荐文章于 2024-03-21 19:18:57 发布

阅读量77

点赞数 1

本文链接：https://blog.csdn.net/Njhbsj/article/details/108742560

版权

vue的简单使用

vue狂神笔记

1.v-model的使用

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--view 模板-->
<div id="app">
    <h1>{{message}}</h1>
<!--
    <h1 v-if="ok===false">
        OOOOOO
    </h1>
    <h1 v-else="ok===true">
      okok
    </h1>-->

<!--    <li v-for="(item ,index) in messages">
        {{item.message}}-&#45;&#45;{{index}}
    </li>-->


<!--
    <button v-on:click="sayHi">尼玛</button>-->

    <!--双向判定  v-model屏闭了checked，value-->
输入的文本<input type="text" v-model="peopleSex">{{peopleSex}}
    <br>
<!--v-model绑定的是value属性的值-->
    <input type="radio" name="sex" value="男" v-model="peopleSex">男
    <input type="radio" name="sex" value="女" v-model="peopleSex">女
    <p> 选中了{{peopleSex}}</p>


</div>



<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model:数据
        data:{
            peopleSex:"",
            message:"华哥哥"
        },
        methods:{
            sayHi:function () {
                alert(this.message)
            }
        }
    });
</script>
</body>
</html>

2.component的例子

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<!--view 模板-->
<div id="app">
<!--
     item是items遍历出来的每一个属性
    ：message是绑定的数据名称
    "item"是被绑定的数据

-->
    <biaoqian v-for="item in items" v-bind:message="item">

    </biaoqian>
</div>


<script type="text/javascript" src="https://unpkg.com/vue"></script>

<script>
    //定义一个组件
    Vue.component("biaoqian",{
        /*props是接受的数据，要使用数组接受并且用''引起来   */
        props:['message'],
        template:'<h1>{{message}}</h1>'
    });

    var vm=new Vue({
        el:"#app",
        //Model:数据
        data:{
            items:["java","php","c++"]
        }
    });
</script>
</body>
</html>

3.mounted的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <div>{{info.name}}</div>
</div>

<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#vue",
        /*data是一个属性  data()是方法*/
        data(){
            return{
                //必须和json字符一样
                info:{
                    name:null,
                    adddress:{
                        street:null,
                        city:null,
                        country:null

                    }

                }

            }
        },
        //mounted是用于ajax的请求在页面加载的时候发起请求
        mounted(){
            axios.get('data.json').then(response=>(this.info=response.data))

    }
    });
</script>
</body>
</html>