Vue3.X

最新推荐文章于 2024-08-26 19:09:35 发布

莫轩玉

最新推荐文章于 2024-08-26 19:09:35 发布

阅读量134

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/Xieeenciing/article/details/120945633

版权

基础

大部分是源码

注意：

注意：注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意 注意

引入外部：   <script src="https://unpkg.com/vue@next"></script>

指令

Vue         面向DOM编程 变成 面向数据编程

v-if = ""                           新的指令
v-on:                               用来绑定响应事件
v-for=“”                                循环数组的意思，循环出来
v-model=                绑定一个数据值，Vue重要一个的特性 数据双向绑定，一直变幻的

v-bind:                         相当于属性绑定，给动态的组件传值
props:[]                    （用v-bind一绑定相当于属性，属性可生成多个，它是一个数组），接收父组件传来的参数
v-html=
v-once                  一次渲染，类似不绑定Data了

e.preventDefault();                     阻止默认事件，e 是传的参数
或者@click.prevent="handBtn"  

total                       一般在methods(方法)的上面写计算属性（computed）

<tempalte>标签</tempalte>         业务逻辑标签

v-bind:title="message"      =====   :title="message"    // 简写方法

v-on:click="handClick"      =====    @click=""

v-for=“item of list”        意思是：把list的每一项都赋给item（自己取的名字）    
<li v-for="(item,index) of list">[{{index}}]{{item}}</li>          //index 索引    把索引打印出来

component("参数（组件名称），{template(模板):''}")     声明一个单独的组件，它是一个方法。 自定义组件

修饰符

 修饰符
            // prevent   阻止默认行为的修饰符   例：form表单里有默认行为
            // capture     改为捕获模式        捕获模式和冒泡模式对应 相反 
            //  .once       只运行一次
            // passive      关于性能 
            // <div @click.self="btnClick1">        // 除标签外的，div本身的元素才能触发
            // <button @click.stop="addClick">增加一位佳丽</button>         // .stop  阻止冒泡
                
 按键修饰符   
            //   常用的：   enter /tab/delete/esc/up/down/left/right
            // keydown  <input @keydown="函数名" />
            // 函数名(){
            //         console.log('keydown...')
            //     }
            // 例：<input @keydown.enter="keyDown" />  单指 按回车的时候

 鼠标修饰符： 
               left(默认左键) /right /middle(滚轮)

生命周期函数

    
    beforeCreate            在 实例生成之前会自动执行的函数
    created                 在 实例生成之后会自动执行的函数             
    beforeMount             在模板渲染完成之前执行的函数
    mounted                 生命周期函数 ,自动执行，在模板渲染完成之后执行的函数
    beforeUpdate            当data 中数据发生变化时，会立即自动执行的函数 
    updated                 当data 中数据发生变化时，页面重新渲染完成后，会自动执行的函数 

     beforeCreate() {       //  在 实例生成之前会自动执行的函数
                console.log("beforcreate")
       },  
      created() {             // /  在 实例生成之后会自动执行的函数
                console.log('created')
        },
      beforeMount() {        //  在模板渲染完成之前执行的函数
                console.log('beforMount')
       },
      mounted() {             // 生命周期函数 ,自动执行，在模板渲染完成之后执行的函数
                console.log("mounted") 
      },
      beforeUpdate() {            //     当data 中数据发生变化时，会立即自动执行的函数 
                console.log("beforeUpdata")
                console.log(document.getElementById('app').innerHTML)       // 渲染前
      },
      updated() {                 //     当data 中数据发生变化时，页面重新渲染完成后，会自动执行的函数 
                console.log("Updata ")
                console.log(document.getElementById('app').innerHTML)
       },

差值表达式：

{{差值表达式}}

初识Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello!</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        #app{
            font-size: 50px;
            color: crimson;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <a class="one" ></a>
    </div>
</body>
    <script>
        Vue.createApp({  // 创建一个Vue实例
            template:'<a>金玲清脆嗜血误，一生总被无情诉</a>'
        }).mount(".one")
    </script>
</html>

字面量


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        #app{
            font-size: 100px;
            text-align: center;
            color: crimson;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        Vue.createApp({
            data(){
                return{
                    counter:1
                }
            },      
            mounted(){          // 生命周期 ，自动执行
                setInterval(()=>{
                     this.counter+=1        // 一般在开发中用
                     //this.$data.counter+=1
                    //  document.getElementById('app').innerHTML(2)
                },1000)
            },
            template:'<div>{{counter}}</div>'  // 字面量
        }).mount("#app")

    </script>
