强哥分布式项目day03(vue入门)

其他 2020-04-24 13:04:22 阅读次数: 0 
1.单击事件绑定@click

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

<div id="root">
    <h1>{{message}}</h1>
    <button v-on:click="onClick()">点我</button>
    <button @click="onClick()">点我</button>
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            message: "hello vue"
        },
        methods: {
            onClick:function () {
                alert("hello");
            }
        }
    })
</script>
</body>
</html>

2.键盘事件@keydown

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

<div id="root">
    <input type="text" @keydown="onKeydown($event)">
    <br>
    keycode:{{keyCode}}

</div>


<script>
    new Vue({
        el:"#root",
        data:{
            keyCode:0,
        },
        methods:{
            onKeydown:function (event) {
                var keyCode = event.keyCode;
                this.keyCode = keyCode;
                if (keyCode == 13) {
                    alert("你按下了回车键！");
                }
            }
        }
    });
</script>
</body>
</html>

3.鼠标事件 @mousemove

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <style>
        #testdiv{
            margin-left: 100px;
            height: 200px;
            width: 200px;
            background-color: red;
        }
    </style>


</head>
<body>

<div id="root">
    <div id="testdiv"  @mousemove="seMove($event)">
        X:{{X}},Y:{{Y}}
    </div>
</div>


<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            X:0,
            Y:0
        },
        methods:{
            seMove:function (event) {
                //取鼠标位置
                this.X = event.x;
                this.Y = event.y;
            }
        }
    });
</script>
</body>
</html>

4.阻止默认事件

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

<div id="root">
    <a href="http://www.baidu.com" @click.prevent="onclick()">点击</a>
</div>


<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{

        },
        methods:{
           onclick: function () {
               alert("hello");
           }
        }
    });
</script>
</body>
</html>

5.阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <style>
        #testdiv{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>

</head>
<body>

<div id="root"> <!--只有在根节点当中的内容才能被 vue解析-->

    <div id="testdiv" @click="divClick()">
        <a href="http://www.baidu.com" @click.prevent.stop="myclick($event)">点击</a>
    </div>



</div>


</body>
<script>

    new Vue({
        //初始化vue根节点
        el:"#root",
        //定义页面模型数据 js变量
        data:{

        },
        methods:{
            myclick:function (event) {
                alert("a点击");
                //传统方式
                //event.stopPropagation();
            },
            divClick:function () {
                alert("div点击")
            }
        }
    });

</script>
</html>

6.数据绑定（重点区别双向绑定和单向绑定）

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


</head>
<body>

<div id="root"> <!--只有在根节点当中的内容才能被 vue解析-->

    {{num}} <br>
    {{num + 1}} <br>
    {{'abc'+'d'}} <br>
    {{3 > 2 ?true : false }}
    {{user.name}} <br>
    {{user.age}}

    <hr>
    <div>{{user.name}}</div>
    <div v-text="user.name"></div>

    <div v-html="user.name"></div><!-- v-html 会解析标签  -->
    <hr>
    <div>{{content}}</div>
    <div v-text="content"></div>
    <div v-html="content"></div>
    <hr>
    <input type="text" v-model="num"> <!--双向绑定-->
    <hr>
    <input type="text" v-bind:value="num"><!--单向绑定-->



</div>


</body>
<script>

    new Vue({
        el:"#root",
        data:{
            num:100,
            user:{
                name:'fmjava',
                age:10
            },
            content:"<h1>大标题</h1>"
        },
        methods:{
        }
    });

</script>
</html>

7.集合数据绑定

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


</head>
<body>

<div id="root"> <!--只有在根节点当中的内容才能被 vue解析-->

    <!--  遍历数组  -->
    <p v-for="item in list">{{item}}</p>
    <!--  遍历数组的时候拿到索引值  -->
    <p v-for="(item,index) in list">{{item}}--{{index}}</p>

    <hr>
    <!--    遍历对象-->
    <p v-for="item in listObj">{{item.id}}</p>
    <!--    遍历对象时候遍历索引-->
    <p v-for="(item,index) in listObj">{{item}}--{{index}}</p>
