Vue.js的简单介绍

Vue学习 胡小邦
文章标签: Vue

Vue.js的简单介绍

Vue的主要特点就和它官网(https://cn.vuejs.org/v2/guide/所介绍的那样:

简单的Vuejs代码:

下面看一段Vue实现双向绑定的代码

<body>
    <div id="app">
        <p>{{ note }}</p>
        <input type="text" v-model="note">
    </div>
</body>

// js
var vm = new Vue({
    el: '#app',
    data: {
        note: ''
    }
})

Vue的代码编写风格更加简洁,并且通俗易懂。

Vue一些便捷的指令和属性:

(1)绑定click事件

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

(2) 绑定动态属性

<a v-bind:href="url"></a>

(3) 实用的参数特性

<!-- debounce 设置一个最小的延时 -->
<input v-model="note" debounce="500">

<!-- 在 "change" 而不是 "input" 事件中更新数据 -->
<input v-model="msg" lazy>

今日个人总结:

学习一门语言或者框架本身并不是为了学习它的技术,

最重要的是学习它的思维,只有思维层面得到了延伸,

学习其他技术的时候会发现得心应手。

Vue带给我们的是前端一种解决问题的新的思维。

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :