vue入门

最新推荐文章于 2023-04-02 11:15:07 发布

Sk8？？？

最新推荐文章于 2023-04-02 11:15:07 发布

阅读量147

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/MRslonly/article/details/103038601

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue入门

1.vue.js是什么？
Vue是一个构建用户界面（UI）的渐进式JavaScript框架。
2.库框架的区别

库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者。例如：jQuery
框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架适合的地方框架会在适合的时机调用你的代码。框架规定了自己的编程方式，是一套完整的解决方案。框架的侵入性很高（从头到尾）。

3.Vue的特点

编码简洁，体积小
本身只关注UI，可以轻松引入vue插件和其他组件进行开发。
遵循MVVM模式

MVVM的介绍

MVVM：一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步。

MVVM ===> M / V / VM

M:model数据模型
V:view视图
VM:viewModel试图模型虚拟dom

V(修改数据)->M
M(修改数据)->v
数据是核心

4.Vue的安装
需要下载和安装的：

node.js:自带npm
vue-cli:脚手架构建工具，可以帮助我们创建项目
vue-router：vue跳转页面的路由，在创建项目时候可选择安装
依赖：安装项目所必须的依赖文件
VScode：最好用来写vue代码的IDE

vue.js配置环境命令

安装Nodejs http://nodejs.cn/
Node 检测node是否安装成功！ Cmd node –v，vue 集成开发环境必须借助npm 远程下载包https://www.npmjs.com/ 开发不使用npm 使用的cnpm
搭建vue开发环境，安装vue的脚手架工具(使用cnpm 安装先 )

	npm install -g cnpm --
registry=https://registry.npm.taobao.org

	npm install –global vue-cli

创建项目
Vue init webpack vuedemo01（在创建项目的时候如果报错，进入创建文件安装依赖）
Cd vuedemo01
Cnpm install
npm run dev

5.Vue扩展插件

vue.cli:脚手架
vue.router:路由管理
vuex：状态管理
element-ui：基于vue的UI组件库（PC端）
mint-ui：基于vue的UI组件库（移动端）
vue-resource：ajax请求（主要使用axios）

6.简单的demo

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <!--view -->
    <div id="app">
        <input v-model="message">
        <br>
        {{message}}
    </div>
    <script>
        // vm  实例
        const vm = new Vue({
            el : '#app', // element
            data : { // model
                message : 'Hello world',
            }
        })
    </script>
</body>
</html>