Vue实例与渲染

最新推荐文章于 2023-12-03 23:03:23 发布

转载最新推荐文章于 2023-12-03 23:03:23 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luck-L/p/9511819.html

文章标签：

#前端框架 #javascript #后端 #ViewUI

本文深入探讨Vue.js框架的基本概念，包括与jQuery的区别、MVVM模式、单页面应用特性及其实例创建过程。详细解析了Vue实例的组成部分，如data、methods、computed和watch属性，以及生命周期钩子。同时介绍了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>

转载于:https://www.cnblogs.com/luck-L/p/9511819.html