Vue知识总结(从v-bind到插槽slot)

软件开发技术局

已于 2023-11-30 22:34:29 修改

阅读量287

点赞数

文章标签： vue.js 前端 javascript

于 2023-11-04 11:05:29 首次发布

本文链接：https://blog.csdn.net/qq_60567426/article/details/134215522

版权

1：标签的单向绑定使用"v-bind:"，其缩写为":"，使用单项绑定的目的是，给标签属性赋值能够赋予js表达式的值，而不是将其默认为一个字符串，相当于"url"需要解析成data中的url。双向绑定使用"v-model:value"，其缩写为"v-model="，双向绑定绑定的是表单型事件，例如输入框、单选、复选等具有value和支持用户交互的组件，默认与这些组件的value进行绑定，因此v-model后面直接跟=就行了。

2：{{}}语法是将里面里面的内容当作js表达式，并最终转化为data中的某个键的值或者检测是否属于js自带的某个函数。不能使用data.xx，因为Vue默认从data里面开始找，因此这是多余且会报错的。

3：<div id="root">是创建一个容器，之后使用new Vue创建了一个Vue对象，并使用"el:#root"将Vue挂在到该容器上。意味着在该容器中写的所有东西都能够支持Vue的语法。如果不写容器或者创建Vue对象，相当于跟Vue毫无关系。Vue的脚手架，会自动在index.html创建id为app的容器，以及创建一个Vue对象挂载到该app上。不过其挂载方式不是使用el的挂载方式，而是采用new Vue({}).$mount('#app')，这种方式与el的效果一样。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>初识Vue</title><script type="text/javascript" src="./js/vue.js"></script></head>
<body>


<div id="root">
    <h1>Hello,{{address}},{{Date.now()}}</h1>
    <!--单向数据绑定-->
    <a :href="url">点我去学习</a>
    <!--双向数据绑定-->
    <input type="text" v-model:value="name">
</div>



<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            name:'尚硅谷',
            address:'上海',
            url:'http://www.baidu.com'
        }
    })
</script>

</body>

</html>

4：Object.defineProperty()可以为创建的let定义属性，并增加配置项，例如enumerable可以修改该属性是否可被枚举，writable修改增加的属性是否可被修改,configurable控制属性是否能被删除。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>初识Vue</title><script type="text/javascript" src="./js/vue.js"></script></head>
<body>


<script type="text/javascript">

    let number=19
    let person={
        "name":'张三'
    }

    Object.defineProperty(person,'age',{
        //value:19,
        enumerable:true,
        writable:true,

        //当读取age属性的时候就会调用get函数
        get:function(){
            return number
        },
        
        //这里的value是用户修改属性后的值，而不是上面定义的value
        set(value){
            console.log('有人修改了age属性，且值是value');
            number=value
        }
    })

    console.log(person)
</script>

</body>

</html>

5：v-on:click创建一个触发事件，其缩写是@

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>初识Vue</title><script type="text/javascript" src="./js/vue.js"></script></head>
<body>


<div id="root">
    <button v-on:click="showInfo1">点我提示信息</button>
    <button @click="showInfo2(33,$event)">点我提示信息</button>
</div>



<script type="text/javascript">
    Vue.config.productionTip=false



    new Vue({
        el:'#root',
        data:{
            name:'尚硅谷'
        },
        methods:{
        showInfo1(event){console.log(event),alert('同学你好')},
        showInfo2(a,event){console.log(a),console.log(event)},
        }
    })
</script>

</body>

</html>

6：事件修饰符：

①prevent可以阻止跳转。

    <a href="http://www.baidu.com" @click.prevent="showInfo1">点我提示信息</a>

②stop可以阻止冒泡事件，避免嵌套发生重复事件


    <div @click="showInfo1">
        <button @click.stop="showInfo1">点我提示信息</button>
    </div>

③once意味着点第一次有效果可以触发事件，第二次就不行了。

    <button @click.once="showInfo1">点我提示信息</button>

7：姓+名的组合

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>初识Vue</title><script type="text/javascript" src="./js/vue.js"></script></head>
<body>


<div id="root">
    姓：<input type="text" v-model="firstName"><br/>
    名：<input type="text" v-model="lastName"><br/>
    姓名：<span>{{fullName()}}</span>
</div>


</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        methods:{
            fullName(){
                return this.firstName+'-'+this.lastName
            }
        }

    })
</script>

</html>

8：计算属性

Vue认为data里面的是属性，computed是计算属性，是通过已有的属性(data里面的)计算得来的，计算属性需要用get方法和set方法来读。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>初识Vue</title><script type="text/javascript" src="./js/vue.js"></script></head>

<body>


<div id="root">
    姓：<input type="text" v-model="firstName"><br/>
    名：<input type="text" v-model="lastName"><br/>
    姓名：<span>{{fullName}}</span>
</div>


</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            fullName:{
                get(){
                    return this.firstName+this.lastName
                },
                //当fullName被修改的时候。调用set
                set(value){
                    const arr=value.split('-')
                    this.firstName=arr[0]
                    this.lastName=arr[1]
                }
            },
            //如果计算属性只有get，则可以用简写方式
            fullName(){
                    return this.firstName+this.lastName
            }
        }
    })
