后端初学Vue

一、Vue介绍

 二、Vue的使用

（1）Vue最简单的方法是引入Vue.js，可以在html中混合使用，如下：
　　html 里引入<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

　　Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

　　<div id="app">
　　{{ message }}
　　</div>

　　var app = new Vue({
　　　　el: '#app',
　　　　data: {
　　　　message: 'Hello Vue!'
　　　　}
　　})

(2) vue-cli 搭建Vue项目

下载nodejs 长期支持版 https://nodejs.org/zh-cn/download/

1.在安装目录下新建两个文件夹，命名为node_cache，和node_global。

2.在nodejs打开命令行窗口，然后输入命令（分开执行）：

npm config set prefix "D:xxxx\node\nodejs\node_global"
npm config set cache "D:xxxx\node\nodejs\node_cache"
3.设置nodejs 环境变量和系统变量

在用户变量这一栏中，添加一个变量名“NODE_PATH",值为：D:\XXXXX\nodejs\node_modules

系统变量选择Path编辑，添加选择Nodejs安装路径

4.安装vue-cli

 打开cmd ,敲入命令：
npm install --global vue-cli （–global：全局安装）

 初始化成功后 进入项目文件夹，执行命令，npm run dev 启动项目

 5.引入 ElementUi 组件
　　官网地址：https://element.eleme.cn/#/zh-CN

　　(1)执行命令：npm i element-ui -S
　　(2)在main.js里引入，如下：

　　import Vue from 'vue';

　　import ElementUI from 'element-ui';

　　import 'element-ui/lib/theme-chalk/index.css';

　　import App from './App.vue'; Vue.use(ElementUI);

三、相关语法知识

1.生命周期