Vue全流程--Vue2导入_vue2 js文件-CSDN博客

本文链接：https://blog.csdn.net/2301_77136716/article/details/145229494

作为一名不打算考研的大三下学期的大学生，我从寒假开始记录我的前端学习笔记，通过该笔记后来者可以节省一点时间，同时也可以看看我这学习的这条路线是否可以找到工作。

在学习该框架之前，花费大概一周时间复习了html、CSS、js，基础较为牢固

我在学习时已经知道VUE2作者不再更新维护，所以曾直接学习VUE3，但是在做一些项目练习时，有一些项目是用VUE2为基础编写。所以我又从Vue2开始学习

一、VUE导入

1、首先去Vue2官方网站下载Vue.js文件网站链接：介绍 — Vue.js (vuejs.org)

找到上面图标，点击即可下载

2、创建文件夹，并将vue.js也拖入该文件夹内

3、在head头部中使用 <script type="text/javascript" src="vue.js"></script>语句导入

<!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 type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div class="biaoqian">
     <h1>Hello,{
  
  {name}}</h1> <!-- 使用了插值语法 {
  
  {}} -->
     <a v-bind:href="url">点击</a><!-- 使用了指令语法 v- -->  <!-- v-bind:可以将字符串改为表达式执行 --> 
    </div>
   
    <script type="text/javascript">
        Vue.config.productionTip = false  //这句话用于忽略提醒-可以不用关注
        const app =new Vue({
        el:".biaoqian",
        data:{
            name:"小王",
            url : 'https://space.bilibili.com/1347961416?spm_id_from=333.788.0.0'
        }
        
        })
    </script>
</body>
</html>

4、创建实例（对上面代码的解析）

利用{ {name}}或v-bind标记需要进行替换的地方（有点类似jinjia2模板引擎的使用）

 <div class="biaoqian">
     <h1>Hello,{
  
  {name}}</h1> <!-- 使用了插值语法 {
  
  {}} -->
     <a v-bind:href="url">点击</a><!-- 使用了指令语法 v- -->  <!-- v-bind:可以将字符串改为表达式执行 --> 
  </div>

利用类选择器定位。将data数据进行绑定

<script type="text/javascript">
        Vue.config.productionTip = false 
        const app =new Vue({
        el:".biaoqian",
        data:{
            name:"小王",
            url : 'https://space.bilibili.com/1347961416?spm_id_from=333.788.0.0'
        }
        
        })
</script>

5、在B站有我这章的语音讲解--认真的人参的个人空间-认真的人参个人主页-哔哩哔哩视频