首页 > 代码库 > 初识Vue.js
初识Vue.js
一 ，什么是Vue.js？
vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。（自底向上设计方法是根据系统功能要求，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过对其进行相互连接、修改和扩大，构成所要求的系统。）Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
二，声明式渲染。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM,即使用双大括号声明包裹数据变量，实现声明式渲染。这里的声明主要有两大类，第一类，渲染元素内部的内容；第二类，渲染元素标签里的属性。下面是演示：
html代码：第一个div，message声明起到填充文本的作用；第二个div，通过v-bind实现对元素title的操纵。
<div id="smsxr">{{message}}</div> <div id="bind-attr"> <span v-bind:title="message">鼠标悬浮查看加载事件。使用v_bind指令。指令一般加v_前缀，会在渲染的dom上应用特殊的响应行为，比如此处将title和message对应。</span> </div>
JavaScript代码：
//声明式渲染，调用时只要{{message}}，即可使用message的值来填充dom元素的内容。 var smsxr=new Vue({ el:‘#smsxr‘, data:{ message:"声明式渲染，通过双大括号声明指明数据来源！" } }) //动态加载属性，通过动态化属性值变量来实现 v-bind:title="message".
var dtjzsx=new Vue({ el:"#bind-attr", data:{ message:"文字加载于"+new Date() } })
三，条件与循环。
在JavaScript中我们通常用if和for来实现条件和循环功能。Vue中我们使用类似的v-if和v-for来实现条件和循环。使用方式是在对应标签内部通过v-if=‘‘和v-for=‘‘这样的指令。引号内可以是变量也可以是简单的语句。下面分别来看条件和循环的实现：
通过v-if实现元素内容的显示和隐藏：
html代码：v-if="seen”，seen为true时元素显示，为false时元素隐藏，这样通过重置seen的值就可实现对元素可见状态的操纵。
<div id="kztj"> <p v-if="seen">现在你可以看到我，当seen为false时你将看不到我，Vue通过v_if来控制条件。此处演示也说明我们利用Vue可以将dom结构绑定到数据，即通过数据控制dom的显示结构。</p> </div>
JavaScript代码：这里声明元素id为kztj的元素里面seen的取值。
//v-if控制条件，seen定义处。 var kztj=new Vue({ el:"#kztj", data:{ seen:true } })
通过v-for实现元素的循环生成：
html代码：addListNew（）是一个自定义函数，用于实现单击后添加新的子项。定义见本段末尾。
<div id="xh"> 我是通过v-for循环生成的列表<button id="xh_btn" onclick="addListsNew()">单击我添加新项</button> <ol> <li v-for="todo in todos"> {{todo.text}} </li> </ol> </div>
JavaScript代码：定义元素数据源。
//v-for控制循环 var xh=new Vue({ el:"#xh", data:{ todos:[ {text:"声明式渲染。"}, {text:"动态加载属性。"}, {text:"v-if控制条件。"}, {text:"v-for控制循环。"} ] } })
function addListsNew(){ xh.todos.push({text:"xh.todos.push添加新项。O(∩_∩)O哈哈~"}); }
四，处理用户输入
这里的输入包括行为，操作等等。例如单击，传入状态等。本例中选择的是用户的单击输入。
html代码：在标签内用v-on:click="函数名"声明click事件的响应函数。
<div id="clyhsr"><p>{{message}}</p> <button v-on:click="reverseMessage">逆转消息</button> </div>
JavaScript代码：通过Vue的methods属性，定义响应函数reverseMessage（）。
//处理用户输入 var clyhsu=new Vue({ el:"#clyhsr", data:{ message:"处理用户输入,这个输入泛指，包括输入的操作，状态等等，比如单击，某个动作" }, methods:{ reverseMessage:function(){ this.message=this.message.split(‘,‘).reverse().join(‘,‘) } } })
这是通过v-model双向绑定用户输入和应用状态：
html代码：
<div id="sxbd"> v-model使应用状态和用户输入之间的双向绑定变得容易。 <p>{{message}}</p> <input v-model="message" /> </div>
JavaScript代码：
//用户输入和应用状态的双向绑定 var sxbd=new Vue({ el:"#sxbd", data:{ message:"用户输入和应用状态的双向绑定。" } })
五，组件化应用的构建
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、自包含和通常可复用的组件构建大型应用。也就是允许我们“工厂化”生产我们的应用吧。
html代码：组件调用时，在页面中添加组件标签名称，并为之添加上相应的指令。
<div id="component"> <ol> <todo-item v-for="item in lists" v-bind:todo="item"></todo-item> </ol> </div>
JavaScript代码：注册组件，通过组件的props属性，实现数据的跨域传递。如，todo和todo.text.
//注册组件 Vue.component(‘todo-item‘,{ props:[‘todo‘], template:"<li>{{todo.text}}</li>" }) //调用组件,每一个todo都是lists里的一个元素，v-for实现循环 var component=new Vue({ el:"#component", data:{ lists:[ {text:"第一，注册组件。"}, {text:"第二，像使用原始标签一样，在页面中使用组件。"}, {text:"第三，通过定义原始数据，个性化调用组件。"}, {text:"组件可以有属性，用来将数据从父域传到子域，如本例中的prop"}, {text:"组件可以利用v-for,v-bind，实现循环和绑定事件监听。"} ] } })
组件和自定义元素的区别：
Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分，这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是，还是有几个关键差别：
1,Web 组件规范仍然处于草案阶段，并且尚无浏览器原生实现。相比之下，Vue 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
2,Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流，自定义事件通信以及构建工具集成。
初识Vue.js