当前位置：首页 > article >正文

2025/1/20 学习Vue的第三天

article 2025/1/21 11:40:50

玩性太大了玩得也不开心，天天看电视刷视频。

内心实在空洞。= =最近天天看小红书上的外国人，结实外国友人（狗头）哈哈哈认识了不少人，有埃及的有美国的，还有天天看菲利普吃糖葫芦哈哈哈哈哈一个阳光的德国大男孩，给人感觉特别热爱生活。好喜欢。、也好想和他一样阳光开朗。

每天都要打八段锦打卡到梦空间。每天都要学习。要早睡早起才可以。

▶ 我看过

---------------------------------------------------------------------------------------------------------------------------------

08.数据绑定

数据有两种绑定方式：单向绑定和双向绑定

双向绑定指的是，能够通过对屏幕上的输入改变后台的值。

而单向绑定只能通过后台改变屏幕的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
        单向数据绑定:<input type="text" v-bind:value="name">
        <br>
        双向数据绑定:<input type="text" v-model:value="name">
        <!-- 这样写是错误的
        适合双向绑定的标签有
        单选框
        多选框
        输入框 
        能够在页面进行标签
        -->
        <h1 v-model:value:x="name">喜羊羊</h1>
    </div>
</body>
<script type="text/javascript"> 
    new Vue({
       el:'#root',
       data:{
           name:'尚硅谷'
       }
    })
</script>
</html>

09.el与data 的两种写法

由于我们之后会步入组件化的学习，所以先提前给我们交代写法。

第一种方式是我们之前学习的默认模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el和data的两种写法</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>你好，{
  
  {name}}</h1>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            }
        })
    </script>
</body>
</html>

第二种写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el和data的两种写法</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>你好，{
   
   {name}}</h1>
    </div>
    <script>
  const v=  new Vue({
    // 第一种写法
            // el:'#root',
            // data:{
                
            // }
     

        // 第二种写法
        data(){
            return{
              name:'尚硅谷'       
            }
        }
    })
    v.$mount('#root')
    </script>
</body>
</html>