Day53.Vue框架: 绑定元素、条件 | 列表渲染、事件驱动、侦听属性、生命周期

焰火青年·

已于 2022-07-16 19:03:46 修改

阅读量1.6k

点赞数 1

分类专栏： Web 文章标签：前端 javascript vue

于 2022-04-28 21:03:19 首次发布

本文链接：https://blog.csdn.net/a111042555/article/details/124480927

版权

Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue框架

一、绑定元素属性(:属性名="key")

双向绑定 (v-model="key")

二、条件渲染 (v-if=" ? " | v-else-if=" ? ")

三、列表渲染 (v-for="(e,i) in key") | {{e}}

四、事件驱动 (@事件名="函数名")

(1): 取消控件默认行为(prevent Default)

(2): 阻止事件冒泡 (stop Propagation)

五、侦听属性 ( watch{侦听的函数} )

六、Vue的生命周期(life cycle)

测试题：Vue实现动态信息表格

Vue框架

官网地址:Vue.js 作者尤雨溪

官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

<body>

<div id="box">
    <p>{{msg}}</p>
</div>

<script>
/*
渐进式javascript框架:让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 双向绑定 MVVM 

1.导入js文件到项目内
2.在页面内引入js文件 --拖动
3.在<script>内 采用json方式 创建Vue实例
    el:"css选择器" 指定vue的使用范围
    data:数据模型 页面上要展示的数据*/
    new Vue(
            {
                "el":"#box",    //css选择器，选中vue使用的范围
                "data":{        //数据模型
                    "msg":"HelloWorld"
                }
            }
        )
    数据模型的值 可以通过 插值表达式 渲染到页面上 {{数据模型的key}}}
 */
    new Vue(
        {
            "el":"#box",
            "data":{
                "msg":"HelloWorld"
            }
        }
    )
</script>

一、绑定元素属性(:属性名="key")

v-bind:标签属性名 = "数据模型key" 简写后 :属性名="数据模型key"

{{差值表达式的方式}} 与 

HTML代码

<div id="box">
    <!--差值表达式的方式--><!--v-text效果相同-->
    <p>{{msg}}</p>     <p v-text="msg"></p>

    <!--绑定: 标签value与数据模型-->
    <span>用户名</span><input type="text" v-bind:value="value">
    <!--简写后，省略v-bind:-->
    <input type="text" :value="value">

    <!--绑定: 标签name与数据模型值-->
    <input type="text" :name="name">

    <!--绑定: 样式-->
    <div :style="style"></div>
</div>

<div id="app">
	<!-- v-bind:value表示将value属性交给Vue来进行管理，也就是绑定到Vue对象 -->
	<!-- vueValue是一个用来渲染属性值的表达式，相当于标签体中加{{}}的表达式 -->
	<input type="text" v-bind:value="vueValue" />
	
	<!-- 同样的表达式，在标签体内通过{{}}告诉Vue这里需要渲染； -->
	<!-- 在HTML标签的属性中，通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染 -->
	<p>{{vueValue}}</p>
</div>

Vue代码

<script>
//b-bind:
    new Vue({
        "el":"#box",
        "data":{
            "msg":"HelloWorld",
            "value":"会当临绝顶",
            "name":"迪丽热巴",
            "style":{
                "height":"200px",
                "width":"200px",
                "backgroundColor":"red"
            }
        }
    })
</script>

<script>
// 创建Vue对象，挂载#app这个div标签
var app = new Vue({
	"el":"#app",
	"data":{
		"vueValue":"太阳当空照"
	}
});
</script>

双向绑定 (v-model="key")

v-model:value="数据模型key" 简写后 v-model="数据模型key"
v-modle.trime="数据模型key" 去除前后空白

使用了双向绑定后，就可以实现：页面上数据被修改后，Vue对象中的数据属性也跟着被修改。

<div id="box">
    <span>输入一句话</span>
    <!--<input type="text" v-model:value="content">-->
    <!--简写后：省略value=  因为只有拥有value属性的标签才可以使用双向绑定-->
    <input type="text" v-model="content"> <br>
    <button @click="get()">get</button>
    <button @click="set()">set</button>
