欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2023-01-30 10:34:03|栏目:vue|点击:

前言

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>

总结

上一篇:从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

栏    目:vue

下一篇:vite创建一个标准vue3+ts+pinia项目

本文标题:vue.js入门教程之基础语法小结

本文地址:http://www.codeinn.net/misctech/224715.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有