Vue知识点总结-CSDN博客

本文链接：https://blog.csdn.net/qq_45068048/article/details/113729563

1.vue的基本语法

//创建vue对象
  const app=new Vue({
        el: "#app",//挂载地址
        data:{//参数的设置
            isActive: true,
            message:'你好',
        },
        methods:({//方法的设置
         changeColor:function () {
           this.isActive=!this.isActive;
         },
            getCss:function () {
                return {active:this.isActive}
            }
        })
    })

<style>
    .active{
        color: red;
    }
</style>
<div id="app">       挂载的位置
<!--    class属性的动态绑定-->
    <h1 :class="{active:isActive}">软件开发</h1>
    <h1 :class="getCss()">软件开发</h1>
    <button @click="changeColor">改变颜色</button>
<!--    v-once 应用只是绑定一次  不会再次改变-->
    <h1 v-once>{{message}}</h1>
    <h1 >{{message}}</h1>
<!--    v-pre 是原封不动进行渲染-->
    <h1 v-pre>{{message}}</h1>
</div>

总结
v-pre ：原封不动进行渲染
v-once ：只绑定一次，之后不会再次改变
@：调用methods中的方法没有参数时，不用带
：：调用方法时，需要加上（）

2.v-on的事件修饰符：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    .stop修饰符的使用  保证只触发自己本身最近的事件-->
    <div @click="div">
        vvvvv
        <button @click.stop="button">点我</button>
    </div>
    <form action="baidu">
        <input type="text">
<!--        .prevent修饰符阻止事件默认提交-->
        <input type="submit" value="提交" @click.prevent="form">
    </form>
<!--    监听键盘事件-->
    点击键盘触发事件：<input type="text" @keyup="keyup">
    点击enter键触发的事件 <input type="text" @keyup.enter="keyup">
</div>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const app=new Vue({
        el: "#app",
        data:{
        },
        methods:({
          div() {
              console.log("div被点击了");
          },
          button(){
            console.log("button被点击了！！");
          },
            form(){
              console.log("表单提交了");
            },
            keyup()
            {
                console.log("键盘被点击了")
            }
        })
    })
</script>
</body>
</html>

v-on修饰符总结：

‘.stop’ 是只触发自己本身的事件
‘.prevent’ 阻止自己本身的事件
‘@keyup’ 键盘事件
‘@keyup.enter’ 监听键盘enter键
3.v-on参数传递问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="button1">button按钮的参数传递</button>
    <button @click="button2(123)">button按钮的参数传递</button>
<!--    传递的字母字符串必须用引号包裹，不用引号包裹的是变量-->
    <button @click="button3(aaa)">button按钮的参数传递</button>
<!--    传递的是对象-->
    <button @click="button3($event)">button按钮的参数传递</button>
</div>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const app=new Vue({
        el: "#app",
        data:{
            aaa:45555,
        },
        methods:({
          button1(){
              console.log("没有参数括号可以省略！！")
          },
            button2(a){
                console.log("传递的参数是："+a);
            },
            button3(a){
                console.log("传递的参数是："+a);
            }
        })
    })
</script>
</body>
</html>

4.v-if 与v-show 的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2 v-if="score>60 && score<80">你及格了</h2>
    <h2 v-else-if="score>80">
        优秀
    </h2>
    <h2 v-else>你不及格了</h2>
    你的成绩评定：{{result}}
    <br>
    <span v-if="scan">
<!--        状态切换时用标签包裹-->
        <label> 学生登录：</label>
<!--        通过设置key这个标识符进行识别-->
     <input type="text" key="ab">
    </span>
    <span v-else>
          <label>  教师登录：</label>
     <input type="text" key="vvv">
    </span>
    <button @click ="scan= !scan">状态转换按钮</button>
</div>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const app=new Vue({
        el: "#app",
        data:{
            score:88,
            scan: true,
        },
        // 推荐使用计算属性
        computed:{
          result(){
              let message="";
              if(this.score>60){
                  message="你及格了";
              }else {
                  message="你不及格";
              }
              return message;
          }
        },
        methods:({

        })
    })
</script>
</body>
</html>