</html>

显示隐藏文本

<button v-on:click="welcomeBtnClick">有顾客来</button>&nbsp;   # 点击事件和空格
v-if = ""                 新的指令

v-on:                           用来绑定响应事件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏文本!</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./assets/js/echarts.min.js"></script>
    <style>
        #app{
            font-size: 50px;
            color: crimson;
            text-align: center;
        }
        button{
            padding: 15px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <a class="one1">金玲清脆嗜血误，一生总被无情诉</a>
        <a class="one" ></a> <br>
    </div>
</body>
    <script>
        Vue.createApp({  // 创建一个Vue实例
            data(){
                return{
                    countent:'',
                    setMeal:'真空套餐 帝王套餐 夏日套餐 学生套餐',
                    isShowMeal:false
                }
            },
            methods:{       // 多个方法加S
                welcomeBtnClick(){
                    // alert("欢迎欢迎！")
                    this.countent="欢迎你的光临！贵宾一位"
                },
                byeBtnClick(){
                    // alert('拜拜')
                    this.countent="欢迎下次光临，下次真空套餐8折"
                },
                showOrHide(){
                    this.isShowMeal=!this.isShowMeal
                }
            },
            template:`
                <div>
                    <div>{{countent}}</div>
                    <button v-on:click="welcomeBtnClick">有顾客来</button>&nbsp; 
                    <button v-on:click="byeBtnClick">顾客离开</button>
                    <div>
                        <div v-if="isShowMeal">{{setMeal}}</div>
                        <button v-on:click="showOrHide">显示/隐藏套餐</button>
                    </div>
                </div>
            `
        }).mount(".one")
    </script>
</html>

Vue3列表和循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>佳丽列表</title>
    <script src="https://unpkg.com/vue@next"></script> 
    <style>
        ul{
            list-style: none;
        }
    </style>
</head>
<body>

        <div id="app"></div>

</body>
    <!-- <script>
        Vue.createApp({
            data(){
                return {
                    list:['1-小点点','2-小甜甜','3-小巧巧']
                }
            },
            template:`
                <div>
                    <ul>
                        <li v-for="(item,index) of list">[{{index}}]{{item}}</li>          
                    </ul>    
                </div>
            `

        }).mount("#one")


    </script> -->


        <!--  现在想点击按钮，就增加一位佳丽 -->
        <script>
            Vue.createApp({
                data(){
                    return {
                        // list:['1-小点点','2-小甜甜','3-小巧巧']
                        list:[],
                        inputValue:""
                    }
                },
                methods:{
                     handleAddItem(){
                         this.list.push(this.inputValue)
                         this.inputValue=''     // 面向数据编程
                     }

                },
                template:`
                    <div>
                        <input v-model="inputValue" />
                        <button v-on:click="handleAddItem">增加佳丽</buyyon>
                        <ul>
                            <li v-for="(item,index) of list">[{{index}}]{{item}}</li>   
                        </ul>    
                    </div>
                `
    
            }).mount("#app")
    
    
        </script>
</html>

组件化开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化开发</title>
    <script src="https:unpkg.com/vue@next"></script>
    <style>
        #app{
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
        }
        ul{
            list-style: none;
        }
        span{
            color: crimson;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app = Vue.createApp({     // const 声明app变量
            data(){
                return {
                     list:[],
                     inputValue:""
                }
            },
            methods:{
                handleAddItem(){
                    this.list.push(this.inputValue)
                    this.inputValue=''			// 输入后，input里什么都没有，归零
                },
            },
            template:`
                    <div>
                        <my-title />
                        <input v-model="inputValue" />
                        <button v-on:click="handleAddItem">增加佳丽</button>
                        <ul>
                            <my-beauty
                                v-for="(item,index) of list"
                                v-bind:item="item"
                                v-bind:index="index"
                            />
                        </ul>    
                    </div>
            
            `

        })              // template  模板的意思
        app.component('my-title',{
            template:`
                <h1 style="text-align:center">只为<span>浴</span>见你</h1>
            `                    
        })
        app.component('my-beauty',{
            props:['index','item'],
            template:`
                <li>[{{index}}]-{{item}}</li>
            `
        })

        app.mount("#app")       // 注意：要是mount在前，组件将不能用
    </script>
</html>

基础

1.基础语法

createApp({}).mount("#")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础语法</title>
    <script src="https:unpkg.com/vue@next"></script>
    <style>
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app = Vue.createApp({ 
            data() {
                return {
                    message:'jspang.com'        // 1.在这里定义了一个数据，也就是model
                }
            },
            template:`<a href="http://jspang.com">{{message}}</a>`  // 2. 定义一个模板 View
            // 定以后，Vue自动关联，    vm

        })      // Application  Vue.createApp   就是创建了一个Vue的应用
        
        // app.mount("#app")               // mount 挂载   
        const vm=app.mount("#app")          // 根组件
        console.log(vm)         //  mvvm       m model  v view  vm ViewModel    数据视图连接层
    </script>
</html>

2.生命周期函数-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期函数-1</title>
    <script src="../../two/Vue/vue.global.js"></script>
    <style>
        div{
            text-align: center;
            color: crimson;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
    // 生命周期函数：     在 某一时刻 会 自动执行 的函数

        const app = Vue.createApp({
            data() {
                return {
                    message:'莫轩玉'
                }
            },
            methods: {
                handBtnClick(){
                    alert("此生不悔入魔道")
                }
            },
            beforeCreate() {    //  在 实例生成之前会自动执行的函数
                console.log("beforcreate")
            },  
            created() {             // /  在 实例生成之后会自动执行的函数
                console.log('created')
            },
            beforeMount() {     //  在模板渲染完成之前执行的函数
                console.log('beforMount')
            },
            mounted() {             // 生命周期函数 ,自动执行，在模板渲染完成之后执行的函数
                console.log("mounted") 
            },
            template:`
                <h2>
                    <a v-on:click="handBtnClick">{{message}}</a>    
                </h2>
            `
        })  

        app.mount("#app")
    </script>
</html>

3.生命周期函数-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期函数-2</title>
    <script src="../../two/Vue/vue.global.js"></script>
</head>
<body>
   <div id="app"></div> 
</body>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    content:"内容"
                }
            },
            methods: {
                handClick(){
                    this.content = this.content=="魔道"?"莫轩玉":"魔道"  //
                }
            },
            beforeCreate() {
                console.log("beforeCreate")
            },
            created() {
                console.log("created")
            },
            beforeMount() {
                console.log('beforeMount')
            },
            mounted() {
                console.log('mounted')
            },
            beforeUpdate() {            //     当data 中数据发生变化时，会立即自动执行的函数 
                console.log("beforeUpdata")
                console.log(document.getElementById('app').innerHTML)       // 渲染前
            },
            updated() {                 //     当data 中数据发生变化时，页面重新渲染完成后，会自动执行的函数 
                console.log("Updata ")
                console.log(document.getElementById('app').innerHTML)
            },
            beforeUnmount() {           //  当Vue应用失效时，会自动执行的函数 
                console.log("beforeUmount")
                console.log(document.getElementById('app').innerHTML)
            },
            unmounted() {        //  当Vue应用失效时，且DOM完全销毁之后，会自动执行的函数
                console.log("unmounted")
                console.log(document.getElementById('app').innerHTML)
            },
            template:`
                <a v-on:click='handClick'> {{content}}</a>
            `
        })

        app.mount("#app")

        
    </script>