</div>
<script>
    //双向绑定： v-model 数据模型的值可以影响输入框的value 输入的值也可以影响数据模型的值
    //只能用在可以接受用户输入的标签上
    new Vue({
        "el": "#box",
        "data": {   //元素模型
            "content": "自挂东南枝"
        },  //方法模型
        "methods": {
            "get": function () {
                console.log(this.console);

            },
            "set": function () {
                this.content = "栀子花开";
            }
        }
    });
</script>

二、条件渲染 (v-if=" ? " | v-else-if=" ? ")

根据Vue对象中数据属性的值来判断是否对HTML页面内容进行渲染(有条件的显示数据)。

1. v-if="数据模型的key" //满足则执行
v-else-if="数据模型的key" //满足则执行
....
v-else //都不满足时执行

2. v-show="数据模型的key"
注意：等价于if单分支不能与 v-else 配合使用

    <div id="box">
        <p>请输入数字:</p>
        <input type="text" v-model="content">
        <span v-if="content>0">正数</span>
        <span v-else-if="content<0">负数</span>
        <span v-else-if="content==0">零</span>
        <span v-else="content=0">非数字</span>
    </div>
    <script>
        new Vue({
            "el":"#box",
            "data":{
                "content":"0"
            }
        })
    </script>

测试：学生成绩

对输入的值进行校验 [1-100]可以分数校验:
    [90-100]:A [80-89]:B [70-79]:C [60-69]:D [0-60]:E

<div id="box">
    <span>请输入成绩</span><input type="text" v-model="score"> <br>
    <!--如果不在范围内，不显示-->
    <span v-show="score>=0 && score<=100">
        <span v-if="score>=90 && score<=100" >A</span>
        <span v-else-if="score>=80 && score<=90" >B</span>
        <span v-else-if="score>=70 && score<=60" >C</span>
        <span v-else-if="score>=60 && score<=70" >D</span>
        <span v-else="score<60" >E</span>
    </span>
</div>
<script>
    new Vue({
        "el":"#box",
        "data":{
            "score":this.msg,
        }
    })
</script>

三、列表渲染 (v-for="(e,i) in key") | {{e}}

1. v-for="元素 in 数据模型的key"

2. v-for="(元素,下标) in 数据模型的key" 注意空格！

遍历一个简单数组

<!--div#box-->
<div id="app">
    <ul>
        <li v-for="game in games">{{game}}</li>
    </ul>
</div>
<script>
    new Vue({
        "el":"#app",
        "data":{
            "games":[
                "战锤:20k",
                "War3",
                "地铁:离去",
                "双人成形"
            ]
        }
    });
</script>

迭代一个对象数组

快捷键：<!--div#box-->
<div id="box">
    <table width="400" border="1" style="text-align: center">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>工作</th>
        </tr>
        <tr v-for="e in emps">
            <th>{{e.name}}</th>
            <th>{{e.age}}</th>
            <th>{{e.gender}}</th>
            <th>{{e.job}}</th>
        </tr>
    </table>

</div>
    <script>
        new Vue({
            "el":"#box",
            "data":{
                "emps":[
                    {
                        "name":"迪丽热巴",
                        "age":"21",
                        "gender":"女",
                        "job":"演员"
                    },
                    {
                        "name":"古力娜扎",
                        "age":"22",
                        "gender":"女",
                        "job":"明星"
                    },
                    {
                        "name":"邓紫棋",
                        "age":"27",
                        "gender":"女",
                        "job":"歌手"
                    },
                ]
            }
        })
    </script>

四、事件驱动 (@事件名="函数名")

v-on:事件名="函数名"
@事件名="函数名"
函数在 methods 中声明

click鼠标单击 blur丢失焦点 focus获得焦点 change内容改变

    <div id="box">  <!--v-on:click 可简写为 @click，其他同理-->
        <input type="text" v-model="msg"
        @click="c" @blur="b()" @focus="f()" @change="ch()"
        >
    </div>
    <script>
        new Vue({
            "el":"#box",
            "data":{
                "msg":"事件渲染测试"
            },
            "methods":{
                "c":function (){
                    alert("点击事件");
                },
                "b":function (){
                    console.log("丢失焦点");
                },
                "f":function (){
                    console.log("获得焦点");
                },
                "ch":function (){
                    alert("内容改变")
                }
            }
        })
    </script>

