Javaweb第四章---Vue与指令(入门必看）

目录

一.Vue是什么？

 Vue的概念

Vue代码创建

二.指令

三.Vue生命周期

---

个人主页：tq02的博客_CSDN博客-C语言,Java,Java数据结构领域博主
本文由 tq02 原创，首发于 CSDN
 本章讲解内容：Vue和指令讲解

欢迎各位→点赞 + 收藏⭐ + 评论+关注✨

        

学习专栏：  C语言         JavaSE       MySQL基础 

一.Vue是什么？

 Vue的概念

Vue 是一套前端框架，可以免除JavaScript的DOM操作，使代码更加简洁

Vue的实现是基于MVVM思想，实现数据的双向绑定。

---

框架是一个半成品软件，是一套可重用的、通用的、软件基础代码模型

Vue文件下载及其MVVM思想的介绍：http://t.csdn.cn/IGTO7 

Vue代码创建

使用前需要映入Vue.js文件：

 Vue语法格式：new  Vue（{

                               el:" #id名 ",

//data定义数据模型     data:{

                                       数据模型

                                       }              

                        }）

注：在JS区域中创建,并且el的定义相当于CSS的id选择器

 使用格式：

  代码   {{数据模型}}     

 
    
        //引入vue.js文件


    
        //v-model下述有讲解
        
        {{message}}    //显示message的值
    

而如代码中，通过v-model指令，text文本框和数据模型data，完成了双向绑定，文本框的值和 message保持一致

---

二.指令

        由上面，我们可以发现一个新奇的东西，v-model，这便是指令。

指令：HTML标签上带有v-前缀的特殊属性，不同指令不同含义。

常用指令：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href,css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind

        为标签绑定属性值，可是有人会问，我们不需要这个也可以绑定啊，可是这是动态绑定诶，

使用时，可以直接省略v-bind

例如：以上代码，当游戏链接出错时，未使用指令，需要一个一个去修改；使用了指令，则可以直接在data数据模型一键修改。

v-on

        为HTML标签绑定事件，在Vue当中创建methods方法。

注：事件不再是onclick，而是click，去掉了on。

---

v-if、v-else-if、v-else

        这三个配套使用，用法与 Java中的if、else if、else 一致，一般用于标签中，是进行条件判断。当成立时，则会显露出 文本 中的文本内容。

注：如果不成立，浏览器检查中的元素是不存在该行代码的。

 
    
    


    
 
        未成年
        青年
        中年

---

  v-show

        作用与v-if等指令一样，但是会显示出 不符合条件的代码行

---

 v-for 

        循环，遍历，当数据模型data 里含有数组时，可以使用

语法格式：

{{ 变量名 }}

获取索引：

{{下标值+1}}:{{ 变量名 }}

---

三.Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程。

Vue生命周期有8个阶段：每触发一个阶段便会自动执行一个生命周期的方法,也称钩子方法。

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
update	更新后
beforeDestory	销毁前
destory	销毁后

Vue生命周期完整过程: 

 代码示例：

注：Java程序员只要掌握mounted()方法.

---

结：Vue主要依赖各种指令，生命周期每一个阶段都有其对应的执行方法。

                                                                                ----------懒惰的tq02