Vue实例与渲染

1 Vue框架

1.1 vue与jQuery区别

jQuery仍然是操作DOM的思想，jQuery主要用来写页面特效
Vue是前端框架(MVVM)，对项目进行分层。处理数据

1.2 前端框架

angular google
react facebook
vue 全世界，社区维护

1.3 单页面应用

1.4 MVVM

M模型层 Model
V视图层 View
VM(控制层)VIEW-MODEL

2 VUE实例

let app = new Vue({

    el:'#app',       //挂载元素

    data:{

        //数据

        属性名:值

    },

    methods:{

        属性名:function(){

            }

        //方法

    },

    computed:{

        属性名:function(){

        }

        //计算属性  被动 别人改--自己改

    },

    watch:{

        属性名:function(){

        }

        //监听属性  主动 自己改--别人改

    },

    //生命周期的钩子函数

    beforeCreate:function(){

        //实例刚创建时，只有this,但没有任何属性

    },

    created:function(){

        //方法属性等都已经创建，可以在这里获取后端数据

    },

    beforeMount:function(){

        //挂载完成前

    },

    mounted:function(){

        //挂载完成，DOM操作写在这，但是建议不使用DOM

    },

    beforeUpdate:function(){

        //数据更新前

    },

    upeated:function(){

        //数据更新完成

    },

    //很少用

    <!--activated-->

    <!--deactivated-->

    <!--beforeDestory-->

    <!--destoryed-->

})

注：function中调用属性需要用this.属性名

3 Vue视图

3.1 基本模块语法

文本插值

{{ title }}

<p v-text='title'></p>

<p v-once>{{ title }}</p>  值一经设置不能改动

HTML

<div v-html='message'></div>

绑定属性

<img v-bind:scr='imgSrc' v-bind:title='title'>

缩写：

<img :scr='imgSrc' :title='title'>

防止闪烁

<style>

    [v-cloak] {

        display:none !important

    }

</style>

<div id='app' v-cloak>

3.2 指令

* v-text

* v-html

* v-show

* v-if

* v-else-if

* v-else

* v-for

* v-on      缩写   @事件

* v-bind    缩写   :属性

* v-model

* v-pre

* v-cloak

* v-once

3.3 条件渲染

v-if

v-else-if

v-else

true时显示,false时什么都没

v-show      v-show控制隐藏和显示(改变display)

3.4 列表渲染

v-for

例子:<li v-for="(item,index) in itemList"> {{index}} {{item}} </li>

巴特西

Vue实例与渲染

1 Vue框架

1.1 vue与jQuery区别

1.2 前端框架

1.3 单页面应用

1.4 MVVM

2 VUE实例

3 Vue视图

3.1 基本模块语法

文本插值

HTML

绑定属性

防止闪烁

3.2 指令

3.3 条件渲染

3.4 列表渲染

最新文章

热门文章