怎样使用vue.js

vue.js的特点就是双向数据绑定以及它的mvvm（model-view-viewmodel）思想，今天咪咪我就来分享一下vue.js的使用方法。

操作方法

  • 01

    打开Hbuilder，新建一个web项目，然后把vue.js插件放入自己指定的文件夹。

  • 02

    之后，在html界面中引入vue.js插件。

  • 03

    然后，定义一个div，把这个div作为vue.js的范围。div可以展示内容，所以可以理解为视图（view）层面。

  • 04

    然后定义一个对象model，model里面包含有属性ms。对象名和属性名可以自定义。因为待会我们可以一直使用这个对象，所以这个对象可以理解成模型（model）。

  • 05

    接着我们创建一个Vue实例，通过Vue(),我们就可以把之前的视图，模型连接起来，所以可以把Vue实例看做是一个viewmodel。在Vue实例中用到了两个属性el和data，后面的参数表示的视图和模型，这里我就连接到div视图和model模型，也就达到了双向绑定。

  • 06

    接着看看双向绑定的效果。如图，在div里面书写表达式{{ms}}，然后保存。

  • 07

    这时候浏览器就会把表达式解析成对应的数据。因为我们在model中定义了ms属性，并且视图和模型连接成功，所以可以解析出结果。

  • 08

    当然，也可以用v-html指令来把属性绑定到标签。

  • 09

    这样，浏览器也可以把它解析成对应的数据喔。并且此时可以看到我在多个地方用到了ms。

  • 10

    而如果我们修改了model里面的ms的值，然后保存。

  • 11

    这时候，所有的ms的值就会自动更新哟，这时候双向数据绑定的效果就体现出来了。

赞 (0)

相关推荐

  • Windows怎么下载vue.js

    vue.js是一个构建数据驱动的 web 界面的渐进式框架,它是通过javascript脚本语言编写的,功能强大,易于上手.但却有不少朋友不知道如何下载vue.js,那么下面小编就给大家介绍一下 Wi ...

  • 怎样搭建Vue.js框架环境并创建Vue实例

    前端框架中的Vue.js用来编写单页面也是非常不错的.今天小编我就来给大家分享一下 怎样搭建Vue.js框架开发环境以及 创建Vue实例的. 操作方法 01 首先便是自行下载Vue.js文件啦.如图所 ...

  • 如何在vue项目中使用vue-router路由实现跳转

    在vue.js项目中使用vue-router,可以使用路由进行界面或路径跳转.可以在项目创建一个组件,然后将组件引入到父组件中,利用超链接添加路径跳转.下面利用实例说明如何实现,操作如下: 操作方法 ...

  • vue.js-2.0路由怎么用？路由怎么配置？

    操作方法 01 首先,先来讲个小东西吧.我个人一般在开发的时候都会将ESLint关闭掉.在新建一个项目的时候,会提示你安装否.选择n就行了.也就是no.见下图!如果你不心安装了.也没事.在项目的配置文 ...

  • vue的点击事件；如何添加vue的click

    vue是当下最受欢迎的前端框架之一,它简单入门容易上手,深受大家的喜爱.由于vue是一个双向数据绑定的框架,它的点击事件与以前常用的还是有很大的差别的,那vue的点击事件是怎么样实现的呢? 操作方法 ...

  • vue如何实现点击隐藏与显示

    如何使用vue进行按钮点击后指定区域内容隐藏,再次点击按钮隐藏内容显示.实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后 ...

  • vue常用插件（vue自定义插件）

    vue常用插件（vue自定义插件）

    Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...

  • WebStorm 2017.3最新汉化激活破解及安装教程(附汉化包+原版下载)

    WebStorm 2017中文破解版是一款用于JavaScript编程的开发软件,该软件由著名的jetbrains公司研发.WebStorm 2017.3.3是目前最新版本,是前端web开发人员使用率 ...

  • IntelliJ IDEA 2017.3汉化破解版安装图文教程(附汉化补丁)

    IntelliJ IDEA 2017.3正式版发布了,本次更新包含许多修复和改进.在增强功能上,除了很多重要的修复之外,这次大规模的更新支持的语言.框架和内置工具.下面分享了IntelliJ IDEA ...