广告位联系
返回顶部
分享到

HTML页面中使用Vue示例进阶(快速学会上手Vue)

JavaScript 来源:互联网 作者:秩名 发布时间:2023-02-12 19:10:32 人浏览
摘要

Vue是用于构建用户界面的渐进式JavaScript框架。特色:构建用户界面数据变成界面;渐进式Vue可以自底向上逐层的应用。 Vue有两种使用方式,一种实在html中直接使用Vue做开发,一种是企

Vue是用于构建用户界面的渐进式JavaScript框架。特色:构建用户界面—数据变成界面;渐进式—Vue可以自底向上逐层的应用。

Vue有两种使用方式,一种实在html中直接使用Vue做开发,一种是企业级的单页面应用。后者是主流的使用方式,真正项目中很少使用前一种方式。前一种方式通过在大家熟悉的HTML环境中使用Vue,大家很容易去了解和熟悉VUE。

一、Vue框架的两种使用方式

1、单页面应用:使用Vue CLI工具生成脚手架,这是最常见的使用方式

2、传统多页面应用:通过script引入Vue.js

二、HTML页面中简单使用Vue

首先在head中引入vue的文件

然后在body中写上一个带有id的div

首先创建一个new Vue对象 , 一个中括号 , 然后创建一个{} , 中间书写一个el : #id 选中这个div , 然后书写数据展示区域data:{ } 括号中定义数据变量 , 以及变量的值

{{变量名称}}用来在页面上展示数据

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

   <head>

      <meta charset="utf-8" />

      <title>快速入门</title>

      <script src="js/vuejs-2.5.16.js"></script>

   </head>

   <body>

      <div id="app">

         {{shuju}}

         {{NUMBER*10}}

         {{falese?"ok":"no"}}

      </div>

   </body>

   <script>

      new Vue(

            {

               el:"#app",

               data:{

                  shuju:"hello 陈小姐",

                  NUMBER: 10,

               }

            }

      ); 

   </script>

</html>

三、点击事件示例

首先定义一个button按钮 , v-on: click=“func”

定义一个methods :{ } 和data是一个级别的 , 然后你刚才定义的方法名:function(){ }

然后在方法体中 , 写出你要执行的语句

另外上面的func(‘哈哈哈’) 这个哈哈哈就是方法的一个参数 ,

然后function(msg ){} msg与上文中的哈哈哈对应 , 然后我们把msg赋值给messge , 所以message就显示为哈哈哈了

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<body>

        <div id="app">

            {{message}}

            <button v-on:click="func('哈哈哈哈')" id="mybotton">vue的onclick</button>

        </div>

    </body>

    <script>

        new Vue({

            el:"#app",

            data:{

                message:"hello"

            },

            methods:{

                func:function (msg) {

                    alert("陈小姐 , 你愿意做我女朋友吗?")

                    this.message=msg;

                }

            }

        });

    </script>

四、键盘事件示例

和上面的点击事件一样 ,只不过是把click 换成了keydown

另外$event 与下文中的event是一个对象 , 也就是与我们传统JS中的event中的对象是一样的

然后我们定义一个变量 , 也就是代表每一个按键的Unicode编码 , 然后我们可以不让键盘起作用 , 使用event.preventDefault() 这样就可以阻止键盘起作用 ;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<body>

        <div id="app">

            <input type="text" v-on:keydown="fun($event)">

        </div>

    </body>

    <script>

        new Vue({

            el:"#app",

            data:{

                meg:"这是一段无敌的代码"

            },

            methods:{

                fun:function (event) {

                    /*event是vue事件对象 和我们传统JS中的event对象是一样的*/

                    var keyCode = event.keyCode;

                    if (keyCode<48||keyCode>57){

                        //不让键盘的按键起作用

                        event.preventDefault();

                    }

                    alert("我就是喜欢你");

                }

            }

 

        });

    </script>

五、鼠标移动事件示例

