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

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

news 2025/7/22 6:01:19

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

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

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

▶ 我看过

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

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>