<!--    遍历对象的时候遍历key value index-->
    <p v-for="(value,key,index) in obj">{{value}}--{{key}}--{{index}}</p>

</div>


</body>
<script>

    new Vue({
        el:"#root",
        data:{
         list: ["name","hello",34],
            listObj: [
                {id:1,name:"zzk"},
                {id:2,name:"zzz"},
                {id:3,name:"zza"}
            ],
            obj:{id:1,name:'zs',age:10}
        },
        methods:{

        }
    });

</script>
</html>

8.vue的生命周期-1

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


</head>
<body>

<div id="root"> <!--只有在根节点当中的内容才能被 vue解析-->

    {{name}}

</div>


</body>
<script>

    new Vue({
        el:"#root",
        data:{
            name: "fmjava"

        },
        methods:{

        },
        beforeCreate:function () {
            console.log("当Vue对象创建之前会调用");
            console.log(this.$el);  /*undefined*/
            console.log(this.$data); /*undefined*/
            console.log(this.name); /*undefined*/
        },
        created:function () {
            console.log("当Vue对象创建之后会调用");
            console.log(this.$el); /*undefined*/
            console.log(this.$data);/*拿到data数据*/
            console.log(this.name);/*拿到name*/
        },
        beforeMount:function () {/*这个方法和下面的方法的区别是
                                 拿到节点的时候这个是没有解析{{name}}*/
            console.log("当数据绑定到页面之前调用");
            console.log(this.$el);
            console.log(this.$data);
            console.log(this.name);
        },
        mounted: function () {/*这个方法和上面的方法的区别是
                                拿到节点的时候这个是有解析{{name}}*/
            console.log("当数据绑定到页面之后调用");
            console.log(this.$el);
            console.log(this.$data);
            console.log(this.name);
        }
    });

</script>
</html>

9.vue生命周期-2

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


</head>
<body>

<div id="root"> <!--只有在根节点当中的内容才能被 vue解析-->

    {{name}}
    <button @click="changeData()">更新页面</button>

    <button @click="destroy()">销毁</button>
</div>


</body>
<script>

   var vm = new Vue({
        el:"#root",
        data:{
            name: "fmjava"

        },
        methods:{
            changeData:function () {
                this.name="new nue"
            },
            destroy:function () {
                vm.$destroy();
            }
        },
        beforeCreate:function () {
            console.log("当Vue对象创建之前会调用");
            console.log(this.$el);  /*undefined*/
            console.log(this.$data); /*undefined*/
            console.log(this.name); /*undefined*/
        },
        created:function () {
            console.log("当Vue对象创建之后会调用");
            console.log(this.$el); /*undefined*/
            console.log(this.$data);/*拿到data数据*/
            console.log(this.name);/*拿到name*/
        },
        beforeMount:function () {/*这个方法和下面的方法的区别是
                                 拿到节点的时候这个是没有解析{{name}}*/
            console.log("当数据绑定到页面之前调用");
            console.log(this.$el);
            console.log(this.$data);
            console.log(this.name);
        },
        mounted: function () {/*这个方法和上面的方法的区别是
                                拿到节点的时候这个是有解析{{name}}*/
            console.log("当数据绑定到页面之后调用");
            console.log(this.$el);
            console.log(this.$data);
            console.log(this.name);
        },
        beforeUpdate:function () {
            console.log("当界面发生改变之前来调用");
            /*要注意的是：这里更新的是页面，如何更新的是数据，
            但是数据并没有在页面里面的话也不会调用这个方法*/
        },
        updated:function () {
            console.log("当界面发生改变之后来调用");
        },
        beforeDestroy:function () {
            console.log("当Vue对象销毁之前调用");
        },
        destroyed:function () {
            console.log("当Vue对象销毁之后调用")
        }
    });

</script>
</html>
�£TEARs
发布了18 篇原创文章 · 获赞 0 · 访问量 251
私信 关注

猜你喜欢

转载自blog.csdn.net/JULIAN__/article/details/105568313
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022