01_初始Vue

聊了
87 阅读3分钟

01_初识vue

本章知识点

初始Vue：
 1.想让Vue工作，就必须创建换一个Vue实例，且要传入一个配置对象；
 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
 3.rott容器里的代码依然称为Vue模板。
 创建Vue实例
 new Vue({
     el:'#root',    //el用于指定当前Vue实例为那个容器服务。值通常为css选择器字符串。
     data:{   // data中用于存储数据，数据提供el所指定的容器去使用。值我们暂时先写成一个对象。
         name:'尚硅谷'
     }
 })

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>初识vue</title>
  <!-- 引入vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
   <!--
  	初始Vue：
    1.想让Vue工作，就必须创建一个Vue实例，且还要传入一个配置对象。
    2.root容器里的代码依然符合html规范，只不过混入了一个些特殊的Vue语法；
    3.root容器里的代码被称为[Vue模板]
  -->
      
  <!-- 准备好一个容器 -->
  <div id="root">
      <h1>Hello, 尚硅谷</h1>
  </div>

  <script type="text/javascript">
      Vue.config.productionTip = false  // 阻止vue在启动的时候产生提示。
      // 创建一个Vue的实例
      new Vue({
        el:'#root', //用于指定当前vue的实例为那个容器服务，值通常为css选择器字符串。
        data:{    // data用于存储数据，数据提供el所指定的容器去使用。值我们先写一个对象。
          name:'尚硅谷'
        }
      })

  </script>
</body>
</html>

第一步在在线文档下载中vue.js文件开发版本和生产版本

下载来

1696685119168.png

vue.js是什么？
vue(读音/vjv/，类似于view) 是一套用于构建用户界面的渐进式框架，与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于第三方库或者有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页面应用提供驱动。
如果你想在深入学习Vue之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。
如果您已经是有经验的前端开发者，想知道Vue与其他库/框架有哪些区别。请查看对比其他框架。

1696685538248.png

引用js文件

1696685753869.png

控制台输出

1696685807332.png

1696686112315.png

代码


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>初识vue</title>
  <!-- 引入vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <script type="text/javascript">
      Vue.config.productionTip = false  // 阻止vue在启动的时候产生提示。
      
  </script>
</body>
</html>

1696686458843.png

1696686672384.png

图标放到根目录

创建 Vue实例

1696687052561.png

<div id =‘root'>
	<h1>Hello,尚硅谷</h1>
</div>

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

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

1696687475475.png

1696687729824.png

1696687886722.png

sp20231007_222853_797.png

总结知识点

初始Vue：
 1.想让Vue工作，就必须创建换一个Vue实例，且要传入一个配置对象；
 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
 3.rott容器里的代码依然称为Vue模板。
 创建Vue实例
 new Vue({
     el:'#root',    //el用于指定当前Vue实例为那个容器服务。值通常为css选择器字符串。
     data:{   // data中用于存储数据，数据提供el所指定的容器去使用。值我们暂时先写成一个对象。
         name:'尚硅谷'
     }
 })

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>初识vue</title>
  <!-- 引入vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
   <!--
  	初始Vue：
    1.想让Vue工作，就必须创建一个Vue实例，且还要传入一个配置对象。
    2.root容器里的代码依然符合html规范，只不过混入了一个些特殊的Vue语法；
    3.root容器里的代码被称为[Vue模板]
  -->
      
  <!-- 准备好一个容器 -->
  <div id="root">
      <h1>Hello, 尚硅谷</h1>
  </div>

  <script type="text/javascript">
      Vue.config.productionTip = false  // 阻止vue在启动的时候产生提示。
      // 创建一个Vue的实例
      new Vue({
        el:'#root', //用于指定当前vue的实例为那个容器服务，值通常为css选择器字符串。
        data:{    // data用于存储数据，数据提供el所指定的容器去使用。值我们先写一个对象。
          name:'尚硅谷'
        }
      })

  </script>
</body>
</html>
avatar
文章
阅读
粉丝