</html>

4.差值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>差值表达式</title>
    <script src="../../two/Vue/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app=Vue.createApp({
            data() {
                return {
                    // content:"<b>轩玉</b>",
                    message:"轩玉",
                    count:5
                }
            },
            methods: {
                handClick(){
                    this.message = this.message=='轩玉'? '魔道' : '轩玉'
                }
            },
            // template:`
            //     <div 
            //         v-on:click='handClick'
            //         v-html="content"
            //         v-once
            //     ></div>
            // `

            template:`
                <h2 v-bind:title='message' v-on:click='handClick'>{{message}}</h2>
                <h2>{{count>2?'大':'小'}}</h2>
                <h2>{{2+3}}</h2>
                <h2>{{'魔道'+'轩玉'}}</h2>
            `
        })

        app.mount("#app")
    </script>
</html>

5.模板动态参数和阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>[基础]模板动态参数和阻止默认事件</title>
        <script src="../../two/Vue/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message:"轩玉",
                    name:'title',       // 动态绑定
                    // event:'mouseenter'  鼠标滑落
                    event:'click'
                }
            },
            methods: {
                handClick(){
                    alert("魔道")
                },
                handBtn(e){
                    // e.preventDefault();     // 阻止默认事件
                    alert("已阻止")
                    
                }

            },
            template:`
                <h2 
                    :[name]="message"
                    @[event]="handClick"

                >
                {{message}}
                </h2>

                <form  action="https://jspang.com" @click.prevent="handBtn">
                    <button type="submit">提交</button>

                </form>
            `
        })

        
        const vm=app.mount("#app")

    </script>
