Vue框架的初识入门

一，什么是Vue框架

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二，如何运用

首先找到vue的官网Vue.js (vuejs.org)
在官网学习项目里找到教程，点击安装，选择：直接使用<script>引入
找到下载vue文件中的vue.js 和vue.min.js两个文件放到你的代码工具中，我使用的是VSC。

开始编写代码，在html文件中头部位置引入vue.js文件（这里两个文件都可以引用，但是如果我们是小白入门就用vue.js文件，因为这是开发版的里面会有代码报错详细提示和警告，min.js是生产版的，包体积小，产品上线时使用！）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入vue文件 -->
<script src="./vue.js"></script>

<body>

想要vue工作，就必须创建一个Vue实例，且要传入一个配置对象。

详细代码解读：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
   <div class="app">
       <h1>{{text}}</h1>
   </div> 
</body>
<script>
    const vm=new Vue({
        el:'.app',
        data:{
            text:'你好,Vue'
        }
    })
</script>
</html>

引入vue文件
写一个div容器，起一个类名，id名都可以，app容器里的代码依然符合html规范，只不过混入一些特殊的vue语法：{{text}}（插值语法）
app容器里的代码被称为【vue模板】
创建Vue实例 new Vue（{}）注意Vue首字母大写V，大括号里面是执行指令
el用于指定当前vue实例为哪个容器服务，值通常为选择器字符串
data中用于数据存储，数据供el所指定的容器去使用，值我们暂时写成一个对象
Vue实例和容器是一一对应的，真实开发中只有一个Vue实例，配合组件使用。

解释说明Vue实例和容器是一一对应的：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./vue.js"></script></head><body> <div class="app"> <h1>{{text}},我是{{name}}</h1> <h1>{{text}},我是{{name}}</h1> </div> <hr> <div class="app"> <h1>{{text}},我是{{name}}</h1> <h1>{{text}},我是{{name}}</h1> </div></body><script> const vm = new Vue({ el: '.app', data: { text: '你好,Vue', name: '张三', } })</script></html>
一个实例vue，无法操作两个容器，所以是一一对应。
通过vue操作实现页面内容的动态响应。

三，拓展重难点

标签： vue.js 前端 javascript

本文转载自: https://blog.csdn.net/m0_71345904/article/details/125981106
版权归原作者 Ednburgh- 所有，如有侵权，请联系我们删除。

Vue框架的初识入门

发表评论

“Vue框架的初识入门”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航