首页 前端知识 Javaweb第四章---Vue与指令(入门必看)

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

2024-04-20 17:04:34 前端知识 前端哥 937 820 我要收藏

目录

一.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文件:

<script  src="  Vue.js文件路径 " ></script>

 Vue语法格式:new  Vue({

                               el:" #id名 ",

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

                                       数据模型

                                       }              

                        })

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

 使用格式:

<div  id=" id名 ">  代码   {{数据模型}}     </div>

<html lang="en">
<head> 
    <title>Vue复习</title>
    <script src="vue.js"> </script>    //引入vue.js文件
</head>
<body>
    <div id="app">        //v-model下述有讲解
        <input type="text"  v-model="message">
        {{message}}    //显示message的值
    </div>

</body>

<script>
        //创建Vue
    new Vue({
        el:"#app",
        data:{
           message:"Hello world"
        }
    })

</script>

而如代码中,通过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方法。

<head> 
    <title>Vue复习</title>
    <script src="vue.js"> </script>
</head>
<body>
    <div id="app">           
        <input type="button" value="按钮"  v-on:click="chage()">
    </div>

</body>

<script>
    new Vue({
        el:"#app",
        data:{
           message:"Hello world",
           url:"http://t.csdn.cn/w5tHw"
        },
        methods: {
            chage:function(){
              alert("执行方法");
          }
        }
    })
</script>

注:事件不再是onclick,而是click,去掉了on。


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

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

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

<head> 
    <title>Vue复习</title>
    <script src="vue.js"> </script>
</head>
<body>
    <div id="app"> 
        <span v-if="age<18">未成年</span>
        <span v-else-if="age>=18&&age<=40">青年</span>
        <span v-else>中年</span>
</body>

<script>
    new Vue({
        el:"#app",
        data:{
            age:18;
        }
    })
</script>


  v-show

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


 v-for 

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

语法格式:<div v-for=" 变量名  in   数组名">{{ 变量名 }}</div>

获取索引:<div v-for=" (变量名,下标名)  in   数组名"> {{下标值+1}}:{{ 变量名 }} </div>


三.Vue生命周期

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

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

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

Vue生命周期完整过程: 

 代码示例:

<script>
     new  Vue({
        e1:"#app",
        data:{
            //代码
        },
    mounted(){
        //挂载完成时,执行的代码
        }
    updated(){
        //更新后,执行的代码
        }
    .....
    })
</script>

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


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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5487.html
标签
评论
发布的文章

CSS(8)空间转换 动画

2024-04-29 12:04:29

CSS介绍(4)--背景属性

2024-04-29 12:04:26

Web学习记录---CSS(1)

2024-04-29 12:04:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!