狂野小白兔
狂野小白兔

第六阶段：大前端进阶||07-Vue详解||P7：Vue双向绑定【观看狂神随笔】

Vue：表单双绑，组件

1. 什么是双向数据绑定

第六阶段：大前端进阶||07-Vue详解||P7：Vue双向绑定【观看狂神随笔】_第1张图片

  • 全局性数据流使用单项（vuex），方便跟踪；局部性数据流使用双向(UI控件)，简单易操作。

2. 在表单中使用双向数据绑定

第六阶段：大前端进阶||07-Vue详解||P7：Vue双向绑定【观看狂神随笔】_第2张图片
v-model:它能轻松实现表单输入和应用状态之间的双向绑定

  • 单行文本：
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
    <p>{
    {message}}p>
    <input type="text" v-model="message">
div>
<script type="text/javascript">
    var demo = new Vue({
       
        el: "#app",
        data: {
       
            message: "hello Vue"
        }
    })
script>
body>
html>
  • 多行文本：