脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue.js基础语法

vue.js入门教程之基础语法小结

 更新时间：2016年09月01日 16:18:30   投稿：daisy  
这篇文章我们将学习vue.js的基础语法，对于大家学习vue.js具有一定的参考借鉴价值，有需要的朋友们下面来一起看看。

前言

Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。

以下代码是Vue.js最简单的例子， 当 input 中的内容变化时，p 节点的内容会跟着变化。

<!-- html -->
<div id="demo">
 <p>{{message}}</p>
 <input v-model="message">
</div>
new Vue({
 el: '#demo',
 data: {
 message: 'Hello Vue.js!'
 }
})

vue.js的基础语法

插入文本

<span>Message: {{ text }}</span>

插入html格式的文本，在页面显示为html的格式

<span>Message: {{{ html }}}</span>

内容不跟随data的变化

<span>Message: {{ * text }}</span>

属性上绑定数据

<div id="item-{{ id }}"></div>

在{{}}中使用js表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

在{{}}中使用js语句

{{ var a = 1 }}
{{ if (ok) { return message } }}

if指令

<p v-if="greeting">Hello!</p>
这里 v-if指令将根据表达式 greeting值的真假删除/插入 <p>元素。

href指令

<a v-bind:href="url"></a>
或者
<a href="{{url}}"></a>

click指令

<a v-on:click="doSomething">

回车指令

<input v-model="newTodo" v-on:keyup.enter="addTodo">

缩略写法

v-bind

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button><!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

v-on

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

总结

模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。小编会在后面给更新如何使用计算属性。感兴趣的朋友们请继续关注脚本之家。

您可能感兴趣的文章:

相关文章

  • vue中js判断长时间不操作界面自动退出登录(推荐)

    vue中js判断长时间不操作界面自动退出登录(推荐)

    这篇文章主要介绍了vue中js判断长时间不操作界面自动退出登录,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-01-01
  • vue中封装axios并实现api接口的统一管理

    vue中封装axios并实现api接口的统一管理

    这篇文章主要介绍了vue中封装axios并实现api接口的统一管理的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
    2020-12-12
  • Vue3.0使用ref和reactive来创建响应式数据

    Vue3.0使用ref和reactive来创建响应式数据

    ref 和 reactive 是 Composition API 中用来创建响应式数据的两个核心函数,在本篇文章中,我们将详细讲解如何使用 ref 和 reactive 来创建响应式数据,并展示它们之间的区别和使用场景,需要的朋友可以参考下
    2024-11-11
  • vue使用axios时关于this的指向问题详解

    vue使用axios时关于this的指向问题详解

    最近在学习使用vue+axios，在使用中发现了一个问题，下面总结分享给大家，这篇文章主要给大家介绍了关于vue使用axios时this的指向问题的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
    2017-12-12
  • 解决vue 给window添加和移除resize事件遇到的坑

    解决vue 给window添加和移除resize事件遇到的坑

    这篇文章主要介绍了解决vue 给window添加和移除resize事件遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue.js在标签属性中插入变量参数的方法

    vue.js在标签属性中插入变量参数的方法

    这篇文章主要介绍了vue.js在标签属性中插入变量参数的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2018-03-03
  • VUE父组件异步获取数据,子组件接收的值为空的问题

    VUE父组件异步获取数据,子组件接收的值为空的问题

    这篇文章主要介绍了VUE父组件异步获取数据,子组件接收的值为空的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 基于better-scroll 实现歌词联动功能的代码

    基于better-scroll 实现歌词联动功能的代码

    BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件，BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。本文基于better-scroll 实现歌词联动功能，感兴趣的朋友跟随小编一起看看吧
    2020-05-05
  • vue elementui异步给dom赋值无效问题

    vue elementui异步给dom赋值无效问题

    这篇文章主要介绍了vue elementui异步给dom赋值无效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue.js每天必学之Class与样式绑定

    Vue.js每天必学之Class与样式绑定

    这篇文章主要为大家详细介绍了Vue.js的Class与样式绑定,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论