数组反转：

<div id="box">
    <input id="imp" type="text" v-model="msg">
    <button @click="c()">点我反转</button>

</div>

<script>
    new Vue({
        "el":"#box",
        "data":{
            "msg":this.msg
        },
        "methods":{
            "c":function (){
                //1.获取输入的值
                var msg = this.msg;
                //2.将数据转为数组，反转
                let strArr = msg.split("");
                strArr.reverse();
                //3.将数组转为字符串
                let str = strArr.join("");
                //4.将结果赋值给数据模型
                this.msg=str;
            }
        }
    })
</script>

(1): 取消控件默认行为(prevent Default)

方式1: 调用事件对象的preventDefault()方法。
方式2: vue绑定事件后.privent

控件默认行为：点超链接会跳转页面、点表单提交按钮会提交表单。


    <vid id="box">       //方式2:vue绑定事件后.prevent
        <a href="http://www.baidu.com" @click.prevent="c()">百度一下</a>
    </vid>
    <script>
        /*
        取消控件默认行为
        方式1:event.prevent Defaule
         */
        new Vue({
            "el":"#box",
            "methods":{
                "c":function (){
                    alert("点击事件触发了!")
                    //取消控件的默认行为
                    //event.preventDefault();
                }
            }
        })
    </script>

(2): 阻止事件冒泡 (stop Propagation)

方式1: stopPropagation 阻止事件冒泡
方式2: vue绑定事件绑定.stop

事件冒泡: 一个事件会不断向父元素传递，直到window对象。点击灰色方块，蓝色也会被触发。

    <style>
        #box{   /*效果渲染*/
            height: 400px;
            width: 400px;
            background: #58b2b0;
            padding: 100px;
        }
        #cc{
            height: 200px;
            width: 200px;
            background: #a56281;
        }
    </style>
</head>
<body>

<div id="box" @click="c1()">{{d1}}
    <div id="cc" @click.stop="c2()">{{d2}}    //方式2

    </div>
</div>

<script>
    /*
    二、取消事件冒泡
        事件冒泡： 某些事件触发时会将事件效果沿着文档树逐级向上传递
        取消事件冒泡
            方式1：函数内 event.stopPropagation();

            方式2: vue进行事件绑定后.stop
     */
    new Vue({
        "el":"#box",
        "data":{
            "d1":"div1",
            "d2":"div2"
        },
        "methods":{
            "c1":function (){
                alert("c1被点击了")
            },
            "c2":function (){
                //某些事件触发时会将事件效果沿着文档树逐级向上传递
                alert("c2被点击了")
                //阻止事件冒泡
                //event.stopPropagation();    //方式1
            }
        }
    })
</script>
</body>

五、侦听属性 ( watch{侦听的函数} )

在下面的代码中，我们希望firstName或lastName属性发生变化时，修改fullName属性。此时需要对firstName或lastName属性进行『侦听』。

具体来说，所谓『侦听』就是对message属性进行监控，当firstName或lastName属性的值发生变化时，调用我们准备好的函数。

在watch属性中声明对firstName和lastName属性进行『侦听』的函数：

<body>
<div id="box">
    <p><span>姓:</span>{{firsName}}</p>
    <p><span>名:</span>{{lastName}}</p>
    <span>用户姓:</span> <input type="text" v-model="firsName"> <br>
    <span>用户名:</span> <input type="text" v-model="lastName"> <br>
    <p><span>全名:</span>{{fullName}}</p>
</div>

