Vue

最新推荐文章于 2023-06-22 21:19:47 发布

十二分热爱

最新推荐文章于 2023-06-22 21:19:47 发布

阅读量294

点赞数

分类专栏： JAVA

本文链接：https://blog.youkuaiyun.com/weixin_41988545/article/details/106719303

版权

JAVA 专栏收录该内容

57 篇文章

订阅专栏

Vue的定义:

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

渐进式:从核心到完备的全家桶(需要什么引用什么)
Vue本身语法内容并不多, 生态是很庞大的

增量:从少到多,从一页到多页,从简单到复杂

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

V-bind：单向绑定

<!--v-bind: 单向绑定
        把vue对象中data里的值,绑定到html对应是属性上去, 赋值给对应的属性-->

<div id="root">
    {{msg}}
    {{inputStr}}
    <div v-bind:title='aaa'>
        我是一个div
    </div>
    <div :title='aaa'>
        我是一个div
    </div>
    <input v-bind:value="inputStr">

</div>

<script>
    new Vue({
        el: "#root",
        data: {
            msg: 1234,
            aaa: '我是一个vue对象中的值',
            inputStr: 'inputStr...'
        }
    })
</script>

V-model：双向绑定

1, 和v-bind作用相同, 去对应的vue对象里的data取值, 把取到的值赋值给所绑定的对象
2, v-model绑定的参数,  当这个参数(在html中)发生改变的时候, 他会同时去修改对应vue对象中data里面所对应的值

注意: 双向绑定v-model:  一般用于表单元素的value属性

<div id="root">
    {{msg}}
    <input v-bind:value="msg">

    <input v-model:value="msg">
    <input v-model="msg">

    <select v-model="msg">
        <option value="123">123</option>
        <option value="321">321</option>
    </select>
</div>

<script>
   new Vue({
       el: '#root',
       data: {
           msg: 123
       }
   })


</script>

V-text v-html

类似于dom操作中的 innerText innerHTML

V-on:事件监听

把监听到的事件, 触发到 对应vue对象的methods里面去
<!-- vue中没有onclick -->
<!--注意1:  在vue中, 如果要在方法或者别的钩子函数里, 要访问data里的值,  
            要通过  this.参数名  来访问
            这个this 就是指代这个vue对象-->

<div id="root">
    {{msg}}
<!--    <button onclick="f1()">点击</button>-->
    <input v-model="aaa">
    <button v-on:click="f1">点击</button>
    <button @click="f1">点击</button>
</div>

<script>
    new Vue({
        el: '#root',
        data: {
            msg:123,
            aaa: ''
        },
        methods:{
           f1: function () {
               this.msg = this.aaa
           }
        }
    })
</script>

V-show：

<div id="root">

    <div v-show="bool">
        我是一个div
    </div>

    <div v-show="msg=='1234'">
        我是一个div
    </div>

    <div v-show="'123'">
        我是一个div123
    </div>

    <button @click="change1">隐藏和显示</button>

</div>
<script>
    new Vue({
        el:'#root',
        data: {
            bool: false,
            msg: '123'
        },
        methods: {
            change1: function () {
                this.bool = !this.bool
            }
        }
    })
</script>

V-if:

v-if和v-show的区别:  
v-if逻辑中,如果不满足加载条件, 那么该元素不会挂载到dom树上去.  但是v-show 无论显示与否, 都会挂载到dom树上,是不过会显示和不显示

<div id="root">

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

V-for:

<!--注意1: 循环渲染的,到底是什么?
            循环渲染的, 是v-for这个指令所在的html元素-->

<!--注意2: v-for指令必须要和 :key配套出现
            并且key值唯一, 不可重复

            (aaa, index) in list"
            index代之循环遍历的下标-->

<!--
    注意3:  v-for 这个循环, 可以用 of/in 两种形式来循环
-->

<div id="root">
    <div v-for="(aaa, index) of list"   :key="index">
        {{aaa}}--{{index}}
    </div>


    <div v-for="item in list2" :key="item.id">
        <img :src="item.src">
    </div>

    <button @click="f1">点击</button>

