Vue初相识

目录

创建第一个Vue程序

Vue的data配置项

Vue的template配置项

Vue的el配置项

在使用Vue之前我们需要去官网先下载Vue，Vue本质是基于JavaScript（JS）实现的框架。

Vue官网

Vue2：https://v2.cn.vuejs.org/

Vue3：https://cn.vuejs.org/

下载完之后，使用script引入Vue.js，引入之后Vue就会被注册成一个全局变量，可以通过控制台查看。

创建第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个Vue程序</title>
<!– 第一步：引入Vue.js –>
<script src="../js/vue.js"></script>
</head>
<body>
<!– 第二步：指定挂载位置 –>
<div id="app"></div>
<!– 第三步：使用Vue –>
<script>
// 3.1创建Vue实例
const vm=new Vue({
template:'<h1>hello world!</h1>'
})
// 3.2 将Vue实例挂载到指定位置
vm.$mount('#app')
// vm.$mount(document.getElementById("app"));
</script>
</body>
</html>

代码解释

1、当使用script引入Vue.js之后，Vue会被注册为一个全局变量，就像引入jQuery之后，jQuery也会被注册为一个全局变量,通过控制台可以看到这个Vue全局变量

2、必须new一个Vue实例，如果不new的话，是无法直接使用Vue的

第一步：创建一个空对象，作为将要返回的对象。 let vm = {}

第二步：将这个空对象的原型指向构造函数的prototype属性，也就是将对象的__proto__属性指向构造函数的prototype。

【让对象能沿着原型链去使用构造函数中prototype上的方法】 vm.__proto__ = Vue.prototype

第三步：将这个空对象赋值给构造函数内部的this关键字，执行构造函数。【让构造器中设置的属性和方法设置在这个对象上】

Vue.apply(vm, 参数)

第四步：返回这个对象。 return vm

3、Vue的构造方法参数是一个options配置对象，配置对象中有大量Vue预定义的配置，每一个配置项都是key：value结构，一个key：value就是一个Vue的配置项

4、template配置项：value是一个模版字符串，在这里编写符合Vue语法规则的代码（Vue有一套自己规定的语法规则）

写在这里的字符串会被Vue编译器编译，将其转换为浏览器能够识别的HTML代码，template称之为模版

5、Vue实例的$mount方法，这个方法完成挂载工作，将Vue实例挂载到指定位置，也就是将Vue编译后的HTML代码渲染到页面指定的位置，注意：指定位置的元素会被替换

6、‘#app’的语法类似于css中的id选择器语法，表示将Vue实例挂载到id=‘app’的元素位置，也可以用其他选择器，如果匹配到多个位置，Vue只会选择第一个位置进行挂载（从上到下第一个），或者直接用原生js去获取：vm.$mount(document.getElementById("app"));

Vue的data配置项

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模板语句的数据来源</title>
<!– 引入Vue –>
<script src="../js/vue.js"></script>
</head>
<body>
<!– 指定挂载位置 –>
<div id="app"></div>
<!– vue程序 –>
<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配置项

<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>
<div id="app">
<!– 模板语句：可以写模板语法（插值语法，指令语法） –>
<h1>{{msg}}</h1>
<h2>欢迎学习Vue！！</h2>
</div>

代码解释

1、template只能有一个根元素

2、template编译后进行渲染时会将挂载位置的元素替换。

3、template后面的代码如果需要换行的话，建议将代码写到``符号当中，不建议使用 + 进行字符串的拼接。

4、template配置项可以省略，将其直接编写到HTMl代码中，此时指定挂载的位置就不会被替换

5、只要data中的数据发生了变化，模版语句就一定会重新编译

Vue的el配置项

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>el配置项</title>
<!– 引入Vue –>
<script src="../js/vue.js"></script>
</head>
<body>
<!– 指定挂载位置 –>
<div id="app">
<div>
<h1>{{msg}}</h1>
<h1>{{name}}</h1>
</div>
</div>
<!– vue程序 –>
<script>
new Vue({
data: {
msg: "Hello World!!!!!!!",
name: "张三",
},
// el配置项：确定挂载对象
el: "#app",
//el : document.getElementById('app')
});
//}).$mount('#app')
</script>
</body>
</html>

代码解释

1、可以不使用$mount('#app')的方式进行挂载了。在Vue中有一个配置项：el ，

el配置项和$mount()可以达到同样的效果。

2、el配置项的作用？

el是element单词的缩写，翻译为“元素”，el配置项主要是用来指定Vue实例关联的容器。也就是说Vue所管理的容器是哪个。

el : '#app'，表示让Vue实例去接管id='app'的容器。

注意：一个Vue实例只能接管一个容器

<body>
<!– 准备容器 –>
<div class="app1">
<h1>{{msg}}</h1>
<h2>第一个</h2>
</div>

<div class="app2">
<h1>{{msg}}</h1>
<h2>第二个</h2>
</div>

<!– vue程序 –>
<script>
const vm1 = new Vue({
el: ".app1",
data() {
return {
msg: "app1",
};
},
});
const vm2 = new Vue({
el: ".app2",
data() {
return {
msg: "app2",
};
},
});
</script>
</body>