</html>

6.模板中的条件判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板中的条件判断</title>
    <script src="../../two/Vue/vue.global.js"></script>
    <style>
        div{
            text-align: center;
        }
        .one{
            color: crimson;
        }
        .two{
            color: aqua;
        }
        .three{
            color: #f0f;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app=Vue.createApp({
            data() {
                return {
                    content:"轩玉"          // 用三元运算符 设置content的颜色
                }
            },
            methods: {
                handClick(){
                    this.content=this.content == "此生不悔入魔道"?"恩慈":"此生不悔入魔道"
                }
            },
            template:`
                <div>
                    <a @click="handClick" v-if="content=='轩玉'" class="one">{{content}}</a>
                    <a @click="handClick" v-else class="two">{{content}}</a>
                    </div>
                    `   
                // <a @click="handClick" v-if="content=='恩慈'" class="three">{{content}}</a>
            // :class="content=='恩慈'?'one':'two'"
        })

        const vm=app.mount("#app")
        // 使用v-if进行判断

    </script>
</html>

7.Vue中的计算属性-computed

price 单价 	
count 数量


一般在methods(方法)的上面写计算属性


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="../../two/Vue/vue.global.js"></script>
    <style>
        div{
            text-align: center;
            color: aqua;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 计算属性的特性，当计算属性依赖的内容发生改变时，才会重新执行计算。 -->
    <div id="app">

    </div>
    
</body>
    <script>
        const app= Vue.createApp({
            data() {
                return {
                    content:"忘羡",
                    price:10,
                    count:2 
                }
            },
            computed:{
                // 计算属性的特性，当计算属性依赖的内容发生改变时，才会重新执行计算。
                total(){
                    return  this.price  * this.count
                    // return  Date.now()
                }
            },
            methods: {
                handClick(){
                    this.content = this.content == "金铃清脆噬血误"?"一生总被痴情诉":"金铃清脆噬血误"
                },
                // 只要页面重新渲染，就会重新执行方法
                getTotal(){
                    // return  this.price * this.count;
                    return Date.now()
                },
                addCount(){
                    this.count++
                }
            },
            template:`
                <div>
                    <a v-on:click="handClick">
                        {{content}}    
                    
                    </a>
                </div>
                    <a>总和：{{total}}</a><br/>
                    <button @click="addCount">再买一个</button>
                `
            })
            // <a> 总和：{{ getTotal() }} </a>
            // <a>总和：{{price * count}}</a>
            
        const vm = app.mount("#app")
    </script>
</html>

8.Vue中的侦听器(监听器-watch)

使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听器-watch</title>
    <script src="../../two/Vue/vue.global.js"></script>
    <style>
        div{
            text-align: center;
            color: aqua;
            font-size: 50px;
        }
        .one{
            color: cyan;
        }
        .two{
            color: crimson;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    content:'加油',
                    price:10,
                    count:2,  
                    newTotal:20
                }
            },
            watch:{
                count(current,prev){
                    // console.log('count changed')
                    // console.log('现在的值',current)
                    // console.log('以前的值',prev)

                    this.newTotal=this.price * current
                },
                price(){
                    console.log('price changed')
                }
            },
            computed:{
                total(){
                    // console.log("...count changed")
                    return this.price * this.count
                }
            },
            methods: {
                handClick(){
                    this.content=this.content == "轩玉"?"魔道":"轩玉"
                },
                getTotal(){
                    this.count++
                },
                getPrice(){
                    this.price++
                }
            },
            template:`
            <div>
                <a @click="handClick" v-if="content=='加油'" class="two"> {{content}}</a>
                <a @click="handClick" v-else="content=='轩玉'" class="one"> {{content}}</a>
                <h2> 总和:{{newTotal}}</h2>
                <button @click="getTotal">再买一个</button>
                <button @click="getPrice">涨价</button>
            </div>
            `
        })

        const vm = app.mount("#app")
    </script>
</html>

