Java学习 day38_vue

最新推荐文章于 2022-09-18 20:04:32 发布

p-坚持

最新推荐文章于 2022-09-18 20:04:32 发布

阅读量232

点赞数

分类专栏： Java学习文章标签： vue.js javascript 后端

本文链接：https://blog.csdn.net/weixin_43385930/article/details/119086681

版权

Java学习专栏收录该内容

66 篇文章 23 订阅

订阅专栏

1 Vue

JQuery

在当下时代:
前端 --> 三个基础:html,css,js
三个框架: vue, react, Angular

所有的页面: 都可以直接用html css js 直接实现
所有的前端基础/框架都是基于html css js
Vue开发者: 尤雨溪
量级: Angular > react > Vue

原生开发: 贴近于底层语言的开发，如果app要更新功能，用户就必须更新app
成本高
稳定/运行高速

前端:
混合开发: 原生技术 + 前端，大部分的app都是这个技术，比如淘宝

跨端开发: 慢
http://flutter.axuer.com/
https://reactnative.dev/
weex:

uni-app: 垃圾 bug多

1.1 Vue特点

1 Vue.js------ 渐进式框架。
与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合(前端).
另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持开发复杂单页应用。 vue的源代码是js

2 渐进式:从核心到完备的全家桶增量:从少到多,从一页到多页,从简单到复杂单文件组件: 一个文件描述一个组件单页应用: 经过打包生成一个单页的html文件和一些js文件

3 增量:从少到多,从一页到多页,从简单到复杂
写前端基本上就是一套网站，可能是由多个页面组成。Vue就可以让我们写一页也能供用户浏览，写多页也能供用户浏览，也就是可以不停的往已有的项目中添加东西。

Vue-router
Vuex
Axios
生态: 衍生内容/框架/产品

1.2 Vue

注意：Vue的底层是js
1, vue基础语法: 现在html讲基础语法, html问题(因为不是专门写vue)
2, Vue项目实现, 从无到有–> 用户使用

1.3 在HTML写一个Vue相关页面

1 首先要导入vue，有两种方式
a, 直接使用网址获得vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

b, 将此地址中的内容复制到vue.js文件当中，然后引用，这样更快

<script src="vue.js"></script>

2，创建Vue对象, 关联对应的html结点 (通过id属性和 el属性 )

3, 当Vue对象和对应的html结点都解析之后, 建立绑定关系
4, 重新按照Vue语法解析对应vue作用域

1.4 V指令

1.4.1 V-bind: 单向绑定

v-bind: 把html的属性通过v-bind绑定一个Vue对象中的自定参数
把Vue对象中的自定参数, 绑定到对应的html作用域中的标签属性上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">


    <!--        v-bind: 把html的属性通过v-bind绑定一个Vue对象中的自定参数-->
    <!--        把Vue对象中的自定参数, 绑定到对应的html作用域中的标签属性上-->

    <!-- 这里竟然多加了空格就会出错 -->
    <a v-bind:href="url1">百度</a>
    <div v-bind:title="msg">
        div
    </div>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            url1: "https://www.baidu.com",
            url2: "https://www.taobao.com",
            url3: "https://www.jd.com",
            msg: "123",
            imgUrl: './1111.png'
        }
    })
</script>

</body>
</html>

1.4.2 V-model: 双向绑定

v-model: 双向绑定, (只能用于表单元素的value值)
建立一个双向绑定关系, 相互引用, 相互影响

1.4.3 V-on: 监听事件

V-on: 监听一个事件, 触发到Vue对象中去

进一步简写成 @

<body>
<div id="root">
    <!-- <button v-on:click="f">click</button> -->
    <button @click="f">click</button>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "chaos is the ladder"
        },
        methods: {
            f: function () {
                alert(this.msg)
            }
        }
    })
</script>
</body>

1.4.4 Inner

V-text
V-html

<body>
<div id="root">
    <span v-text="msg"></span>
    <div v-text="msg1"></div>
    <div v-text="msg2"></div>
    <div v-html="msg2"></div>
    <div v-html="msg3"></div>
    <div v-text="msg3"></div>
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            msg: "chaos is the ladder",
            msg1: "suk",
            msg2: "flower",
            msg3: "<b>flower</b>"
        }
    })
</script>

在这里插入图片描述

1.4.5 V-show: 隐藏和显示

v-show: 可以根据真和假做到隐藏或者显示

<body>
<!--v-show: 可以根据真和假 做到隐藏或者显示-->
    <div id="root">
        <div v-show="1==1">
           表达式
        </div>
        <div v-show="bool">
            v-show
        </div>
        <button v-on:click="chagebool">点击</button>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                bool: false
            },
            methods: {
                chagebool: function () {
                    this.bool = !this.bool
                }
            }
        })
    </script>
</body>

1.4.6 V-if: 分支语句

V-if
V-else
V-else-if

<body>

   <div id="root">
       <div v-if="1==1">
           v-if
       </div>

       <div v-if="bool1">
           v-if
       </div>
       <div v-else-if="bool2">
           v-else-if
       </div>
       <div v-else>
           v-else
       </div>
   </div>
   <script>
       new Vue({
           el: "#root",
           data: {
               bool1: false,
               bool2: true
           }
       })
   </script>

</body>

注意:
v-show如果不显示,依旧在dom树上存在, 只是通过css把对应标签显示隐藏起来
v-if分支中, 如果不满足条件, 不显示的话, 是不会加载到dom树上去的