定义事件的操作和上面的操作没有什么区别 , 只是换成了mouseover , 另外一个就是 ,v-on: 可以换成@, 两者之间是等价的

然后还有一个阻止事件传播 , 及时这个文件域是定义在div中的 , 所以移动到文件域就相当于移动到了div中 ,所以我们需要在文件域的函数中阻止事件传播

 event.stopPropagation();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<body>

   <div id="app">

      <div v-on:mouseover="fun1" id="div">

         <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>

      </div>

   </div>

</body>

<script>

   new Vue({

      el:"#app",

      methods:{

         fun1:function () {

         alert("这是一个div区域");

         },

         fun2:function (event) {

         alert("这是一个文件域");

         event.stopPropagation();

         }

      }

   });

</script>

六、事件修饰符示例

这个就是在提交表单的时候 , 会触发一个函数 , 因为后边加了prevent 所以也就是阻止提交 ,

然后我们在创建一个Vue对象 , 这样我们就可以对这个表单进行控制了

1

2

3

4

5

6

7

8

9

10

11

12

13

<body>

   <div id="app">

      <form @submit.prevent action="http://www.itheima.com" method="get">

         <input type="submit" value="点点我进行提交">

      </form>

   </div>

</body>

 

<script>

   new Vue({

      el:"#app"

   });

</script>

七、V-text和V-html示例

两者之间的区别就是V-text不会去解析等各种HTML标签 , 而V-html则会去解析这些东西

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<body>

   <div id="app">

      <div v-text="message"></div>

      <div v-html="message"></div>

   </div>

</body>

<script>

   new Vue({

      el:"#app",

      data:{

         message:"<h1>陈小姐 , 做我女朋友吧 !<h1>"

      }

   });

</script>

八、V-bind示例

插值表达式不能作用于HTML标签的属性取值 ,要想给HTML属性设置变量的值 , 需要使用V-bind

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<body>

   <div id="app">

      <font v-bind:color="c1">我是一个小逗比</font>

      <hr>

      <font v-bind:color="c2">我是一个大逗逼</font>

   </div>

</body>

<script>

   new Vue({

      el:"#app",

      data:{

         c1:"green",

         c2:"blue"

      }

   });

</script>

九、V-for示例

首先在vue中定义一个数组让我用来遍历 , 然后使用v-for即可 , v-for=" ", " "中写上一个变量并且在哪个数组中

1

2

3

4

5

6

7

8

9

10

11

12

13

<body>

   <div id="app">

      <li v-for="(item) in arr">{{item}}</li>

   </div>

</body>

<script>

   new Vue({

      el:"#app",

      data:{

         arr:['陈','小','姐','我','喜','欢','你'],

      }

   });

</script>

遍历集合

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<body>

   <div id="app">

      <li v-for="(k,v) in stu">{{v}}={{k}}</li>

   </div>

</body>

<script>

   new Vue({

      el:"#app",

      data:{

         stu:{

            id:1,

            name:"张三丰",

            age:"100",

            height:"173"

         }

      }

   });

</script>

遍历对象数组

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<body>

   <div id="app">

      <table border="1px">

         <tr>

            <td>ID</td>

            <td>name</td>

            <td>age</td>

         </tr>

         <tr v-for="(stu,index) in stus">

            <td>{{stu.id}}</td>

            <td>{{stu.name}}</td>

            <td>{{stu.age}}</td>

         </tr>

      </table>

 

   </div>

</body>

<script>

   new Vue({

      el:"#app",

      data:{

         stus:[

            {id:1, name:"张三丰", age:"100"},

            {id:2, name:"科比", age:"40"},

            {id:3, name:"张帅", age:"25"}

         ]

      }

   });

</script>

十、遍历对象数组示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<body>

   <div id="app">

      <table border="1px">

         <tr>

            <td>ID</td>

            <td>name</td>

            <td>age</td>

         </tr>

         <tr v-for="(stu,index) in stus">

            <td>{{stu.id}}</td>

            <td>{{stu.name}}</td>

            <td>{{stu.age}}</td>

         </tr>

      </table>

 

   </div>

