Vue中常用知识点demo 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>Vue学习</title>
    <!--引入vue.js-->
    <script src="vue.js"></script>
    <!--axios.js-->
    <script src="axios.min.js"></script>
</head>

<body>
    <!--挂载点，表示vue的作用域-->
    <div id="root">
        <!--通过指令显示内容-->
        <h1 v-text="text"></h1><br>

        <!--根据实例中的data数据显示内容-->
        <h2>{{msg}}</h2><br>

        <!--v-on:指令，简写@-->
        <div v-on:click="alert()">点我试试</div><br>

        <!--属性绑定 v-bind:指令，简写 -->
        <div v-bind:title="title">这是验证属性双向绑定</div><br>

        <!--数据双向绑定：v-model指令-->
        <input v-model="content" style="width: 30%;"/><!--双向绑定指令v-model，输入框值改变，content的数据也会变化-->
        <div>{{content}}</div><br>

        <!--侦听器，监听数据发生变化-->
        <div>
            姓：<input v-model="xing" />
            名：<input v-model="ming" />
            计数：{{count}}
        </div><br>

        <!--初始化页面数据-->
        <div>
            原数据：<input v-model="oldVlue" />
        </div><br>

        <!--v-if指令，为真显示，为假隐藏-->
        <button @click="handleClick()">点击切换</button>
        <div v-if="show">这是验证v-if指令</div>
        <div v-show="show">这是验证v-show指令</div><br>

        <!--v-for指令，循环操作-->
        <div>
            v-for指令：
            <ul v-for="item of list"> <!--或者 item in list-->
                <li>{{item}}</li>
            </ul>
        </div>

        <!--vue的ajax练习-->
        <div>
            <input type="text" :name="users.getname" v-model="users.getname" placeholder="姓名">
            <input type="text" :age="users.getage" v-model="users.getage" placeholder="年龄">
            <button @click="sendGetajax">发送get请求</button>
        </div><br>

        <div>
            <input type="text" :name="users.postname" v-model="users.postname" placeholder="姓名">
            <input type="text" :age="users.postage" v-model="users.postage" placeholder="年龄">
            <button @click="sendPostajax">发送post请求</button>
        </div><br>
    </div>
</body>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        //模板template，挂载点里边的内容
        template: '',  //一般不这么写，直接放在页面中
        data: {        //vue实例中的所有数据
            msg: '大家好，vue大法好',
            text: '这是h1内容',
            title: '这是div的title属性里的内容',  //用的比较少
            content: '这是数据单项绑定显示的文本值',
            xing: '',
            ming: '',
            count: 0,
            show: true,
            list: [
                '联想', '百度', '腾讯', '阿里'
            ],
            oldVlue: '',

            //ajax测试数据
            users: {
                getname: '',
                getage: '',
                postname: '',
                postage: '',
            }
        },
        mounted () {
            this.oldVlue = '初始化页面数据'; //页面初始化完成后执行的操作，一般编辑时使
        },
        methods: {     //事件写在这里边
            alert: function(){
                alert('试试就试试');
            },
            //v-if,v-show进行验证
            handleClick: function(){
                this.show = !this.show;
            },
            //get提交
            sendGetajax: function () {
                //2.get通过params选项
                axios.get(`http://www.baidu.com`,{
                    params:{
                        name:this.users.getname,
                        age:this.users.getname
                    }
                }).then(function (response) {
                    console.log(response.data);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            //post请求
            sendPostajax: function(){
                console.log(this.users.postage);
                axios.post('/post.php', {
                    pname: this.users.postname,
                    page: this.users.postage
                })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
        },
        //侦听器watch
        watch: {
            xing: function(){
                this.count++;
            },
            //这种可以带参数，得到新老数据
            ming: function(aa, bb){
                console.log(aa);
                console.log(bb);
                this.count++;
            },
        },

    });
</script>
</html>
posted @ 2019-07-17 13:05  alisleepy  阅读(324)  评论(0)  编辑  收藏  举报