前言

今天刚开始学习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
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区