</body>

<script>

   new Vue({

      el:"#app",

      data:{

         stus:[

            {id:1, name:"张三丰", age:"100"},

            {id:2, name:"科比", age:"40"},

            {id:3, name:"张帅", age:"25"}

         ]

      }

   });

</script>

十一、V-model示例

v-model就是可以取出一些对象格式的数据 , 利用对象名 .属性名 即可取出这些东西

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<body>

   <div id="app">

      <form action="#" method="post">

         <input type="text" v-model="user.username">

         <br>

         <input type="password" v-model="user.password">

      </form>

   </div>

</body>

<script>

   new Vue({

      el:"#app",

      data:{

         user:{

            username:"张无忌",

            password:"1234"

         }

      }

   });

</script>

十二、v-show和v-if示例

show和if其实没有太大区别 ,可以用来控制是否显示内容 ,true就显示 ,false就不显示

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<body>

   <div id="app">

      <span v-if="show">你好啊</span>

      <hr>

      <span v-show="show">今天天气不错</span>

   </div>

</body>

<script>

new Vue({

   el:"#app",

   data:{

      show:true

   }

});

</script>


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • Three.js Interpolant实现动画插值的介绍

    Three.js Interpolant实现动画插值的介绍
    这个类主要是用来实现插值,常用于动画。 可以把这个类理解为是一个数学函数,给定一个自变量,要返回对应的函数值。只是,在我们定
  • HTML页面中使用Vue示例进阶(快速学会上手Vue)
    Vue是用于构建用户界面的渐进式JavaScript框架。特色:构建用户界面数据变成界面;渐进式Vue可以自底向上逐层的应用。 Vue有两种使用方式,
  • umi插件开发仿dumi项目自动生成导航栏实现
    前面我们已经完成了页面布局和页面路由,现在我们的导航栏还是自己写死在代码中,现在我们来改造成自动根据页面路由来生成导航栏。
  • umi插件开发仿dumi项目实现页面布局

    umi插件开发仿dumi项目实现页面布局
    上一章我们已经完成/docs目录下文件自动生路由功能,本章我们将在此基础上,实现自动生成页面导航的功能。 使用默认模板提供的layout展
  • umi插件开发仿dumi项目实现基础路由解析

    umi插件开发仿dumi项目实现基础路由解析
    umi默认约定在/src/pages添加的(j|t)sx?文件会自动加载为路由。同样我们希望实现在某个目录下添加的markdown文件自动加载成为路由直接访问,本
  • js实现兔年转圈圈动画的代码

    js实现兔年转圈圈动画的代码
    兔年到了,兔年大吉祥,为了庆祝这份喜庆的兔年,今天我们设计一个兔子转圈圈的动画模拟吧。希望大家可以得到我的祝福和好运哦。。
  • Angular8升级至Angular13遇到的问题解决

    Angular8升级至Angular13遇到的问题解决
    根据项目需求,需要把Angular版本从8升级到13,无法从8直接升至13,需要一级一级的升级,本文介绍了在升级Angular版本的时候的一种报错和解
  • Vue3跨域解决方案实例介绍
    vue项目配置代理 vue.config.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const { defineConfig } = require(@vue/cli-service) module.exports = defineConfig({ transpileDependencies:
  • Node.js参数max-old-space-size的介绍
    前言 Old space是 V8 托管(也称为垃圾收集)堆(即 JavaScript 对象所在的位置)中最大和最可配置的部分,而--max-old-space-size标志控制其最大大
  • 用js实现一个网页版节拍器

    用js实现一个网页版节拍器
    平时练尤克里里经常用到节拍器,突发奇想自己用js开发一个。 最后实现的效果如下:ahao430.github.io/metronome/。 代码见github仓库:github.com/
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计