js教程

Vue新手入门常用指令教程

我的站长站 2023-03-06 人阅读

1. 文本插值:{{ }} Mustache

<div id="app">
{{ message }}
</div>

2. DOM属性绑定: v-bind

<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>

3. 指令绑定一个事件监听器:v-on 

<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>

4. 实现表单输入和应用状态之间的双向绑定:v-model

<div id="app-6">
 <p>{{ message }}</p>
<input v-model="message">
</div>

5. 控制切换一个元素的显示:v-if 和 v-else

<div id="app-3">
 <p v-if="seen">现在你看到我了</p>
</div>

6. 列表渲染:v-for

<div id="app-4">
<ol>
<li v-for="todo in todos">
  {{ todo.text }}
    </li>
 </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
   data: {
     todos: [
       { text: '学习 JavaScript' },
      { text: '学习 Vue' },
       { text: '整个牛项目' }
     ]
   }
 }

相关推荐
  • vue教程
  • 新手入门
  • vue2.0 新闻客户端 实战视频教程
    vue2.0 新闻客户端 实战视频教程

    课程介绍首先,我们对Vue2.0做个基本的介绍,Vue.2.0是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与...

    视频教程 135 4年前
  • 2019最新Vue+Vuex+MintUi+ElementUi+Mpvue入门实战视频教程
    2019最新Vue+Vuex+MintUi+ElementUi+Mpvue入门实战视频教程

    课程介绍2019更新6小时学会Vue入门实战视频教程6小时让你学会Vue开发,没错就是6小时,细致的讲解,详细的剖析,幽默的案例,由浅入深,逐步深入,让你快速了解并掌握Vue的组件、Vue中的请求数据、Vue的路由、...

    视频教程 187 4年前
  • web前端开发ReactJS,AngularJS, Vue.js优劣对比分析

    在全球大范围看,React和Angular依然遥遥领先,Vue.js这位后起之秀还需努力做到全球化!为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。JavaScript框架的更新节奏可以说日新月异,我们可以看到Angular不停地在发布新的版本,R...

    js教程 160 4年前
  • php_Stu新手入门PHP示例实战源码
    php_Stu新手入门PHP示例实战源码

    源码介绍php_Stu新手入门PHP示例实战源码,保护注册登录和会员信息展示、修改用户信息等等基础功能,简单的php语言和基础逻辑以及一点点sql语句搞的。因为代码没经过安全过滤,可能存在常见的web渗透...

    php源码 23 5个月前
  • [Linux入门]Linux系统简介

    Linux 为何物Linux 就是一个操作系统,就像你多少已经了解的 Windows(xp,7,8)和 Mac OS 。计算机系统分为硬件、内核、系统调用、应用程序四层, Linux 作为操作系统则主要是系统调用和内核那两层。操作系统在整个计算机系统中,是充当应用程序和硬件沟通交流...

    服务器配置 169 4年前
  • 有哪些好的php一键端环境配置软件

    以前PHP运行环境我们都是手动照着教程一步一步的配置的,外一哪一步出错了,又得重装重新配置,传统的php环境软件非常复杂。好在很多公司开发了一键搭建php安装环境,一键进行php环境配置,大大节省了搭建php mysql环境的时间!对老手来说安装配置php环境也不再...

    php教程 165 4年前
最新更新