本文介绍了Vue中的数据绑定机制，包括v-bind的单向数据绑定和v-model的双向数据绑定，重点讲解了v-model在输入元素上的使用。同时，文章探讨了Vue实例的创建方式，el的两种写法以及data属性的声明方式。最后，阐述了MVVM模式在Vue中的体现，强调了Vue实例（vm）、视图（v）和数据模型（m）之间的关系。
vue数据绑定
数据绑定
v-bind:单向数据绑定 ←
v-model:双向数据绑定 ←→，只能应用在输入元素上（如，input、checkbod、select、textarea）。
它们有一个共同点：都有value属性，所以v-model:value可以简写
v-model=
等价于
v-model:value=
<!--
* @LastEditors: 一只爱吃萝卜的小兔子
* @Date: 2022-04-19 09:57:45
* @LastEditTime: 2022-04-19 10:12:42
* @FilePath: \vuejs-learn\vue-start\data-bind.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据绑定</title>
<!--可以在收藏夹中显示出图标-->
<link rel="Bookmark" type="image/x-icon" href="../favicon.svg" />
<!--可以在地址栏中显示出图标-->
<link rel="icon" type="image/x-icon" href="../favicon.svg" />
<link rel="shortcut icon" href="../favicon.svg">
<!-- 引入vue -->
<script src="../vuejs/vue.js"></script>
</head>
<body>
<div id="root">
<h2>
<label for="input1">单向数据绑定:</label> <input type="text" id="input1" v-bind:value="name">
<!-- <br /><label for="input2">双向数据绑定:</label> <input type="text" id="input2" v-model:value="name"> -->
<br /><label for="input2">双向数据绑定:</label> <input type="text" id="input2" v-model="name">
</h2>
</div>
<script>
// Vue.config.productionTip = false;
new Vue({
el: '#root',
data() {
return {
name: "vue"
}
}
});
</script>
</body>
</html>
el与data的两种写法
el的两种写法:
1.new Vue
new Vue({
el: '#root',//第一种写法
data() {
return {
name: "vue"
}
}
});
2.先创建v = Vue实例，在挂载。v.$mount(‘#root’);
更灵活
const x = new Vue({
// el: '#root',
data() {
return {
name: "vue"
}
}
});
//setTimeout(
x.$mount('#root'); //第二种写法
//,1000);
data的两种写法
对象式:
data:{
name: "vue"
}
函数式
this是Vue
返回值必须是对象
不可以用箭头函数，this会变成Window
data() {
return {
name: "vue"
}
}
MVVM
所以 vm 是Vue实例，v 是dom构建的view，m 是data model。
{{ }}可以读取 data() 内的所有内容，可以读取 Vue 实例上的所有内容，可以读取 Vue 原型上的上的所有内容。所以以上内容都可以直接用在template模板里。
下一节:前端之vue数据代理与劫持
扫一扫
2506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
