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>