当前位置：主页 > 经验教程 > 建站编程 >

什么是vue

什么是vue Vue.js是什么？(5)

时间：2024-01-24 21:00:29 来源：IT袋作者：马勇

导读：什么是vue，3.6、v-model 双向数据绑定更新 data 数据，html页面中的数据也会更新。更新html页面数据，data 数据也会更新。指令作用 v-model 在表单元素上创建双向数据

什么是vue

3.6、v-model

双向数据绑定

更新 data 数据，html页面中的数据也会更新。
更新html页面数据，data 数据也会更新。

什么是vue

指令	作用
v-model	在表单元素上创建双向数据绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单绑定</title>
</head>
<body>
    <div id="div">
        <form autocomplete="off">
   <!--
                单向绑定: model数据改变了  ==》 视图的数据也会变
                         视图的数据改变了，Model不会被影响
            -->
            姓名_单向绑定：<input type="text" name="username" v-bind:value="username">
            <br>
   <!--
                双向绑定：model数据改变了 《==》 视图的数据也会变
                        视图的数据改变了，Model会被影响
            -->
            姓名_双向绑定：<input type="text" name="username" v-model="username">
   <br>
        </form>
  
        <hr>
  <h3>{{username}}</h3></div>
</body>
<script src="js/vue.js"></script>
<script>
    /*
    * 目标：使用v-model实现MVVM双向数据绑定
    *      注意：不用v-model就是单向，使用就是双向
    * */
    new Vue({
        el:"#div",
        data:{
            username:"张三",
        }
    });
</script>
</html>

4、Vue生命周期

从Vue实例创建到销毁的整个过程

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

状态	阶段周期	视图和模型状态
beforeCreate	创建前	视图对象没有，模型对象没有
created	创建后	视图对象没有，模型对象有
beforeMount	载入前	视图对象有，模型对象有，没有绑定数据
mounted	挂载完成	试图对象有，模型对象有，数据绑定，可以数据展现：发送异步请求获取服务器数据返回模型，然后和视图进行绑定
beforeUpdate	更新前	更新模型数据前，视图显示旧的数据
updated	更新后	更新模型数据后，视图显示新的数据
beforeDestroy	销毁前	视图和模型对象没有销毁
destroyed	销毁后	视图和模型对象都被销毁