VUE框架实现原理及代码构成结构详解配置信息和开发者工具------VUE框架
精选
原创
©著作权归作者所有:来自51CTO博客作者旧约Alatus的原创作品,请联系作者获取转载授权,否则将追究法律责任
<!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="app">
<div>
<h1>{{msg}}</h1>
<h1>{{name}}</h1>
</div>
</div>
<script>
//Vue的全局配置选项
//其中的productionTip可以设置是否生成生产提示信息
//默认值是true,如果是false则表示组织生成
Vue.config.productionTip = false;
new Vue({
//关于template模板项,这个模板项下只能有一个根节点
//只要data中的数据发生变化,模板语句一定会重新编译,重新渲染
//如果使用template配置项的话,指定挂载位置的元素是直接被替换的
//如果直接将模板语句写到html标签内,指定位置的挂载元素就不会被替换了
//.$mount("#app")也可以不需要了
//在VUE中有一个配置项el
//el配置项也可以实现挂载
// template : `<div>
// <h1>{{msg}}</h1>
// <h1>{{name}}</h1>
// </div>`,
data : {
msg : "Hello Vue!",
//如果我们的name是以中文开始的就会显示不了data
name : "a老杜!"
},
//EL配置项是用来指定我们接管什么容器的
//和挂载的mount一个效果
el : "#app"
});
</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>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="id"></div>
<script>
const myVue = new Vue({
template : `<h1>最近大火的电视剧{{name}},上映时间是{{releaseTime}},主角叫{{lead.name}},年龄是{{lead.age}}
其他演员包括{{actors[0].name}},年龄是{{actors[0].age}},还有{{actors[1].name}}年龄是{{actors[1].age}}
</h1>`,
//谁可以给模板语句提供数据来源,data选项
//data只能是object或者function两类
//data配置项的专业叫法vue实例的数据对象
//data实际上是给整个vue实例提供数据来源的
//对象必须是纯粹的对象才行(含有零个或多个key和value对)
//data数据的内容怎么插入到模板语句中?
//{{}}是VUE框架自己定义的一套语法,别的框架或者浏览器都看不懂且不能识别
//插值语法{{}}的中间不能有其他空格,这是vue框架自定义的语法标准,走了vue的编译器
//所以一旦语法错误就识别不了了
data : {
name : "狂飙",
releaseTime : "2023年1月1日",
lead : {
name : "高启强",
age : 40
},
actors : [
{
name : "安欣",
age : 30
},
{
name : "高启兰",
age : 27
}
]
}
})
myVue.$mount("#id")
</script>
</body>
</html>