Vue3学习笔记之数据绑定篇（0823）

学习完Vue2 的C友们，今天继续追赶Vue3的大潮流吧！
废话不多说，直接上代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.esm-browser.js"></script>
</head>
<body>
  <div id="app">
    <h3>文本框{{data.text}}</h3>
    <h3>单选框{{data.radio}}</h3>
    <h3>复选框{{data.checkbox}}</h3>
    <h3>记住密码 {{data.remenber}}</h3>
    <h3>下拉框{{data.select}}</h3> 


    <!-- 单项数据绑定，当数据发行改变时，视图会自动更新，但用户手动更改时input值，数据不会自动更行 -->
     <h3>单项数据绑定 <input type="text" :value="data.text"> </h3>


     <!-- 双向数据绑定，当数据发生改变时，视图会自动更新，当用户手动更改input值时，数据也会自动更新
     对于 <input type="text" > v-module 绑定的是input元素的Value属性 
     -->
     <h3>双向数据绑定</h3> <input type="text" v-model="data.text"><br><br>



     <!-- 单选框 对于<input type="radio">，V-model 绑定的是input 元素的选中状态 -->
      <input type="radio" v-model="data.radio" value="1">写作
      <input type="radio" v-model="data.radio" value="2"> 画画
      <br><br>
      

      <!-- 复选框 对于<input type="checkout" > v-model绑定的是input元素的选中checked属性 -->
       <input type="checkbox" v-model="data.checkbox" value="a">阅读
       <input type="checkbox" v-model="data.checkbox" value="b">画画
       <input type="checkbox" v-model="data.checkbox" value="c">写作
       <br><br>

       <!-- 记住密码 -->
        <input type="checkbox" v-model="data.remenber"  > 记住密码
        <br><br>

        <!-- 下拉框，对于<select> v-model绑定的是select元素的选中状态-->
          <select v-model="data.select">
            <option value="">请选择</option>
            <option value="A">写作</option>
            <option value="B">画画</option>
            <option value="C">运动</option>
          </select>
  </div>
  <script type="module">
    import {createApp,reactive,ref} from '../js/vue.esm-browser.js'
    createApp({
      setup() {
        const data = reactive({
          text:"dangruicode.com", //文本框
          radio:"" , //单选框
          checkbox:[],//复选框
          remenber:false, //单个复选框-记住密码
          select:"" , //下拉框
        })
        return{
         data,
        }
      }
    }).mount("#app")
  </script>![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/fee9e26b059b43fc8379c0c67f9a000b.gif)

</body>
</html>

v-model 修饰符

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.esm-browser.js"></script>
</head>
<body>
  <div id="app">
    <h3>url:{{web.url}}</h3>
    <h3>user:{{web.user}}</h3>

    实时渲染<input type="text" v-model="web.url"><br><br>
    lazy实时渲染<input type="text" v-model.lazy="web.url">
<br><br>

    <!-- 输入100人，web.user的值仍为100 -->
    不添加 .number <input type="text" v-model="web.user"><br><br>
     输入框的值转换为数据类型 <input type="text" v-model.number="web.user">


     <br><br><br>
    没有 .trim <input type="text" v-model="web.url">    <br><br>
     去除首位空格<input type="text" v-model.trim="web.url">
  </div>
  
  <script type="module">
    import {createApp,reactive} from '../js/vue.esm-browser.js'
    createApp({
     setup(){
      const web = reactive({
       url:"www.baidu.com",
       user:100,
      })
      return{
       web
      }
    }
   
    }).mount("#app")
  </script>
</body>
</html>

对了，还有一个还有Vue.js文件，可以去官网下载（https://unpkg.com/vue@3/dist/vue.esm-browser.js）![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/3befb5b3090e458e89d69d4b80cab97e.png)

同时,我也上传啦