vuejs入门

Posted 2020-08-04 我爱吃小丸子

先写个标题，慢慢写。。。

　　vue.js是一个构建数据驱动的web界面的库。技术上，它重点集中在MVVM模式的ViewModel层，因此它非常容易学习，非常容易与其它库或已有项目整合。

　　Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

　　Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。在使用jQuery手工操作DOM时，我们的代码常常是命令式的、重复的与易错的。Vue.js拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通html模板中使用特殊的语法将DOM “绑定”到底层数据。

 

最简单的方法是使用 JSFiddle Hello World 例子。在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看安装教程。

Hello World

<div id="app"> {{ message }} </div>

new Vue({ el: ‘#app‘, data: { message: ‘Hello Vue.js!‘ } })

Hello Vue.js!

双向绑定

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div>

new Vue({ el: ‘#app‘, data: { message: ‘Hello Vue.js!‘ } })

Hello Vue.js!

渲染列表

<div id="app"> <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> </div>

new Vue({ el: ‘#app‘, data: { todos: [ { text: ‘Learn javascript‘ }, { text: ‘Learn Vue.js‘ }, { text: ‘Build Something Awesome‘ } ] } })

• Learn JavaScript
• Learn Vue.js
• Build Something Awesome

处理用户输入

<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div>

new Vue({ el: ‘#app‘, data: { message: ‘Hello Vue.js!‘ }, methods: { reverseMessage: function () { this.message = this.message.split(‘‘).reverse().join(‘‘) } } })

Hello Vue.js!

Reverse Message

综合

<div id="app"> <input v-model="newTodo" v-on:keyup.enter="addTodo"> <ul> <li v-for="todo in todos"> <span>{{ todo.text }}</span> <button v-on:click="removeTodo($index)">X</button> </li> </ul> </div>

new Vue({ el: ‘#app‘, data: { newTodo: ‘‘, todos: [ { text: ‘Add some todos‘ } ] }, methods: { addTodo: function () { var text = this.newTodo.trim() if (text) { this.todos.push({ text: text }) this.newTodo = ‘‘ } }, removeTodo: function (index) { this.todos.splice(index, 1) } } })

• Add some todos X

希望上例能让你对 Vue.js 的工作原理有一个基础概念。我知道你现在有许多疑问——继续阅读，在后面的教程将一一解答。