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 的核心库只关注视图层,它不仅易于上手,还便于与...

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

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

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

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

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

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

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

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

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

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

    php教程 166 4年前
最新更新
  • JS防止网站被扒的解决方法

    这个代码能够直接保护整个站,而不再是单个页面,直接把代码放到自己的网站上,如果是博客建议放到header.php头部...

    js教程 26分钟前
  • Hexo插件开发实战教程

    Hexo的插件嵌入有两种方式,一种是通过脚本(Scripts)的方式引入,一种是通过插件(Packages)的方式将自定义的插件内...

    js教程 2周前
  • JavaScript定时删除指定元素方法

    JavaScript定时删除指定元素一般用到自动隐藏的效果功能上面,主要用到了JS的setTimeout语法。下面是一个定时...

    js教程 2周前
  • echarts增加loading加载中效果方法

    需要开发echarts中的loading加载中效果,我们可以使用到echart自带showLoading()方法。在需要加载数据的地方...

    js教程 4周前
  • js如何获取指定网址中的参数

    之前我的站长站分享的都是用JS获取当前网址URL中的参数,我们这次教大家如何获取指定网址中的参数。js获取网...

    js教程 4周前