Vue.js学习笔记（一）

来源：互联网发布：小说淘宝网免费阅读编辑：程序博客网时间：2024/05/14 11:18

其实，每天学习些新的东西，内心还是有一丝安慰的，起码对于我自己来说，不是那么的荒废，最近公司不是太忙，学习的东西比较杂，总是自己做一个简单的笔记，这一篇就是对于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 }}&nbsp;&nbsp;
       </span>
   </div>
</div>

学到这里，其实也已经发现了，Vue.js的功能还是蛮强大的，如果仅仅以上，恐怕也不会我们去值得学习，我有无数种想法和冲动，用Vue.js来获取数据，填充数据，它的运作，将是那么的简单。

阅读全文

0 0