<script>
    /*
    临时：渲染-->挂载
    firsName与lastName 改变时，影响到fullName
     */
    new Vue({
        "el":"#box",
        "data":{
            "firsName":"欧阳",
            "lastName":"修",
            "fullName":"欧阳修"
        },//watch:属性侦听
        "watch":{当lastName发生改变，会触发此函数，获取改变的值赋值给fullName
            "firsName":function (){
                this.fullName=this.firsName + this.lastName;
            },  //当lastName发生改变，会触发此函数，获取改变的值赋值给fullName
            "lastName":function (){
                this.fullName=this.firsName + this.lastName;
            }
        }
    })
</script>

六、Vue的生命周期(life cycle)

Vue的钩子函数:

beforeCreate (Vue初始化前) created (Vue初始化后)

beforeMount (挂载前) mount (挂载后)

beforeUpdate (数据更新前) updated (数据更新后)

<div id="box">
  <p id="p1">{{msg}}</p>  <!--数据是如何渲染的？-->
</div>
<script>
  //了解vue的生命周期——通过vue的钩子函数
  new Vue({
    "el":"#box",
    "data":{
      "msg":"Hello World"

    },
    "methods":{

      "show":function (){
        console.log("this is show()")
      }
    },
    "beforeCreate":function (){
      console.log("---------- beforeCreate ----------")
      //已经产生了Vue对象实例，但是data数据模型的值 和 method中内容还无法使用
      console.log(this);        //成功
      console.log(this.msg);    //但其中数据还没有创建
    },
    "created":function (){
        console.log("---------- created ----------")
        //已经可以使用 data 数据模型的值 和 methods中函数
        console.log(this.msg)
        console.log(this.show());
    },
      "beforeMount":function (){
          console.log("---------- beforeMount ----------")
          //挂载前: 还未完成渲染，展示初始数据      (使用场景:图片加载，未加载完成之前转圈圈)
          var pElement = document.getElementById("p1");
          console.log(pElement.innerText);    //{{msg}}
      },
      "mounted":function (){
          console.log("---------- beforeMount ----------")
          //挂载后: 完成渲染，展示数据模型值
          var pElement = document.getElementById("p1");
          console.log(pElement.innerText);    //Hello World
      },
      "beforeUpdate":function (){
          console.log("---------- beforeUpdate ----------")
          //可以获取更新前的的值  提高用户体验性，代码更新完善
          var pElement = document.getElementById("p1");
          console.log(pElement.innerText);
      },
      "updated":function (){
          console.log("---------- updated ----------")
          //可以获取更新后的值
          var pElement = document.getElementById("p1");
          console.log(pElement.innerText);
      }
  })
</script>

测试题：Vue实现动态信息表格

<body>
<div id="box">
    <table border="1" width="400" style="text-align: center" id="tab">
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr v-for="(s,index) in students">
            <td>{{s.id}}</td>
            <td>{{s.userName}}</td>
            <td>{{s.sex}}</td>
            <td><button @click="delRow(index)">删除</button></td>
        </tr>
    </table>
    <div>                              <!--如果id不存在，id动态生成-->
        序号: <input type="text" id="id" v-model="student.id"><br>
        用户: <input type="text" id="uName" v-model="student.userName"><br>
        性别: <input type="text" id="sex" v-model="student.sex"><br>
        <button @click="addRow()">添加</button>
    </div>
</div>

<script>
    new Vue({
        "el":"#box",
        "data":{
            "students":[
                {"id":"001","userName":"张三","sex":"男"},
                {"id":"002","userName":"翠花","sex":"女"},
                {"id":"003","userName":"王五","sex":"男"},
                {"id":"004","userName":"表妹","sex":"女"},
            ],
            "student":{ //输入框绑定了student
                //也可以不写属性，会动态创建
                /*"id":"",
                "userName":"",
                "sex":""*/
            }
        },
        "methods":{
            "delRow":function (i){
                /*第一种删除方式
                //alert("删除触发了")
                let target = event.target;
                console.log(target);
                target.parentElement.parentElement.remove();
                */
                //切割：从指定下标删除，删除一个数据
                this.students.splice(i,1)

                //删除全部
                //this.students=null;
            },
            "addRow":function (){
                //alert("123")
                //push 向数组添加元素，添加student对象
                this.students.push(this.student);

                //清空表格信息
                this.student={};
            }
        }
    });
</script>
</body>