9.模板样式绑定-1初识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板样式绑定-1初识</title>
    <script src="../../two/Vue/vue.global.js"></script>
    <style>
        h2{
            text-align: center;
        }
        .one{
            background-color: #f3f;
        }
        .two{
            color: aqua;
        }
        .three{
            color: crimson;
        }
        .four{
            background-color: #3f3;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    classString:'two',
                    classObject:{one:true,three:true},    // 绑定对象的形式, true 或 false
                    classArray:['four',{three:true}]            // 绑定数组的样式,可以嵌套个对象进来
                }
            },
            template:`
                <h2 :class="classString"> jspang.com </h2>
                <h2 :class="classObject"> jspang.com </h2>
                <h2 :class="classArray"> jspang.com </h2>
            `

        })

        const vm = app.mount("#app")
    </script>
</html>

10.模板样式绑定-2进阶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板样式绑定-2进阶</title>
    <script src="../../two/Vue/vue.global.js"></script>
    <style>
        body{
            height: 1200px;
            font-size: 35px;
            text-align: center;
        }
        .red{
            color: red;
        }
        .aqua{
            color: aqua;
        }
        .back{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="app">

    </div>
</body>
    <script>
        const app= Vue.createApp({
            data() {
                return {
                    classString:'red',
                    classObject:{red:true,back:true},       // object 对象
                    classArray:['aqua','back'],
                    styleString:"color:orange;",
                    styleObject:{                       // 个人来说：比上面 true 好
                        color:'red',
                        background:'aqua'
                    }
                }
            },
            template:`
                <h2 :class="classArray"> 努力 </h2>
                <h2 style="color:#f3f;"> 坚持 </h2>
                <h2 :style='styleString'> 奋斗 </h2>
                <h2 :style='styleObject'> 半醒半醉日复日，花落花开年复年 </h2>
                <sonCom class="red"/>
            `
        })
        //  component 组件  (子组件的名称，{以对象的形式定义，制定一个模板})	自定义组件
        app.component('sonCom',{
            template:`
                <div>但愿老死花酒间，不愿鞠躬车马前；</div>
            `
        })               


        const vm = app.mount("#app")
    </script>
</html>

11.v-show和v-if的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show和v-if的区别</title>
    <script src="../../two/Vue/vue.global.js"></script>
    <style>
        body{
            height: 1200px;
            font-size: 35px;
            text-align: center;
        }
        .red{
            color: red;
        }
        .aqua{
            color: aqua;
        }
        .back{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    content:"加油各位！",
                    show:false
                }
            },
            methods: {


            },              //  V-if 更加灵活
            template:`
                <h2 v-show="show"> {{content}}  </h2>
                <h2 v-if="show"> 加油干</h2>    
            `

        })

        const vm = app.mount("#app")
    </script>
</html>

12.v-for列表循环详细讲解-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for循环</title>
    <script src="../../two/Vue/vue.global.js"></script>
    <style>
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    listArray:['坚持','我也不怕生命随你流浪','跨越更遥远的光年','奋斗'],
                    inputValue:'',
                    listObject:{
                        beautyone:'小点点',
                        beautytwo:"小甜甜",
                        beautythree:"小巧巧"
                    }
                }
            },
            methods: {
                handClick(){
                    this.listArray.push(this.inputValue)
                    this.inputValue=""
                }
            },
            // 不加key 整个列表要渲染 加key只增加数据 不从新渲染
            //  v-for 除了循环列表，还可以循环对象，和列表相比参数是不同的
            template:`
                <ul>
                    <input  v-model="inputValue"/>
                    <button @click="handClick">添加</button>
                    <li 
                        v-for="(item,index) in listArray"
                        :key="index+item"
                    
                    >
                        
                        [{{index}}]{{item}} 
                        
                    </li>    
                </ul>
                <ul>
                    <li 
                        v-for="value,key,index in listObject"
                        :key="key"
                    >
                        [{{index}}]{{key}} {{value}}
                    </li>    
                </ul>
                
            `

        })

        const vm = app.mount("#app")
    </script>
</html>

