HTML5引入VUE

---

前言

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

一、Vue是什么？

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

二、快速入门

1.Hello VUE!

   1.1.首先准备一个html5页面

   1.2.引入vue

   1.3. 使用vue

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

   1.4 . 示例

    
    




  {{info}}

1.5.运行结果

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

在js本身不变的基础上 加上一个“:”,可实现由html到data数据的单向绑定。

    
    



    {{info}}
    
    超链接
    

3.属性绑定（双向）

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

    
    



{{info}}

4.事件绑定

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

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

    
    



    
{{info}}
    

---

总结

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