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

Vue的data配置项

news 来源：原创 2025/6/8 16:46:06

如果仅仅像我们以上书写的程序，我们完全没有必要使用Vue，直接在body里直接书写就可以了：

在Vue中还有一个data的配置项，它可以帮助我们动态的渲染页面，

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模板语句的数据来源</title>

<script src="../js/vue.js"></script>
</head>
<body>

<div id="app"></div>

<script>
new Vue({
// template: `<h1>我叫张三，我今年18岁了</h1>`,
template: `<h1>我叫{{name}},我今年{{age}}岁了</h1>`,
//1.1 data函数写法
// data: function () {
// return {
// name: "章三",
// age: 28,
// };
// },
//1.2 data函数简写
// data() {
// return {
// name: "章三",
// age: 28,
// };
// },
// 2、data对象写法
data: {
name: "李四",
age: 18,
hobby: ["跑步", "游泳", "学习"],
salary: {
base: "5k",
bonus: {
month: "5k",
year: "10k",
},
},
},
}).$mount("#app");
</script>
</body>
</html>

代码解释

1、data是Vue实例的数据对象，是给整个Vue实例提供数据来源的

2、data配置项的value值，有两种写法 Object｜Function（对象或者函数），现阶段，这两种写法都可以，后期学到组件化的时候，data只能是函数的写法，建议大家直接用函数

3、如果data是对象的写法，对象必须是存粹的对象（含有0个或多个key：value）

4、data数据插入到模版语句中，可以用{{}},这是Vue框架自己搞的一个语法，叫插值语法（或叫胡子语法），可以从data根据key获取value，并且将value插入到对应的位置，注意{{}}语法是固定语法，不可以添加其他内容，例如空格{ { }}

5、data可以写多级，然后去一级一级获取

6、Vue编译器对template进行编译，遇到{{}}语法时，就去data里取数据，然后将获取到的数据插入到对应的位置，生成对应的html代码，最终将html渲染到挂载位置，呈现

7、当data发生改变时，template模版就会被重新编译，重新渲染

Vue的template配置项

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>template配置项详解</title>

<script src="../js/vue.js"></script>
</head>
<body>


<div id="app">

</div>

<script>
new Vue({
// 错误的
//template : '<h1>{{msg}}</h1><h1>张三</h1>',
template: `
<div>
<h1>{{msg}}</h1>
<h1>{{name}}</h1>
</div>
`,
data: {
msg: "Hello World!!!!!!!",
name: "张三",
},
}).$mount("#app");
</script>
</body>
</html>