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
本文标题:vue.js入门教程之基础语法小结
本文地址:http://www.codeinn.net/misctech/224715.html