前言

今天刚开始学习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的引入与简单使用，下期会分享更多的内容。

# html5 # vue.js # 前端 # html # javascript
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue