从0到1学习Vue框架Day01
目录
1、初体验
2、模板语句的数据来源
3、template配置项详解
4、Vue实例和容器的关系：一夫一妻制
1、初体验
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初体验</title><!-- 安装Vue --><script src="../js/vue.js"></script></head>
<body><!-- 挂载点，指定Vue实例的挂载位置 --><div id="app"></div><!-- hello world--><script>/*第一步：创建Vue实例1、为什么要new Vue()，直接调用Vue()函数不行吗？不行，因为直接调用Vue()函数，不创建实例的话，会出现以下错误：Vue is a constructor and should be called with the `new` keyword2、关于Vue构造函数的参数：options？options是一个对象，对象中可以包含以下属性：Vue框架要求这个options参数必须是一个纯粹的JS对象：{}在{}对象中可以编写大量的key:value主要是通过options这个参数来给Vue实例指定多个配置项。3、关于template配置项：template用来指定模板语句，模板语句是一个字符串形式的。什么是模板语句？Vue框架自己制定了一些具有特殊含义的特殊符号。模板语句可以是一个纯粹的HTML代码，也可以是Vue中的特殊规则。*/const myVue = new Vue({template: '<h1>hello world</h1>'})/*第二步：将Vue实例挂载到id='app'的元素位置。1、Vue实例都有一个$mount()方法，这个方法的作用是什么？将Vue实例挂载到制定位置。*/myVue.$mount('#app')</script></body>
</html>2、模板语句的数据来源
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模板语句的数据来源</title><script src="../js/vue.js"></script></head>
<body><div id="app"></div><script>/*模板语句的数据来源：1、data选项可以给模板语句提供数据支持2、data选项的类型是什么？ Object | Function（对象或函数）3、data配置项的专业叫法：Vue实例的数据对象4、data数据如何插入到模板语句当中？{{}}这是Vue框架自己搞的一套语法，被称为模板语法中的插值语法，{{data的key}}*/new Vue({template: `<h1>最新上映的电视剧:{{name}},上映时间:{{releaseTime}}，主角是{{lead.name}}，年龄为{{lead.age}}，其他演员有{{actors[0].name}}，今年{{actors[0].age}}</h1>`,data:{name: '狂飙',releaseTime: '2023-01-01',lead:{name:'高启强',age:40},actors:[{name:'安鑫',age:35},{name:'高启兰',age:30}]}}).$mount('#app')</script></body>
</html>3、template配置项详解
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>template配置项详解</title><script src="../js/vue.js"></script>
</head>
<body><div id="app"><div><h1>{{msg}}</h1><h1>{{name}}</h1></div></div><script>Vue.config.productionTip = falsenew Vue({/*关于template配置项：1、template后面指定的时模板语句，但是模板语句中只能有一个根结点。2、只要data中的数据发生变化，模板语句一定会重新编译。3、如果使用template配置项的话，指定挂载位置的元素会被替换。关于$mount('#app')el配置项和#mount()可以达到同样地效果。*//*错误的template: '<h1>{{msg}}</h1> <h1>{{name}}</h1>'*/data:{msg:'动力节点',name:'老杜'},el: '#app'})</script></body>
</html>4、Vue实例和容器的关系：一夫一妻制
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue实例和容器的关系是：一夫一妻制</title><script src="../js/vue.js"></script>
</head>
<body><div class="app"><h1>{{msg}}</h1></div><div class="app"><h1>{{msg}}</h1></div><div id="app2"><h1>{{name}}</h1></div><script>// Vue实例和容器只能是一对一new Vue({el : '.app',data : {msg : 'hello vue!!'}})// Vue实例和容器只能是一对一new Vue({el : '#app2',data :{name : 'bjpowernode'}})new Vue({el : '#app2',data :{name : 'bjpowernode2'}})</script></body>
</html>