</script>

</html>

9：监视属性

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>初识Vue</title><script type="text/javascript" src="./js/vue.js"></script></head>

<body>
<div id="root">
    <h2>今天天气{{info}}</h2>
    <button @click="changeweather">切换天气</button>
    <hr/>
    <h3>a的值是:{{numbers.a}}</h3>
    <button @click="numbers.a++">点我让a+1</button>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            isHot:true,
            numbers:{
                a:1,
                b:1
            }
        },
        computed:{
            info(){
                return this.isHot ? '炎热':'寒冷'
            }
        },
        methods:{
            changeweather(){
                this.isHot=!this.isHot
            }
        },
        watch:{
            isHot:{
                immediate:true,
                handler(newValu,oldValue){
                    console.log('isHot被修改了',newValu,oldValue)
                }
            },
            // "numbers.a":{
            //     handler(value){
            //         console.log('a被修改了')
            // }
            //深度监视，deep可以查看属性内部的值是否被改变
            numbers:{
                deep:true,
                handler(){
                    console.log("numbers里面的值改变了")
                }
            }
        }
    })
</script>
</html>

10：条件渲染

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>初识Vue</title><script type="text/javascript" src="./js/vue.js"></script></head>

<body>
<div id="root">
    <h2 v-show="true">欢迎来到{{name}}</h2>
    <h2 v-if="true">欢迎来到{{name}}</h2>
    <template v-if="n===0">
        <h2>你好</h2>
        <h2>无语</h2>
    </template>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            name:"德莱联盟",
            n:0
        }
    })
</script>
</html>

11：列表渲染

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>初识Vue</title><script type="text/javascript" src="./js/vue.js"></script></head>

<body>

<div id="root">
    <!--面向模板编程的好处是不会破坏内部结构-->
    <template>
        <ul>
            <li v-for="person in persons" :key="person.id">{{person.name}}-{{person.age}}</li>
        </ul>
        <ul>
            <li v-for="(person,index) in persons" :key="index">{{person.name}}-{{person.age}}--{{index}}</li>
        </ul>
        <ul>
            <li v-for="(value,key) in car" :key="index">{{key}}-{{value}}</li>
        </ul>
        <ul>
            <li v-for="(value,key) in str" :key="index">{{key}}-{{value}}</li>
        </ul>
    </template>

</div>

</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:18},
                {id:'003',name:'王五',age:18}
            ],
            car:{
                name:"奥迪A8",
                price:"70万",
                color:"黑色"
            },
            str:'nisd'
        }
    })
</script>
</html>

12：列表过滤

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>初识Vue</title><script type="text/javascript" src="./js/vue.js"></script></head>

<body>

<div id="root">
    <!--面向模板编程的好处是不会破坏内部结构-->
    <template>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
    <ul>
        <li v-for="(p,index) in filpersons" :key="index">
            {{p.name}}--{{p.age}}--{{p.sex}}
        </li>
    </ul>
    </template>

</div>

</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            persons:[
                {id:'001',name:'马冬梅',age:18,sex:'女'},
                {id:'002',name:'周冬雨',age:18,sex:"女"},
                {id:'003',name:'周杰伦',age:18,sex:"男"}
            ],
            // filpersons:[]
        },
        // watch:{keyWord:{immediate:true,handler(val){this.filpersons=this.persons.filter((p)=>{return p.name.indexOf(val)!=-1})}}}
        computed:{
            filpersons(){
                return this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord)!==-1
                })
            }
        }
    
    })

</script>
</html>

13：列表排序

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>初识Vue</title><script type="text/javascript" src="./js/vue.js"></script></head>

<body>

<div id="root">
    <!--面向模板编程的好处是不会破坏内部结构-->
    <template>
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
    <ul>
        <li v-for="(p,index) in filpersons" :key="index">
            {{p.name}}--{{p.age}}--{{p.sex}}
        </li>
    </ul>
    </template>

</div>

</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            sortType:0,//0原顺序，1降序，2升序 @click=""
            persons:[
                {id:'001',name:'马冬梅',age:18,sex:'女'},
                {id:'002',name:'周冬雨',age:21,sex:"女"},
                {id:'003',name:'周杰伦',age:20,sex:"男"}
            ],
            // filpersons:[]
        },
        computed:{
            filpersons(){
                const arr= this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord)!==-1
                })
                if(this.sortType){
                    arr.sort((p1,p2)=>{
                        console.log(p1)
                     return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
                    })
                }
                return arr
            }
        }
    
    })

</script>
</html>

14：收集表单数据

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>初识Vue</title><script type="text/javascript" src="./js/vue.js"></script></head>

<body>

