01.初识vue框架

终是痴情负了空

已于 2022-09-15 23:34:59 修改

阅读量141

点赞数

分类专栏： vue基础文章标签： vue.js javascript 前端

于 2022-08-16 17:29:08 首次发布

本文链接：https://blog.csdn.net/m0_51092575/article/details/126370601

版权

vue基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、vue简介

1、VUE:一套用于构建用户界面的渐进式JavaScript框架；
Vue可以自底向上逐层的应用
简单应用:只需一个轻量小巧的核心库；
复杂应用:可以引入各式各样的Vue插件；
在这里插入图片描述
3、vue的特点：
A.采用组件化模式，提高代码复用率，且让代码更好维护；
B.声明式编码，让编码人员无需直接操作DOM，提高开发效率；（命令式编码：推一下，走一下）

C.使用虚拟DOM和Diff算法，尽量复用DOM节点
在这里插入图片描述

二、认识vue官网

Vue周边库：
. vue-cli: vue脚手架
. vue-resource(axios): ajax请求
. vue-router:路由
. vuex:状态管理(它是 vue的插件但是没有用vue-xxx的命名规则)
. vue-lazyload:图片懒加载
. vue-scroller:页面滑动相关
. mint-ui:基于vue的U组件库(移动端)
. element-ui:基于vue的UI组件库(PC端)

三、vue框架的安装

（1）在script之间直接使用

A.下载开发版本的vue，先在vue官网下载js文件；
B.安装开发者调试工具;（vue.js devtools）

在这里插入图片描述
C.（可选）关闭提示；
修改vue.config对象，将productionTip改为false

在这里插入图片描述
注：B和C操作是去除运行时开发者工具页面弹出的警告；

（2）使用脚手架安装

vue脚手架的文档：https://cli.vuejs.org/zh/
具体执行步骤：

第一步〔仅第一次执行)∶全局安装@vue/cli。
npm install -g @vueclie
第二步：切换到你要创建项目的目录，然后使用命令创建项目
vue create xxxx
这里需要选择vue的版本
创建成功：
第三步:启动项目
npm run serve

项目启动成功：

备注:
1.如出现下载缓慢请配置npm淘宝镜像:npm config set registry
https://registry.npm.taobao.org
2. Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpakc配置，请执行： vue inspect > output.js

四、初识Vue

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
4.Vue实例和容器是一一对应的;
5真实开发中具有一个vue实例，并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性;
7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新;

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
注意区分：js表达式与js代码（语句）
  1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方；
    a.a
    b.a+b
    c. x===y? 'a' | 'b'
  2.js代码
    a. if(){}
    b.for(){}
  js表达式是一种特殊的js代码；
-->
<!--容器-->
  <div id="root">
    <h1>HELLO,{{name}}.{{address}} </h1>
  </div>
<script type="text/javascript">
  Vue.config.productionTip = false
  //创建vue实例
  new Vue({
    el:'#root',//用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
    data:{//Data中用于存储数据，数据供el所指定的容器使用，值我们暂时先写成对象；
      name: '中国人',
      address:'湖南'
    }
  })

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