</div>
<script>
    new Vue({
        el:'#root',
        data:{
            list: ['1', '22', '333', '4444'],
            list2: [{
                id: 1,
                src: '1111.png'
            },
                {
                    id: 2,
                    src: '2222.png'
                }
            ]
        },
        methods: {
            f1: function () {
                this.list2[0].src = '1234.png'
            }
        }
    })

</script>

V-pre:

v-pre可以用来阻止预编译，有v-pre指令的标签内部的内容不会被编译，会原样输出。

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

V-cloak：

延迟显示。
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 标签直到实例准备完毕

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        [v-cloak]{
            /*display: none;*/
            font-size: 100px;
            background: red;
        }
    </style>
</head>
<body>

<div id="root">
    <div v-cloak>
        {{msg}}
    </div>

</div>
<script>
    // setTimeout  在多少毫秒秒之后,执行什么什么东西
    setTimeout('f()', 3000)

    function f() {
        new Vue({
            el:'#root',
            data:{
                msg: 4444
            }
        })
    }
</script>

V-once：

只加载一次(只编译一次)

<div id="root">
    <div v-once>
        {{msg}}
    </div>

    {{msg}}
    <input v-model="msg">

</div>
<script>
  new Vue({
      el: '#root',
      data: {
          msg: 123
      }
  })
</script>

案例：

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

<div id="root">
    <div v-for="(item, index) in list" :key="index" @click="delete1(index)">
        {{item}}
    </div>
    <input v-model="inputstr"><button @click="add">添加</button>
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            list: ['123', '456', '789'],
            inputstr: ''
        },
        methods: {
            add: function () {
                this.list.push(this.inputstr)
                this.inputstr = ''
            },
            delete1: function (parm) {
                this.list.splice(parm, 1)

            }
        }
    })
</script>
<!--  有时候 某些形式修改list的时候, v-for是不会重新渲染的   -->
</body>
</html>

1.6计算属性：

一个属性是通过别的属性计算而来, 是个属性(虽然看起来, 看起来像个方法, 但是外在表现是个属性)

计算属性所计算的时机:  当它依赖的属性发生变化的时候, 那么它就会重新计算

不是存在于data里的一个参数, 存在computed

<div id="root">

    数1: <input v-model="num1"><br>
    数2: <input v-model="num2"><br>
    和: {{sum}}


    <button @click="aaa">点击</button>
</div>
<script>

    new Vue({
        el: '#root',
        data: {
            num1: 0,
            num2: 0

        },
        computed: {
            sum: function () {
                return this.num1 + this.num2
            }
        },
        methods: {
            aaa: function () {
                alert(this.sum)
            }
        }
    })

</script>

1.7监听器：

监听器, 侦听一个vue对象中属性的变化, 然后触发一些操作

Watch:  是vue对象的一个固有属性, 里面写侦听器
注意: 我们如果想侦听那个参数发生改变, 侦听器的方法名就是该参数

watch: {
    msg: function () {
        this.changetimes ++
    }
}

<div id="root">
    改变次数: {{changetimes}}<br>
    {{msg}}
    <input v-model="msg">
</div>
<script>
    new Vue({
        el:'#root',
        data: {
            msg: 12,
            changetimes:0
        },
        watch: {
            msg: function () {

                this.changetimes = this.changetimes +2
            }
        }
    })

</script>

1.8模板：

Template:  模板是vue对象(此时此刻写法) 是一个以标签包裹的html代码块
模板会替换挂载的元素

一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略(除非模板的内容有分发插槽 v-solt)。

new Vue({
    el:'#root',
    template: '<div>567</div>',
    data: {
        msg: 123
    }
})

<div id="root">
    {{msg}}
</div>

<script>
    new Vue({
        el:'#root',
        template: '<div>567--{{msg}}</div>',
        data: {
            msg: 123
        }
    })
</script>

1.9组件：

