VueVue快速入门

Posted 二狗

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VueVue快速入门相关的知识,希望对你有一定的参考价值。

Vue.js介绍

    Vue.js的作者为Evan You(尤雨溪),曾任职于Google Creative Lab。

    Vue文档:https://cn.vuejs.org

 Vue github:https://github.com/vuejs/vue

 Vue是前端主流框架中的集大成者,它吸取了angular,react的经验,支持各种模式写法,入门很简单,记录学习vue中的点点滴滴。

接下来我们来简单介绍一下Vue的生命周期

 

Vue实例的生命周期(图)

 

 

 

在beforeCreate和created钩子函数间的生命周期

在beforeCreate和created之间,进行数据观测(data observer) ,也就是在这个时候开始监控data中的数据变化了,同时初始化事件

生命周期我们就简单介绍到这如果需要详细可以去看看这篇文章

http://www.cnblogs.com/penghuwan/p/7192203.html

接下来我们开始简单使用Vue

html代码:

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

js代码:

new Vue({
    el: \'#app\',
    data: {
    message: \'Hello Vue.js!\'
    }
})

打印结果:

Hello Vue.js!

咱们分析一下上述代码,一句简单的{{message}},就把数据绑定到到了dom中,在当前的代码中创建Vue对象的时候,传递的参数{el:\'#app\',data:{message:\'hello vue.js!\'}},其中el是vue挂载的元素,也就是作用的范围,创建一个根作用域,data对象就是代理vue对象中数据和template的桥梁。

下面我们来看看vue双向数据绑定

html:

    <div id="root">
        <div :title="title">hello world</div>
        <input  v-model="content"/>
        <div>{{  content }}</div>
    </div>

js:

    <script>
        new Vue({
            el:"#root",
            data:{
                title:"this is hello world",
                content:"this is content",
            }
        })
    </script>

Vue是一个轻量级的框架,简单轻量的同时还非常的人性化,API也是非常容易理解,同时也提供了一些很便捷的指令和属性。

<div v-text="content"></div>

实现效果也就是给div的内容社会为 content

<div v-on:click="hanleClick" ></div>

可以简写为

<div @click="hanleClick" ></div>

实现效果也就是给div绑定一个click事件

<a v-bind:href="url"></a>

可以简写为

<a :href="url"></a>

实际就是给a标签绑定一个属性

列表渲染

1.语法v-for:通过v-for可遍历js对象集合,然后用可以直接输出每一项的数据。下面的代码直接用文本输出items的每项数据。

    html代码:

<ul id="app">
    <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>

    js代码:

var app = new Vue({
    el: \'#app\',
    data: {
        items: [
            { message: \'小明\' },
            { message: \'小王\' }
        ]
    }
})

获取遍历项索引:使用v-for遍历有时候想得到每一项的索引值,可通过indexindex直接获取,index是vue直接提供的特性。我们也可以给索引取别名:

<div v-for="(item,index) in items">
    {{ index}} {{ item.message }}
</div>

接下来我们说说计算机属性与侦听器

html

    <div id="root"><input v-model="firstName" /><input v-model="lastName"/>

        <div>
            {{fullName}}
        </div>
        <div>
            {{count}}
        </div>
    </div>

js 

    <script>
        new Vue({
            el:"#root",
            data:{
                firstName:\'\',
                lastName:\'\',
                count:0,
            },
            computed:{
                fullName:function(){
                    return this.firstName+this.lastName;
                }
            },
            watch:{
                fullName:function(){
                    this.count++;
                }
            }
        })
    </script>

  computed:相当属性的一个实时计算,如果实时计算里关联了对象,那么当对象的某个值改变的时候,同事会出发实时计算,上面当我们的firstName或者lastName呗更改时它就会触发我们的computed的fullName从而更改了我们的fullName值

     watch:它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。上面当我们的fullName发生变化时,我们的watch就会触发fullName使count加1

总结

说起小巧,我们可以关注Vue的源码大小,Vue的成产版本(即min版)源码仅为72.9kb,官网称gzip压缩后只有25.11kb,相比Angular的144kb缩小了一半。

小巧的一种好处就是可以让用户更自由的选择相应的解决方案,在配合其他库方面它给了用户更大的空间。

 

本人第一次写文章,如果写的有错误的地方还请大家多多指教。

以上是关于VueVue快速入门的主要内容,如果未能解决你的问题,请参考以下文章

VueVue入门--双向绑定,Vue的组件,Axios异步通信,计算属性,插值,自定义事件

VueVue入门--双向绑定,Vue的组件,Axios异步通信,计算属性,插值,自定义事件

你也需要懂的一点前端小知识—Vue快速入门

vuevue安装卡住/报错

mybatis快速入门

c#代码片段快速构建代码