HTML5引入VUE

摘要：会介绍HTML5引入vue以及快速入门vue

qq_58024411

2826人浏览 · 2023-08-07 23:19:01

qq_58024411 · 2023-08-07 23:19:01 发布

前言

今天刚开始学习vue，分享一下html5当中引入vue的一种方法

一、Vue是什么？

Vue是一个用于构建用户界面的开源JavaScript框架。它采用了组件化的开发方式，使得开发者可以通过封装可重用的组件来构建复杂的应用程序。Vue具有简单易学、灵活高效的特点，并且与其他库和现有的项目很好地整合在一起。它也被广泛用于单页面应用程序（SPA）的开发。Vue提供了响应式的数据绑定、组件化的开发方式、简洁明了的模板语法、强大的路由和状态管理等功能，使得开发者能够更快速、高效地开发出高质量的应用程序。

二、快速入门

1.Hello VUE!

1.1.首先准备一个html5页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello VUE</title>
</head>
<body>

</body>
</html>

1.2.引入vue

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

1.3. 使用vue

创建一个vue对象 v ，这里 el: 后面跟的是标签（我觉得这里类似于标签选择器），data是存放数据的地方，这里的数据html是可以通过{{}}直接拿到的。

<script>
  let v = new Vue({
    el:"body>div",
    data:{
      info:"Hello Vue!"
    }
  })
</script>

1.4 . 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello VUE</title>

</head>
<body>
<div>
  {{info}}
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
  let v = new Vue({
    el:"body>div",
    data:{
      info:"Hello Vue!"
    }
  })
</script>
</body>
</html>

1.5.运行结果

2.属性绑定（单向绑定）

在js本身不变的基础上 <input type="text" :value="info">加上一个“:”,可实现由html到data数据的单向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    {{info}}
    <input type="text" :value="info">
    <a :href="url">超链接</a>
    <img :src="imgUrl" width="100">
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            info: "属性绑定",
            url:"http://www.baidu.com",
            imgUrl:"../yuansheng.jpg"
        }
    })
</script>
</html>

3.属性绑定（双向）

双向绑定，只需要通过 v-model="info" 即可实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div>{{info}}</div>
<!--v-model="info"双向绑定-->
<input type="text" v-model="info">
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            info: "双向绑定"
        }
    })
</script>
</html>

4.事件绑定

在button里面加上 @click="f()" 表示绑定了vue 里面的f( )方法（就是点击事件）

在vue中方法要放到 methods:{ } 里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <div>{{info}}</div>
    <input type="button" value="按钮" @click="f()">
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            info: "事件绑定"
        },
        methods:{
            f(){
                alert("按钮点击了！")
            }
        }
    })
</script>
</html>

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了html5当中vue的引入与简单使用，下期会分享更多的内容。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^