把一个整体的东西拆分成不同的东西, 
表现在我们前端里, 就是把一个页面拆分成不同的分块来实现
表现在我们vue里, 把一个页面, 拆分成多个vue对象来实现
在vue中更深层次的表现, 就是,把一个页面关联成一个vue对象(入口对象), 这个对象有一系列子对象(子对象通过某种途径和入口对象建立引用关系), 构建出一种类似于dom树结构, 组件树(对象树)

组件: 在vue中就是vue对象

全局组件：

<div id="root">
    <aaa></aaa>
    <bbb></bbb>
    <ccc></ccc>
</div>


<script>
    // 全局组件:  直接注册一个vue对象, 在vue域里面使用
    // 通过Vue.component创建出一个vue对象, 给这个vue对象起一个名字
    // 那么, 我们在vue域里面就可以直接使用以该对象名字为标签的组件
    Vue.component( 'aaa', {
        template: '<div>111</div>'
    })
    Vue.component( 'bbb', {
        template: '<div>222</div>'
    })
    Vue.component( 'ccc', {
        template: '<div>333</div>'
    })

   new Vue({
       el: '#root',
       data: {

       }
   })
</script>

局部组件：

<div id="root">
    <abc></abc>
    <b-bb></b-bb>
    <ccc></ccc>
</div>

<script>

    // 局部组件:  局部起作用, 必须要在别的vue对象中引入它,, 它才具有vue对象的意义
    // 声明的时候这就是一个普普通的js对象
    var aaa = {
        template: '<div>123</div>'
    }
    var bbb = {
        template: '<div>456</div>'
    }
    var ccc = {

        template: '<div>789</div>'
    }
    new Vue({
        el: '#root',
        components: {
            // 经过这一步, 就把一个js对象变成了一个vue对象
            // 如果组件名存在大写字符, 那么使用的时候把除首字母之外的大写字母转化为  -小写  的模式
            abc: aaa,
            BBb: bbb,
            Ccc: ccc
        },
        data: {

        }
    })
</script>

组件间传值: 向下(父组件传给子组件)传值：

Props
v-bind :  单向绑定

传值: 
 至少要分两步,  
第一步:递(父组件, 传递通过v-bind)   
 第二步: 接收(子组件接收, 通过 props)

组件间传值: 向上(子组件传递给父组件)：

也要有两个动作:  
1: 子组件通知父组件:  emit
2: 父组件监听字组件:  自定义方法

案例1：
<div id="root">
<!--    接收子组件抛出方法(参数没有,或者一个的写法)-->
<!--    <aaa v-for="(item, index) in list"-->
<!--         :key="index"-->
<!--         v-bind:bbb="item"-->
<!--         @ccc="delete1"-->
<!--    ></aaa>-->


    <aaa v-for="(item, index) in list"
         :key="index"
         v-bind:bbb="item"
         @ccc="delete1(arguments)"
    ></aaa>
</div>
<script>
    Vue.component('aaa', {
        props: ['bbb'], // 不能修改
        template: '<div><div @click="click1">{{bbb}}</div></div>',
        methods: {
            click1: function () {
                // this.$emit('ccc', 1) // 传递一个参数
                this.$emit('ccc', 1, 2)
            }
        }
    })
    new Vue({
        el:'#root',
        data: {
            list: [ '1' , '2', '3', '4']
        },
        methods: {
            delete1: function (arguments) {
                console.log('父')
                console.log(arguments)
            }
        }
    })
</script>

案例2：
<div id="root">
<!--    接收子组件抛出方法(参数没有,或者一个的写法)-->
    <aaa v-for="(item, index) in list"
         :key="index"
         v-bind:bbb="item"
         v-bind:index="index"
         @ccc="delete1"
    ></aaa>
</div>
<script>
    Vue.component('aaa', {
        props: ['bbb', 'index'], // 不能修改
        template: '<div><div @click="click1">{{bbb}}--{{index}}</div></div>',
        methods: {
            click1: function () {
                this.$emit('ccc', this.index) // 传递一个参数
            }
        }
    })
    new Vue({
        el:'#root',
        data: {
            list: [ '1' , '2', '3', '4']
        },
        methods: {
            delete1: function (parm) {
                this.list.splice(parm, 1)
                console.log(parm)
            }
        }
    })
</script>