[code with me]学习Vue.js | 前端UI框架 | 无任何前置知识要求式教程 | #2

准备：

在整个视频的最上面你会找到一个附件,下载下来

有个小改动，将index.html中的第12行vue引用，删掉，换成新的vue引用，如下

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

1.限定html某个模块代码使用Vue

tips:只要规定了html某个模块使用vue，那么该模块下所有元素都由vue控制。

        位置：app.js

const app = Vue.createApp();

app.mount('#user-goal');

我做了什么：

①我创建了一个全局变量Vue，调用createApp()方法，以生成一个vue对象，并将其赋值给一个app变量，该变量只读，意味着该变量不可变。

③app变量调用mount()方法，为了与html某个模块建立联系。

mount()函数内的#user-goal，是为了和html中id为user-goal的标签建立绑定关系，使得vue应用于该section内所有元素，如下；

id为独一无二的，非常适用于这种情况

<section id="user-goal">
  <h2>My Course Goal</h2>
  <p></p>
</section>

2.vue中添加data属性

在createApp()括号内添加一个花括号，表明我们要添加一个对象

花括号内添加data属性，表明我想将该网站中的所有数据放在此处进行集中管理，data属性其实是个函数并返回一个对象，标准写法应该为②（此为下面代码的行数序号，下同），但是在javascript中可以简写为⑦，之后我们都会以⑦表示。

const app = Vue.createApp({
    data: function(){
        return {

        };
    },
    data(){
        return {

        };
    }
});

3.在data属性中添加变量，并于在html文件中绑定数据

        I.位置：app.js --> data属性内 ---> return对象内

        添加一个变量名，并赋值，如下：

data(){
    return {
        courseGoal: 'Finish the course and learn Vue!',
    }
}

---

         II.位置：index.html中 ---> <section id="user-goal">标签内         --->在第21行，也就是p标签内

        添加所谓的“小胡子语法”，即双花括号{{ }}； 然后在“小胡子”内添加courseGoal变量名

<section id="user-goal">
  <h2>My Course Goal</h2>
  <p>{{ courseGoal }}</p>
</section>

我做了什么：

我在app.js中的数据仓库中添加了一个courseGoal变量，并在html中利用“小胡子语法”将其与该变量绑定在一起，即js中数据变动则网页跟着变化。

在实际网页显示中，p标签中的{{ courseGoal }} 会被替换为courseGoal变量所包含的数据，专业术语叫做“文本插值”。

实例如下：

使用注意：该小胡子语法只使用于vue生效的地方，其他地方无效。

4.介绍v-bind，用以绑定html属性之链接

疑问：当我们想为html中某个元素制作超链接时，小胡子语法就不能用了，因为他不能用在HTML属性中，就要使用v-bind语法。

        I.位置：app.js，第5行，在data属性再添加一个字符串变量vueLink

vueLink: 'https://cn.vuejs.org/',

        II.位置：index.html，第22行

        新增一个p标签，正常我们添加一个链接是这样的，对吧，但这种情况下小胡子语法是无法使用于属性内部。

<p>Learn more about <a href="{{ vueLink }}">Vue</a></p>

       当你点下链接，只会出现如下情况

        所以我们修改为如下，

<p>Learn more about <a v-bind:href="vueLink">Vue</a></p>

再点下链接，就能行了。 

 5.添加methods属性，作为方法体承载的仓库，实现动态变化字样

提出问题：我们想每次刷新网站会随机刷新不同的欢迎语句，如何实现？

        I.位置：app.js，第8行

 目的：添加一个methods属性，用于存放方法体

methods: {
        
}

        II.位置：app.js，第9行

目的：添加一个方法，使得我们能够实现每次刷新网站，会随机出现不同欢迎语句。

outputGoal() {
   const randomNumber = Math.random();
     if(randomNumber < 0.5){
         return 'Learn Vue!';
     }else {
         return 'Master Vue!';
     }
}

我做了什么：

我创建了一个方法，方法名叫做outputGoal，每次调用该方法时，Math.random()都会生成一个0到1的随机数，如果该数字小于0.5则返回Learn Vue字符串，如果数字大于等于0.5则返回Master Vue字符串。

        III.位置：html中，第21行

        目的：我以上面刚创建的outputGoal方法取代之前的静态变量，使之能够动态变化。

<p>{{ outputGoal() }}</p>

实现如下： 

---

题外话：小胡子语法内部，是可以实现简单的JavaScript代码的，你可以直接把像：1+1、或math.random()的代码直接放入{{ }}内部，便可以直接执行；但不能实现过于复杂的如if条件语句代码，自己可以动手试试。

---

6.methods属性中的方法与data属性的参数交互

目的：我们想让method属性中的方法所需的变量直接从data属性中获取。

        I.位置：app.js，第4行，将之前的courseGoal删除，用以下替换之。

courseGoalA: 'Finish the course and learn Vue!',
courseGoalB: 'Master Vue and build amazing apps!',

        II.位置：app.js，methods属性中  ---> outputGoal方法体中 

outputGoal() {
   const randomNumber = Math.random();
   if(randomNumber < 0.5){
         return this.courseGoalA;
   }else {
         return this.courseGoalB;
   }
}

我做了什么：我用this.courseGoalA和this.courseGoalB两个变量取代了之前的两个硬编码，使得代码更灵活，在此处this关键字指向了data属性，使我们能获得data中数据变量。

试验下：

注意：在一般的情况下，this是不指向data属性的，但是vue做了点幕后的工作，将data属性的所有数据变量整合进一个vue程序对象，所以我们才能透过this使用data变量，其实不仅仅是data属性，methods属性也在内，还有很多。

---

7.介绍v-html指令，用以直接引入html元素

提出问题：如果我们想从比如说数据库中抓取html元素格式数据，并注入html元素该怎么做呢？

        I. 位置：app.js ---> 第5行代码

        将原来修改为如下：

courseGoalB: '<h2>Master Vue and build amazing apps!</h2>',

注意，这种情况下，小胡子语法是不能够直接使用的，这是为了防止XSS攻击。

        II.位置：index.html ----> 第21行代码

        将原来修改为如下：

<p v-html="outputGoal()"></p>

我做了什么：

我们使用新指令v-html，并用他执行outputGoal()方法体，他会将字符串变量'<h2>Master Vue and build amazing apps!</h2>'解释为html元素并呈现出来。

实验下：成功了

 但其实不应该这样使用，这操作绕开了内置的XSS攻击保护，所以依然会导致XSS攻击。

---

总结： 

这节课，我们学习了如何创建一个vue应用程序；

如何使用mount()方法链接html文件，最好是使用id选择器，因为是独一无二的；

我们将所有的数据和变量存储在data属性中，方法体则存储在methods属性中；

我们可以使用小胡子语法，即{{ }}双花括号插值，进行数据绑定，小胡子中还可以执行简单的js代码；

我们可以使用v-bind指令绑定链接和所有只能用在HTML属性内部的参数；

我们可以使用this关键字获取data属性或methods属性中的变量或方法