前端框架学习之搭建vue2的环境书写案例并分析

news2024/12/25 15:10:12

搭建vue的环境

Hello小案例

分析案例

搭建vue的环境

官方指南假设你已经了解关于HTML CSS 和JavaScript的中级知识

如果你刚开始学习前端开发

将框架作为你的第一步可能不是最好的主意

掌握好基础知识再来吧

之前有其他框架的使用经验会有帮助

但这不是必需的

最开始学习vue 不推荐直接用脚手架 cli

我们推荐两种安装vue的方式

第一种是直接用< script >< /script >标签引入

第二种使用NPM

我们采用直接引入的方式

Vue 2 已经终止支持且不再维护。请升级到 Vue 3 或了解有关 Vue 2 终止支持 (EOL) 的信息。

下载放入

引入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>

  <!-- 引入 vue -->
  <script type="text/javascript" src="./js/vue.js"></script>
  
</head>

<body>
  
</body>

<script>
  
</script>

</html>

看一眼控制台

我们在控制台输入Vue

找到Vue这个函数

安装一个脚手架

我们在国内的网络是访问不了谷歌商店的

我们选择的是引入本地文件

我们可以手动添加扩展程序

这时候我们发现

控制台之前那个警告

提醒我们要安装vue的Detools

脚手架

我们还可以关闭这个提示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>

  <!-- 引入 vue -->
  <script type="text/javascript" src="./js/vue.js"></script>
  
</head>

<body>
  
  <script type="text/javascript">
    Vue.config.productionTip=false;
  </script>


</body>

</html>

Hello小案例

我们在前端这样书写

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>

  <!-- 引入 vue -->
  <script type="text/javascript" src="./js/vue.js"></script>
  
</head>

<body>

  <div id="root">
    <h1>Hello World</h1>
  </div>

  <script type="text/javascript">
    <!--阻止vue在启动时生成生产提示-->
    Vue.config.productionTip=false;
  </script>

</body>

</html>

这边报错

查看具体信息

找127.0.0.1 本机的5500服务器

去要页前图标

我们在vscode里面有这个选项

默认就是在本机的5500这个端口上开了一个服务器

并且把当前文件整合到这个服务器上去

证实我们的想法

建立联系

Vue容器和div

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>

  <!-- 引入 vue -->
  <script type="text/javascript" src="./js/vue.js"></script>
  
</head>

<body>

  <div id="root">
    <h1>Hello World</h1>
  </div>

  <script type="text/javascript">
    
    //阻止 Vue 在启动时生成生产提示
    Vue.config.productionTip=false;

    //创建 Vue 实例 
    const x=new Vue({
      //用于指定当前 Vue 实例为哪个容器服务 值通常为 css 选择器字符串
      el:'#root'
    })

  </script>

</body>

</html>

我们为什么不把这个World

转化成一个数据模型

我们只负责把数据维护好那样用到数据的地方自然还会改变

我们在script标签里面修改

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>

  <!-- 引入 vue -->
  <script type="text/javascript" src="./js/vue.js"></script>
  
</head>

<body>

  <div id="root">
    <!-- Vue 插值语法-->>
    <h1>Hello , {{name}}</h1>
  </div>

  <script type="text/javascript">
    
    //阻止 Vue 在启动时生成生产提示
    Vue.config.productionTip=false;

    //创建 Vue 实例 
    new Vue({
      //用于指定当前 Vue 实例为哪个容器服务 值通常为 css 选择器字符串
      el:'#root',
      //data 中用于存储数据 数据供 el 所指定的容器去使用
      //数值我们暂时先写成一个对象
      data:{
        name:'尚硅谷',
      }
    })

  </script>

</body>

</html>

浏览器

root容器里面的代码被称为Vue模版

我们来看一看

先有的是上面的div标签里的容器

然后才有Vue实例

容器知道后把实例拿过来

解析

然后扫描有没有自己设计的特殊语法

然后把name填到里面

就生成了全新的div 标签为root的容器

再把解析完的东西重新加载到页面上替换到先前的东西

解析后就成为了模版一个正常的html片段

分析案例

如果创建两个容器

标签都是root

那么是否这两个容器都能被Vue接管呢

然而我们的页面却不这么认为

Vue实例并没有解析下一个容器

我们换一种思路

假如只有一个容器

我们由两个Vue实例

接管的区域都是标签为root

那么会出现什么情况呢

浏览器

这边报错

Vue找不到元素root 在37行

再看这个

一个容器只能被一个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>

  <!-- 引入 vue -->
  <script type="text/javascript" src="./js/vue.js"></script>
  
</head>

<body>

  <div id="root">
    <!-- Vue 插值语法-->
    <h1>Hello , {{name}},{{adderss}}</h1>
  </div>

  <script type="text/javascript">
    
    //阻止 Vue 在启动时生成生产提示
    Vue.config.productionTip=false;

    //创建 Vue 实例 
    new Vue({
      //用于指定当前 Vue 实例为哪个容器服务 值通常为 css 选择器字符串
      el:'#root',
      //data 中用于存储数据 数据供 el 所指定的容器去使用
      //数值我们暂时先写成一个对象
      data:{
        name:'尚硅谷',
        adderss:'北京昌平',
      }
    })

  </script>

</body>

</html>

浏览器显示