首页 > 代码库 > vue入门
vue入门
vue入门
很多同学一定都听过MVVM、组件、数据绑定之类的专业术语，而vue框架正是这样的一种框架，其开发者是尤雨溪，其实听到一个中国人可以开发出目前如此流行的框架还是感到非常自豪的，这里将记录vue的一些学习笔记，主要参考的是其中文官方文档。vue的作用是：通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
第一部分：vue介绍与使用
话不多说，我们先来看一看最简单的vue是怎么使用的。实际上，我们只需要引入一个js文件即可（当然，这只是一种相对简单的方法，还有其他的方法），这个js文件即对vue的封装。下面的例子可以输出hello world。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src=http://www.mamicode.com/"https://unpkg.com/vue/dist/vue.js"></script></head><body> <div id="example"> {{message}} </div> <script> var example=new Vue({ el:‘#example‘, data:{ message: "hello word" } }); </script></body></html>
其中，我们可以看到{{message}}这实际上类似于模版字符串，其中的message为模版，我们在js文件中可以给其设置值。注意：这里{{}}是两个大括号，并且这里既然看作了一个模版，终究会被字符串所代替，所以没有加分号，它不是语句。比如，我们还可以写成:
<div id="example"> 哈哈， {{message}} 是模版字符串 </div>
即{{message}}可以穿插在任何地方，而不需要
另外，我们可以看到var example = new Vue();这个语句实际上是创建了一个Vue的实例对象，显然这个Vue构造函数是已经封装好的，我们直接使用即可。注意：正因为Vue是构造函数，所以Vue中的V要大写！
且Vue中可以接收一个JSON字符串，所以我们在圆括号里是一个{}。而el是element的缩写，我们把el的值写成# . 等形式来获取dom元素，这一点和jQuery非常像，而data又是一个JSON字符串，我们这时可以给message赋任意想要的值，注意：这里的message还可以写成其他任意的形式如mes等。而< div id="example" >也可以写成 <div class="example">或<div>,在js中只需要使用el:".example"和"div"分别来引用即可。
这样，一个最简答的vue例子就做出来了。并且这还是响应式的，也就是vue中的双向数据绑定，为什么这样说呢？因为vue是一款MVVM框架，M表示Module是数据的意思（属于js），V表示View是视图的意思（属于html）。
第二部分：vue中的指令( v-bind、v-if )
我们知道我们可以通过在div内部显示文本处添加{{message}}再通过js来添加模版，但是如果我们希望这个模版作为一个属性值存在于一个div的title属性中，我们可以通过<div title="message">的方式吗？ 答案是否定的，大家可以自行尝试。这时，我们就需要使用vue中的v-bind了。举例如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src=http://www.mamicode.com/"https://unpkg.com/vue/dist/vue.js"></script></head><body> <div v-bind:title="message" > 使用鼠标划过我哦 </div> <script> var example=new Vue({ el:‘div‘, data:{ message: "我是通过指令被绑定的" } }); </script></body></html>
这个v-bind即称为指令，它带有前缀 v- ,dfjfafdf
显然，这表示它是由Vue.js提供的特殊的属性。意思是：将元素节点的title属性和Vue实例的message属性绑定到一起。于是，我们可以通过修改message来修改title属性的值。
当然，vue中的指令绝不仅限于此，v-if就是一个判断指令。举例如下：
,
vue入门