1.4.7 V-for: 循环

V-for
增加li和删除li：

<body>

        <div id="root">


            <ul>
                <li v-for="(item, index) in list" v-bind:key="index" @click="deleteli(index)">
                    {{item}}--{{index}}
                </li>
            </ul>
            <input v-model:value="inpustr"><button @click="addli">添加</button>
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    list: ["zs", "ls", "wu", "zl", "zs"],
                    inpustr: ''
                },
                methods: {
                    addli: function () {
                       this.list.push(this.inpustr)
                        this.inpustr= ""
                    },
                    deleteli: function (index) {
                        // alert(index)
                        this.list.splice(index, 1)
                    }
                }
            })

        </script>

</body>

注意1: 如果v-for循环遍历一个内容, 那么会渲染出多个v-for语法所在的标签
比如如下: 把v-for写在li标签上, 那么如果list数组有x个元素, 那么就会渲染出x个li标签

在这里插入图片描述

注意2:

对于v-for循环遍历, 每一个遍历出来渲染的标签, 都必须有唯一的key
这个key不是给我们用的(指程序员)
key的作用：标记谁需要重新加载, 比如一个内容很多的页面，你对一个内容点了不感兴趣，页面就将其删除，只重新渲染这一部分就好，用key来标识哪一部分需要重新渲
key一般也不会用下标，而是后端给的id，id一般是数据库的标识

注意3:
在这里插入图片描述

1.4.8 V-pre: 阻止预编译

<body>
    <div id="root">
        {{msg}}
        <div v-pre>
            {{msg}} ----{{aaa}}
        </div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                msg: "zs"
            }
        })
    </script>

</body>

在这里插入图片描述

1.4.9 V-once: 只编译一次

1.4.10 V-cloak

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        [v-cloak]{

            /*
            js没有加载出来，不希望用户看到插值表达式，像Googlefont的bug那样，所以隐藏起来
             */
            display: none;
        }

        .div1{
            font-size: 100px;
            background: #ffc7bb;
        }
    </style>
</head>
<body>

<!-- 	V-cloak: 延迟加载-->
    <div id="root">

        <div v-cloak class="div1">
            {{msg}}
        </div>

    </div>
    <script>

        setTimeout("f()", 5000)
        function f() {
            new Vue({
                el: "#root",
                data: {
                    msg: "zs"
                }
            })
        }
    </script>

</body>
</html>

Java -> class --> jar war

Vue项目 --> 一个html页面, 多个css 多个js文件
Nuxt -->服务端渲染

1.5 计算属性:

不常用: 一般用到一些, 依赖于别的数据, 又自己本身几乎不会修改的场景
计算属性: (注意是个属性), 计算属性是通过别的属性计算而来, 依赖于别的属性而存在

computed: 指的是一个属性通过其他属性计算而来。

1.6 侦听器/监听器

watch: 监听一个属性的改变, 当属性改变的时候触发事件

1.7 模板和组件

思想

1.7.1 模板

template: 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略.

把一切东西都转到Vue对象中管控起来( 参数, 方法, html)

1.7.2 组件

component: 在Vue中, 一个Vue对象就是一个组件

在这里插入图片描述

1.8 生命周期

什么是生命周期: 在这个地方一个Vue对象从创建到消亡的过程
创建挂载修改销毁

都是异步.

beforeCreate
Created ：这个时候去后台取数据
beforeMount
Mounted :挂载，html代码、js代码、对象，加载到DOM树上，这叫挂载。
beforeUpdtae
Updated
beforeDestroy
destoryed

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>


    <div id="root">
        {{msg}}
        <input v-model:value="msg">
    </div>
    <script>
        var root = new Vue({
            el: "#root",
            data: {
                msg: "zs"
            },
            beforeCreate:function () {
                console.log("控制台打印:beforeCreate")
            },
            created:function () {
                console.log("控制台打印:created")


            },
            //挂载，就本例子来说，Vue对象和div代码块建立联系就叫挂载
           //挂载之前是{{msg}}
            beforeMount:function () {
                //页面还未被渲染
                console.log(this.$el),
                    console.log("控制台打印:beforeMount")
            },
            mounted:function () {
                //页面渲染完成
                console.log(this.$el),
                    console.log("控制台打印：mounted")
            },
            beforeUpdate:function () {
                console.log("控制台打印：beforeUpdate")
            },
            updated:function () {
                console.log("控制台打印：updated")
            },
            beforeDestroy:function () {
                console.log("控制台打印：beforeDestory")
            },
            destroyed:function () {
                console.log("控制台打印：destroyed")
            }
        })

    //常用的只有：created和mounted，一般用于初始化数据的时候
    //浏览器请求页面的时候，html页面是一个空的页面（没数据），数据得去后端取，
    //Vue对象控制去后端取数据，调用浏览器发请求。
    //什么时候取，created创建的时候和挂载的时候。
    //取出来放在data里面去显示它


    </script>

</body>
</html>

在这里插入图片描述

p-坚持

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java学习 day38_vue

1 VueJQuery在当下时代:前端 --> 三个基础:html,css,js三个框架: vue, react, Angular所有的页面: 都可以直接用html css js 直接实现所有的前端基础/框架都是基于html css jsVue开发者: 尤雨溪量级: Angular > react > Vue原生开发: 贴近于底层语言的开发，如果app要更新功能，用户就必须更新app成本高稳定/运行高速前端:混合开发: 原生技术 + 前端，大部分的ap
复制链接

扫一扫