Vue.js 介绍

Vue.js 介绍

Vue.js（读音 /vjuː/） 是一套构建用户界面的渐进式框架。
与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

快速开始
1、引入vue.js 即可开始vue.js之旅！

<script src="https://unpkg.com/vue/dist/vue.js"></script>

小提示
下载下来保存到本地运行更快哦 ^_^

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM：

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

<script type="text/javascript"> 

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 

</script>

绑定 DOM 元素属性

语法 v-bind:属性="变量" <div id="app-2">

 <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> 

</div> 

<script type="text/javascript">

 var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date() } }); 

</script>

条件 v-if

控制切换一个元素的显示：

<div id="app-3"> 

<p v-if="seen">现在你看到我了</p> </div> <script type="text/javascript"> var app3 = new Vue({ el: '#app-3', data: { seen: true } }) </script>

循环 v-for

<div id="app-4">

 <ol> <li v-for="todo in todos">{{ todo.text }}</li> </ol> 

</div>

 <script type="text/javascript"> 

var app4 = new Vue({ el: '#app-4', data: { 

todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, 

{ text: '整个牛项目' } ] } }); </script>

绑定点击事件
为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：

<div id="app-5">

 <p>{{ message }}</p>

 <button v-on:click="reverseMessage">逆转消息</button> </div> 

<script type="text/javascript">

 var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' },

 methods: { reverseMessage: function () 

{ this.message = this.message.split('').reverse().join('') } } })

 </script>

注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码不需要关注底层逻辑。
事件： click、dblclick、change、keyup、keydown、mouseover.......

一个打印机的例子

<div id="app"> <p>

{{ message }}</p> <input type="text" v-on:keyup="test" ref="input1" />

 </div> 

<script type="text/javascript"> 

var app5 = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' },

 methods: { test: function () {

 this.message = this.$refs.input1.value; } } }) </script>

v-model 指令
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})