vue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="cp">
{
{msg}}
<p>{
{msg}}</p>
<p>姓名:{
{use.name}}</p>
<p>年龄:{
{use.age}}</p>
<p>性别:{
{use.gender}}</p>
</div>
<!--//vue数据层-->
<script>
const app = {
data(){
return{
// 返回vue对象不需要加双引号
msg:"hello world !!!!",
// 不光是键值对,还支持类似go里面结构体类型
use:{
name:"yuan",
age:18,
gender:"男"
}
}
}
}
// 将app这个模板,挂载给cp这个元素及其子元素,【数据层】 --加载到--> 【模板层】
ve = Vue.createApp(app).mount('#cp')
</script>
</body>
</html>
在Vue应用中,使用const
来声明变量或常量是一种常见的做法,但不是必须的。Vue的配置项,如组件的定义、数据对象、计算属性、观察者、方法等,都是定义在Vue实例或组件实例的配置对象中的,并不直接依赖于const
。例如,你可以使用var
或let
(另外两种JavaScript变量声明关键词)来声明一个变量,然后在Vue配置中使用这个变量。
示例对比
使用const
声明Vue应用配置对象:
const appConfig = {
data() {
return {
message: 'Hello Vue!'
}
}
};
const app = Vue.createApp(appConfig).mount('#app');
使用var
声明Vue应用配置对象:
var appConfig = {
data() {
return {
message: 'Hello Vue!'
}
}
};
var app = Vue.createApp(appConfig).mount('#app');
两个示例在功能上是等效的,区别仅仅在于如何声明appConfig
变量。选择const
、let
还是var
主要取决于你想给这个变量赋予的特性(是否允许重新赋值,作用域等),而不是Vue的要求。
总结
Vue的所有配置都不是从const
开始的。const
只是用于在JavaScript中声明变量的一种方式,而在Vue中,最重要的是配置对象本身,以及它包含的属性和方法,而不是如何声明这个对象。在实际开发中,建议根据变量或常量的使用场景和需求选择合适的声明方式(const
、let
或var
)。