源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-05-14 19:00 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:vue.js入门教程之基础语法小结
[b]前言[/b] 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!'
 }
})
[b]vue.js的基础语法[/b] [b]插入文本 [/b]
<span>Message: {{ text }}</span>
[b]插入html格式的文本,在页面显示为html的格式[/b]
<span>Message: {{{ html }}}</span>
[b]内容不跟随data的变化[/b]
<span>Message: {{ * text }}</span>
[b]属性上绑定数据[/b]
<div id="item-{{ id }}"></div>
[b]在{{}}中使用js表达式[/b]
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
[b]在{{}}中使用js语句[/b]
{{ var a = 1 }}
{{ if (ok) { return message } }}
[b]if指令[/b]
<p v-if="greeting">Hello!</p>
这里 v-if指令将根据表达式 greeting值的真假删除/插入 <p>元素。
[b]href指令[/b]
<a v-bind:href="url"></a>
或者
<a href="{{url}}"></a>
[b]click指令[/b]
<a v-on:click="doSomething">
[b]回车指令[/b]
<input v-model="newTodo" v-on:keyup.enter="addTodo">
[b]缩略写法[/b] 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>
[b]总结[/b] 模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。小编会在后面给更新如何使用计算属性。感兴趣的朋友们请继续关注编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部