其实，每天学习些新的东西，内心还是有一丝安慰的，起码对于我自己来说，不是那么的荒废，最近公司不是太忙，学习的东西比较杂，总是自己做一个简单的笔记，这一篇就是对于Vue.js的学习笔记,学完之后，才发现，Vue.js真的是好简单，好强大。
什么是Vue.js？对我来说，它是javascript的一个框架，可以向dom传递数据，绑定数据，当然了更官方的说法是，它是一套构建用户界面的渐进式框架，它只关注视图，比如我们向浏览器输出，“Hello,Vue.js!”这句话，当然了，我们可以用p,span,div,h1等等很多标签可以实现，但相对于这些标签，Vue.js能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上,如下：
<body>
<div class="app">
<h1>{{ message }}</h1>
</div>
<script>
new Vue({
el: ".app",
data: {
message: "Hello,Vue.js!"
}
});
</script>
</body>
使用Vue.js，一般我会使用cdn的方法，不为什么，就是因为简单，在head里，用script标签引入即可，当然了，你可以去官方下载独立版本，你更可以采用NPM的方法进行安装，这些都ok，下面是三个可以引入的cdn地址：
BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
上面有一个小例子，只是向浏览器输出了简单的文本信息，除了文本信息，当然了，还可以输出html标签，使用标签的时候，我们要用到v-html指令，来将信息绑定到指定的标签上，如下：
<body>
<div class="app">
<div v-html="html"/>
</div>
<script>
new Vue({
el: ".app",
data: {
html:"<h1>我是h1标签</h1>"
}
});
</script>
</body>
Vue.js的强大之处，不仅仅可以输出这些文本标签信息，更在于它可以进行表达式的运算，条件的判断，以及点击事件的绑定，样式的绑定等等，那么如何实现表达式的运算呢，其实很简单，只需要在两个{{ }}之间进行运算即可，比如，6+6，23*25，100/10:
<div class="app">
{{ 6+6 }}<br/>
{{ 23*25 }}<br/>
{{ 100/10 }}
</div>
if，for的条件语句，也是非常的简单，只需要v-if,v-for指令即可，例如，要实现根据条件，来判断这个标签是隐藏还是显示，那么，我们就可以这样去做：
<div class="app">
<div v-if="isShow">
<p>isShow是true我就显示，false就隐藏</p>
</div>
</div>
<script>
new Vue({
el: ".app",
data: {
isShow:true
}
});
</script>
当然了，v-if指令还有v-else-if,v-else指令相匹配，不过有一点需要注意的是，后两者必须要在v-if之后进行，比如我们根据一个变量是否大于小于等于1来判断，如下：
<body>
<div class="app">
<div v-if="num>1">
num>1
</div>
<div v-if="num<1">
num<1
</div>
<div v-if="num=1">
num=1
</div>
</div>
<script>
new Vue({
el: ".app",
data: {
num: 1
}
});
</script>
</body>
num的值如果大于1浏览器则会输出num>1,小于1则会输出num<1,等于1则会输出num=1。
v-for指令就有点类似于其它语言中foreach，例如，遍历1-10：
<div class="app">
<div v-for="a in 10">
{{ a }}
</div>
</div>
在学习语言的过程中，老有打印九九乘法表一说，我想说的是，Vue.js也可以，如下：
<div class="app">
<div v-for="a in 9">
<span v-for="b in a">
{{ b }}*{{ a }}={{ b*a }}
</span>
</div>
</div>
学到这里，其实也已经发现了，Vue.js的功能还是蛮强大的，如果仅仅以上，恐怕也不会我们去值得学习，我有无数种想法和冲动，用Vue.js来获取数据，填充数据，它的运作，将是那么的简单。
130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
