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框架的初识入门相关推荐

VUE框架详解入门
目录一.VUE框架原理 1. 了解VUE框架 2. VUE框架原理 3. MVC设计模式 4. MVVM设计模式二.引入VUE框架 1. 本地引入 2. 网络引入三.安装Vue插件四.使用方式 ...
Vue框架搭建快速入门
如何快速的搭建一个Vue的框架安装的环境说明安装的环境 - node.js https://nodejs.org/zh-cn/(官网) https://npm.taobao.org/mirror ...
Vue框架教程-从入门到项目实战
创建Vue项目我们通过vue-cli创建一个vue项目, 在cmd窗口输入 vue ui 进入vue-cli可视化界面(如果无效请升级vue-cli版本) 点击创建,选择一个项目目录输入项目名称和 ...
vue框架如何转换成普通html,html和vue框架
Vue框架Element的事件传递broadcast和dispatch方法分析前言最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法 ...
❤️《Vue前端基础框架集合从入门到高级》（小白也可学，建议收藏）❤️
<Vue前端基础框架集合从入门到高级>,小白也可学文章目录 <Vue前端基础框架集合从入门到高级>,小白也可学 ❤️一.前端核心分析 ❤️1.1.概述 ❤️1.2.前端三要素 ...
Vue简明实用教程(01)——Vue框架入门
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl Vue概述 Vue是一个渐进式的JavaScript框架. 官方网站 https://cn.v ...
Vue框架入门(一)---开发简易计算器
涉及知识: HTML.CSS.JavaScript Vue(v-for.v-model.v-on.v-clock) Gitee仓库 :https://gitee.com/vgtime123/Calcu ...
Vue框架的入门基础学习
当创建新的vue项目时,遇到无法加载文件 E:\node\node_global\vue.ps1,因为在此系统上禁止运行脚本的错误,以下为解决办法. vue中文文档菜鸟教程:Vue.js 该笔记只是 ...
2017 Vue.js 2快速入门指南
注意,据部分读者反映本文水多,怕湿身者勿进.后续推荐详解 Vue & Vuex 实践 2017 Vue.js 2快速入门指南翻译自Vue.js 2 Quickstart Tutorial 20 ...

Vue框架的初识入门

Vue框架的初识入门相关推荐

最新文章

热门文章