vue基础复习

最新推荐文章于 2023-08-22 15:38:06 发布

hq520hq

最新推荐文章于 2023-08-22 15:38:06 发布

阅读量123

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/hq520hq/article/details/129287759

版权

本文详细介绍了Vue.js中的核心指令，包括v-show、v-if的条件渲染，v-html、v-text、v-bind的数据绑定，v-on的事件监听，以及v-model的双向数据绑定。还涉及了v-for指令用于循环渲染数据，并讲解了Vue实例的生命周期和数据更新时的关键时刻。同时，强调了v-for中key的使用注意事项和数组变更方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建vue项目具体步骤

vue指令：v-show指令，v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令，v-for指令等等。

v-show:v-show指令是根据条件显示DOM元素的指令，可以用来动态控制DOM元素的显示和隐藏。v-show后面跟的是判断条件，不管初始条件是什么，元素总是会被渲染。

注：当v-show值为false时，绑定DOM的 display:none 当v-show值为true时，绑定DOM会移除display:none ，此时并不是把display变为block，而是保持元素style的原始性，也就是说，不管初始条件是什么，元素总是会被渲染。

  <div id="app">
         <div v-show="play1">beautiful</div>
         <div v-if="play2">Agoni</div>
         <div v-show="play3"play3.style="display: none;">666</div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                 play2:true,
                 play1:false,
                 play3:true
            }
        })

v-html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <p v-text="msg"></p>
            <p v-html="msg"></p>
            <p>{{msg}}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
        <script>
            new Vue({
                el: "#app",
                data: {
                    msg: "Hello Vue",
                },
            });
        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <p v-text="msg"></p>
            <p v-html="msg"></p>
            <p>{{msg}}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
        <script>
            new Vue({
                el: "#app",
                data: {
                    msg: "<span>Hello Vue</span>",
                },
            });
        </script>
    </body>
</html>

v-model：可用于数据双向绑定 v-bind：单向数据流

<!-- 定义一个容器 -->
    <div id="root">
       <!-- 数据单向绑定：  <input type="text" v-bind:value="name"> -->
       <!-- v-bind特点：单向绑定数据 -->
       数据双向绑定：  <input type="text" v-model:value="name">
    </div>
    <!-- 实例化对象 -->
    <script>
     new Vue({
        el:'#root',
        data:{
            name:'琦'
        }
     })
    </script>

v-on：用于事件绑定

<body>
    <div id="app">
        <!-- 完整写法 v-on: -->
        <div v-on:click="clickfunc">点击事件</div>
        <!-- 缩写 @ -->
        <div @click="clickfunc">点击事件</div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
        },
        methods:{
         // 定义一个 点击函数   
            clickfunc:function(){
                console.dir('click event')
            }    
        },
    })
</script>

2.生命周期：

<body>
    <script>
        new Vue({
            el:'#example',//挂载
            data:{
                message:'match'
            },
            //beforeCreate组件实例被创建之初
            //不能获得DOM节点。data、methods、watch上的方法和数据均不能访问（loading）
            beforeCreate(){
                console.log('beforeCreate');
            },
            //created组件实例已经完全创建（结束loading事件）
            //可以访问到data、methodes上的方法和数据
            created(){
                console.log('creaded');
            },
            //beforeMount组件挂载之前
            //得不到具体的DOM节点，Vue挂载的根节点已经创建（一个项目用两次）
            beforeMount(){
                console.log('beforeMount');
            },
            //mounted组件挂载到实例上去之后
            //完成挂载DOM和渲染，可以对挂载的DOM进行操作（发起后端ajax请求）
            mounted(){
                console.log('mounted');
            },
            //beforeUpdate组件数据发生变化更新之前
            //数据时新的，但界面是旧的，即页面尚未与数据保存同步（访问现有DOM）
            beforeUpdate(){
                console.log('beforeUpdate');
            },

v-for：

语法：
v-for = “（值 , 索引）in 目标元素”
v-for = "值 in 目标结构"

注：可以遍历数组、对象、数字、字符串

<template>
  <div>
    <ul>
      <!-- v-for="(值的变量名，索引名) in 目标结构" -->
      <li v-for="(item, index) in arr" :key="index">
        {{ item }} --- {{ index }}
      </li>
    </ul>
 
    <!-- 对象 -->
    <ul>
      <li v-for="obj in stuArr" :key="obj.id">
        <span> {{ obj.name }}</span>
        <span> {{ obj.sex }}</span>
        <span> {{ obj.hobby }}</span>
      </li>
    </ul>
 
    <div>
      <p v-for="(value, key) in tObj" :key="key">
        <!-- key name age class -->
        <span>{{ key }}</span>  
        <!-- 小黑 -->
        <span>{{ value }}</span>
      </p>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    };
  },
};
</script>
 
<style>
</style>

v-for中key的使用注意项

v-for在循环时，key属性只能使用number获取string

key在使用时只能使用v-bind的属性绑定的形式，指定key的值

在组件中使用v-for的时候，或者在一些特殊的时候v-for使用有问题的时候

必须在使用v-for的同时指定唯一的字符或者number类型：key值

 <div>
               <label>
                   id:<input type="text" v-model="id" >
               </label>
               <label>
                    name:<input type="text" v-model="name" >
                </label>
                <input type="button" value="提交" @click="add">
           </div>
           
           <p v-for="item in list3" :key="item">
            <input type="checkbox"> 
            {{item.id}}------
            {{item.name}}
          </p>
        </div>
    <div id="app1">
        <p v-for="(val,key,i) in user ">userid:{{val}}---username:{{key}}---index:{{i}}</p>
 
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                list:[1,2,3,4,5,6,7,8],
                list1:[
                    { userid:1,username:'zs1'},
                    { userid:2,username:'zs2'},
                    { userid:3,username:'zs3'},
                    { userid:4,username:'zs4'}
                ],
                list2:{
                    id:1232,
                    name:'托尼.琼斯',
                    gender:'female'
                },
                list3:[
                    {id:1,name:'项羽'},
                    {id:2,name:'刘备'},
                    {id:3,name:'诸葛亮'},
                    {id:4,name:'曹操'},
                    {id:5,name:'赵子龙'},
                ]
         },
            methods:{
                add(){
                   // this.list3.push({id:this.id,name:this.name});
                   this.list3.unshift({id:this.id,name:this.name});   
                }
 
            }
        });  
    </script>

3.set 改变原始数组的方法