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

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

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

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

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

    js教程 129 3年前