13.v-for列表循环详细讲解-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环-2</title>
    <script src="../../two/Vue/vue.global.js"></script>
    <style>
        body{
            text-align: center;
            font-size: 35px;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    listString:['坚持','努力','奋斗'],
                    listObject:{
                        beauty1:"明天",
                        beauty2:"会",
                        beauty3:"更好"
                    },
                    inputValue:""    
                }
            },
            methods: {
                handClick(){
                    this.listString.push(this.inputValue)
                    this.inputValue=""
                }
            },
            template:`
                <ul>
                    <input v-model="inputValue" />
                    <button @click="handClick">添加</button>
                    <template v-for="(item,index)  in listString"
                            :key="key+item">
                        <li 
                            
                            v-if='item != "努力" '
                        >
                            [{{index}}] {{item}} 
                        
                        </li>
                    </template>
                    
                </ul>
                <ul>
                    <li  v-for="(value,key,index) in listObject" >[{{index}}] {{value}}</li>
                    
                </ul>

                <span v-for="count in 99"> {{count}} | </span>
            `

        })

        const vm = app.mount("#app")
    </script>
</html>

14.绑定事件详讲-方法和参数

event.target 得到我们的dom元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件详讲--方法和参数</title>
    <script src="../../two/Vue/vue.global.js"></script>
    <style>
        body{
            font-family: 'Courier New', Courier, monospace;
            font-size: 35px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app= Vue.createApp({
            data(){
                return{
                    content:"十年生死两茫茫",
                    count:0
                }
            },
            methods:{
                addClick(num,event){
                    this.count+=num,
                    console.log(event.target)
                },
                btnClick1(){
                    alert(1)
                },
                btnClick2(){
                    alert(2)
                }
            },
            template:`
                <h2>{{content}} </h2>
                <hang/>
                <div>现在的佳丽 {{count}}.</div>
                <button @click="btnClick1(),btnClick2()">增加一位佳丽</button>

            `   
            // <button @click="btnClick1(),btnClick2()">增加一位佳丽</button>   想要同时调用两个函数，触发两个事件，必须要带括号（即使没有参数），
            // <button @click="addClick(2,$event)">增加一位佳丽</button>
            // <button @click="addClick">增加一位佳丽</button>
        })
        app.component('hang',{
            template:`
                <h2>自定义组件</h2>
            `
        })

        const vm = app.mount("#app")
    </script>
</html>

15.绑定事件详讲-事件修饰符

比上面的重，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件详讲--方法和参数</title>
    <script src="../../two/Vue/vue.global.js"></script>
    <style>
        body{
            font-family: 'Courier New', Courier, monospace;
            font-size: 35px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app= Vue.createApp({
            data(){
                return{
                    content:"十年生死两茫茫",
                    count:0
                }
            },
            methods:{
                addClick(){
                    this.count++
                },
                btnClick1(){
                    alert(1)
                }
            },
            // 冒泡，先弹出1，后增加一位佳丽
            template:`
            <div @click.capture="btnClick1">
                    除标签外的，div本身的元素
                <h2>{{content}} </h2>
                <hang/>
                <div>现在的佳丽 {{count}}.</div>
                <button @click="addClick">增加一位佳丽</button>
            </div>
            `  
            // 修饰符
            // prevent   阻止默认行为的修饰符   例：form表单里有默认行为
            // capture     改为捕获模式        捕获模式和冒泡模式对应 相反 
            //  .once       只运行一次
            // passive      关于性能 
            // <div @click.self="btnClick1">        // 除标签外的，div本身的元素才能触发
            // <button @click.stop="addClick">增加一位佳丽</button>         // .stop  阻止冒泡

        })
        app.component('hang',{
            template:`
                <h2>自定义组件</h2>
            `
        })

        const vm = app.mount("#app")
    </script>
</html>

16.绑定事件详讲-键盘and鼠标修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo21</title>
    <script src="https://unpkg.com/vue@next" ></script>
    <style>
        body{
            font-size: 35px;
            font-family: 'Courier New', Courier, monospace;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
    data(){
        return{

        }
    },
    methods:{
        keyDown(){
            console.log('keydown...')
        },
        handClick(){
            alert("click")
        },
        riClick(){
            alert("借问人间 知我者能有几")
        }
    },
    template:`
        <div>
            <input @keydown.enter="keyDown" />
            <div @click="handClick"> 魔道轩玉 </div>
            <div @click.right="riClick"> 恩慈 </div>
        </div>
        ` 
    }) 
    // 按键修饰符   
    //   常用的：   enter /tab/delete/esc/up/down/left/right
    // keydown  <input @keydown="函数名" />
    // 函数名(){
    //         console.log('keydown...')
    //     }
    // 例：<input @keydown.enter="keyDown" />  单指 按回车的时候

    // 鼠标修饰符：left(默认左键) /right /middle(滚轮)
        
    const vm=app.mount("#app")

</script>

</html>

17.表单的双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input的双向数据绑定</title>
    <script src="https://unpkg.com/vue@next" ></script>
    <style>
        body{
            text-align: center;
            font-size: 45px;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        const app=Vue.createApp({ 
        data(){
            return{
                name:" ",
                checked:false,
                beauty:[],
                girls:''
            }
        },
        methods:{

        },
        template:`
            <div> {{name}} </div>

            <div><input v-model="name" /></div>

            <div><textarea v-model="name" /></div>
            
            <div>
                {{checked}}
                <input type="checkbox" v-model="checked" />
            </div>

            <div>
                {{beauty}}   
                小点点<input type="checkbox" v-model="beauty"  value="小点点" /> 
                小甜甜<input type="checkbox" v-model="beauty" value="小甜甜"  /> 
                小巧巧<input type="checkbox" v-model="beauty" value="小巧巧"  /> 
            </div>

            <div>
                [{{girls}}]   
                小点点<input type="radio" v-model="girls"  value="小点点" /> 
                小甜甜<input type="radio" v-model="girls" value="小甜甜"  /> 
                小巧巧<input type="radio" v-model="girls" value="小巧巧"  /> 
            </div>
            
            ` 
        }) 
        // checkbox  复选框
            // <div>
            //     {{beauty}}   
            //     小点点<input type="checkbox" v-model="beauty"  value="小点点" /> 
            //     小甜甜<input type="checkbox" v-model="beauty" value="小甜甜"  /> 
            //     小巧巧<input type="checkbox" v-model="beauty" value="小巧巧"  /> 
            // </div>

        //          单选框  
            // <div>
            //     [{{girls}}]   
            //     小点点<input type="radio" v-model="girls"  value="小点点" /> 
            //     小甜甜<input type="radio" v-model="girls" value="小甜甜"  /> 
            //     小巧巧<input type="radio" v-model="girls" value="小巧巧"  /> 
            // </div>

        const vm = app.mount("#app")

    </script>
</html>

18.表单的双向数据绑定-2修饰符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo23</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                checked: true,
                name:'请选择',
                message:''
            }
        },