<div id="root">
    <form @submit.prevent="demo3">
        <label for="demo">账号：</label>
        <input type="text" id="demo" v-model.trim="userInfo.account">
        <br/> 
        <br/>
        <label for="demo2">密码：</label>
        <input type="password" id="demo2" v-model="userInfo.password">
        <br/>
        <br/>
        <label for="demo4">年龄：</label>
        <input type="number" id="demo4" v-model.number="userInfo.age">
        <br/>
        <br/>
        性别：
        男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
        女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
        <br/>
        <br/>
        爱好：
        学习<input type="checkbox" name="checkbox" v-model="userInfo.hobby" value="learning">
        打游戏<input type="checkbox" name="checkbox" v-model="userInfo.hobby" value="play_game">
        吃饭<input type="checkbox" name="checkbox" v-model="userInfo.hobby" value="have_dinner">
        <br/>
        <br/>
        所属校区
        <select v-model="userInfo.city">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>
        <br/>
        <br/>
        其他信息：
        <textarea v-model.lazy="userInfo.other"></textarea>
    </select>
         <br/>
         <br/>
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
        <br/>
        <br/>
    <button >提交</button>
    </form>

</div>

</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            userInfo:{
                account:'',
            password:'',
            sex:'',
            hobby:[],
            city:'beijing',
            other:'',
            agree:'',
            age:18
            }
        },
        methods:{
            demo3(){
                console.log(JSON.stringify(this.userInfo));
            }

        }

    })

</script>

</html>

15：App.vue： name属性是设置组件的名称，import是导入组件，components是将导入的组件引入，让App组件能够使用

<template>
  <div>
    <student name="李四" sex="女" age="18"/>
    <hr/>
    <student name="张三丰" sex="男" age="80"/>
    <hr/>
  </div>
</template>

<script>
  import Student from './components/Student.vue';
export default {
  name:'App',
  components:{Student}

}
</script>

<style>

</style>

16：School.vue：使用data得用函数的形式返回，避免数据的不一致性。props属性是传属性。

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
export default {
    name:'Student',
    data(){
        return {
          msg:"我是一个尚硅谷的学生"
        }
    },
    props:['name','sex','age']
}
</script>

<style>
.school{
  background-color: orange;
}
</style>

17：利用props在两个组件中传递数据

App.vue：

<template>
  <div class="container">
    <Category title="美食" :listData="foods"/>
    <Category title="游戏" :listData="games"/>
    <Category title="电影" :listData="films"/>
  </div>
</template>

<script>
import Category from "./components/Category.vue";

export default {
  name: "App",
  components: { Category },
  data(){
    return {
      foods:['火锅','烧烤','小龙虾','牛排'],
      games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
      films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: space-around;
}
</style>

Category.vue：

<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <ul>
        <li v-for="(item,index) in listData" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
    name:"Category",
    props:['listData','title']

}
</script>

<style>
   .category{
    background-color: skyblue;
    width:  200px;
    height: 300px;
   }
   h3{
    text-align: center;
    background-color: orange;
   }
</style>

18：默认插槽：

App.vue

<template>
  <div class="container">
    <Category title="美食" :listData="foods">
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
    </Category>
    <Category title="游戏" :listData="games"/>
    <Category title="电影" :listData="films"/>
  </div>
</template>

<script>
import Category from "./components/Category.vue";

export default {
  name: "App",
  components: { Category },
  data(){
    return {
      foods:['火锅','烧烤','小龙虾','牛排'],
      games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
      films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: space-around;
}
</style>

Category.vue

<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <slot></slot>
  </div>
</template>

<script>
export default {
    name:"Category",
    props:['listData','title']

}
</script>

<style>
   .category{
    background-color: skyblue;
    width:  200px;
    height: 300px;
   }
   h3{
    text-align: center;
    background-color: orange;
   }
</style>

19：具名插槽：

App.vue

<template>
  <div class="container">
    <Category title="美食" :listData="foods">
      <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer" href="https://www.baidu.com">更多美食</a>
    </Category>
    <Category title="游戏" :listData="games"/>
    <Category title="电影" :listData="films"/>
  </div>
</template>

<script>
import Category from "./components/Category.vue";

export default {
  name: "App",
  components: { Category },
  data(){
    return {
      foods:['火锅','烧烤','小龙虾','牛排'],
      games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
      films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: space-around;
}
</style>

Category.vue:

    <template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <slot name="center"></slot>
        <slot name="footer"></slot>
    </div>
    </template>

    <script>
    export default {
        name:"Category",
        props:['listData','title']

    }
    </script>

    <style>
    .category{
        background-color: skyblue;
        width:  200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    </style>

20：controls属性能让在线的视频播放

21：作用域插槽：

App.vue

<template>
  <div class="container">
    <Category title="游戏">
      <template scope="atguigu">
        <ul>
          <li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
        </ul>
      </template>

    </Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";

export default {
  name: "App",
  components: { Category }
};
</script>

<style>
.container {
  display: flex;
  justify-content: space-around;
}
</style>

Category.vue

    <template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <slot :games="games"></slot>
    </div>
    </template>


    
    <script>
    export default {
        name:"Category",
        props:['title'],
        data(){
            return{
             games:['红色警戒','穿越火线','劲舞团','超级玛丽']
            }
        }

    }
    </script>

    <style>
    .category{
        background-color: skyblue;
        width:  200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    </style>