//      .lazy
        template: `
        <div>{{checked}}<input type="checkbox" v-model="checked" /></div>
        <div>
            {{name}}
            <input 
                type="checkbox" 
                v-model="name"  
                true-value="魔道"
                false-value="轩玉"
            />    
        </div>

        <div>
            {{  message}}
            <input v-model.="message" />    
        </div>

        `

    })
                // 
                // true-value="魔道"
                // false-value="轩玉"

                // 双向绑定的修饰符：
                    //  lazy（懒）
                // 这时候当你在文本框中输入任何内容的时候，插值表达式会跟着改变。
                // 如果你不想马上显示，就可以用lazy修饰符，这样就可以实现当输入完成后，失去焦点再进行改变。
                // <div>
                //     {{message}}
                //     <input v-model.lazy="message" />    
                // </div>

                    // number
                    // 看的是第一个值
                    // 加上number修饰符后，你输入的值只要是数字，就变成了number类型。（也就是说，如果你输入的是字母，它还会是字符串类型）
                    // <div>
                    //     {{ typeof message}}
                    //     <input v-model.number="message" />    
                    // </div>

                // trim修饰符，用来消除input框输入内容<前面和后面>的空格的。

    const vm = app.mount("#app")

</script>

</html>

建议

methods、watch和computed

三者使用优先级:

	computed 和 methods 都能实现的功能，建议使用computed，因为有缓存，不渲染页面就刷新。
	
	computed 和 watch 都能实现的功能，建议使用computed，因为更加简洁

v-if、v-show

如果显示和隐藏切换的比较频繁，经常进行切换，建议使用 v-show 因为 并没有重新渲染，而只是控制CSS样式，来进行显示隐藏

v-for、v-if

当v-for、v-if	在同一个标签的时候，v-for的优先级会高于v-if，这时候判断就会失效

莫轩玉

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3.X

基础大部分是源码注意：注意：注意注意注意注意注意注意注意注意注意注意注意注意注意注意注意注意注意注意注意注意注意注意注意注意引入外部： <script src="https://unpkg.com/vue@next"></script>指令Vue 面向DOM编程变成面向数据编程v-if = "" 新的指令v...
复制链接

扫一扫