Vue是一个MVVM（Model、View、ViewModel） 前端渐进式框架 框架，核心在于视图与模型的双向绑定。数据发生变化，则视图会发生变化，反之视图发生变化数据也会发生变化

导入vue cdn

基础语法

if-else

{{message}}鼠标悬浮试试
true
false
else

for

{{item.message}}--{{index}}

Methods方法

Click Me

双向绑定核心v-model

输入文本：变化：{{message}}性别： 男 女选中了：{{sex}}下拉框：--请选择--ABCvalue: {{opp}}

v-component自定义vue组件

大体流程就是：

1. 首先我们创建了一个vue对象叫做mv，在mv中存储了一个数组，
2. 利用v-component自定义了一个组件也就是yuqu这个标签，原型就是li标签。
3. 在视图界面引用该组件，并利用v-for标签对其进行遍历
4. 获取到每个遍历值item通过v-bind标签绑定到对应的字段上，也就是此处的think参数名
5. 组件获取到具体的item，在用原型也就是此处li标签对其进行遍历

Vue：Axios异步通信

导入cdn

实例

{{info.name}}{{info.url}}{{info.address}}点击跳转

vue项目搭建

// 创建项目  初始化
vue init webpack myvue
// 进入项目 
cd 项目名
// 安装vue-router
npm i vue-router@3.5.2 -legacy-peer-deps
// 安装 element-ui
npm i element-ui -S
// 安装依赖环境
npm install 
// 安装SASS加载器
npm install sass-loader node-sass --save-dev
// 启动项目  在当前项目的目录下
npm run dev 

安装webpack

// 安装 webpack
npm install webpack -g
npm install webpack-cli -g
// 查看安装版本  表示安装成功
webpack -v
webpack-cli -v

vue-cli

使用webpack

webpack就是前端采用模块开发的核心所在，采用标准的res6，我们可以使用webpack将任意编写好的js内容封装为工具或者说是组件，然后可以将其引入到其他的模块当中使用，很大程度上实现了解耦操作。

并且各个模块中的变量名仅在当前模块中有效，也就是说即便你引入的资源中有与你当前模块的变量重名也不会有任何影响

要使用webpack则需要在当前项目目录下安装webpack组件

npm install webpack -g
npm install webpack-cli -g

安装完毕之后来进行简单测试：

// hello.js
// exports设定方法可以对外输出
exports.sayHi = function (){document.write("
hello,JaThink!
")
};
// main.js
// 使用require关键字可以引入其他模块的对象
// 可以通过该对象调用被引入模块中exports的方法
var hello = require("./hello");
hello.sayHi();

下面是配置webpack打包的配置文件webpack.config.js

// 配置打包文件
module.exports = {// 打包实体：该entry所指定的文件或目录参与打包entry: './modules/main.js',// 打包后的资源输出路径output: {// 输出文件名称filename: "./js/bundle.js"}
};

最后可以在控制台，通过webpack关键字实现打包，生成资源目录及测试文件目录如下：

在使用时只需要在文件当中引入打包好的资源即可

使用vue-router

1. 安装vue-router依赖资源

npm install vue-router

最终测试时如果页面显示空白，控制台报错Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)，那么说明vue-router的版本不对，需要下载适合vue2的版本

// 首先卸载之前的vue-router
npm uninstall vue-router
// 然后下载vue-router
npm i vue-router@3.5.2 -legacy-peer-deps

在使用vue-router之前，我们先来看一下我这里的vue项目文件：

要使用vue-router，首先我们要自定义一个router配置文件，此处就是上述的router/index.js配置文件，配置如下：

// 路由配置文件
import Vue from "vue";
import VueRouter from "vue-router";
import content from "../src/components/content";
import Main from "../src/components/Main";
// 安装路由
Vue.use(VueRouter);
// 配置导出路由
export default new VueRouter({routes:[{// 路由路径path: '/content',name: 'content',// 跳转组件component:content},{// 路由路径path: '/main',name: 'main',component: Main}]
})

下面是文本页和主页的示例

项目启动页：App.vue

上述使用router-link标签来展示不同页面，并且不许加上router-view否则无法正常显示。最后要在主程序入口处开启对路由配置的扫描，否则无法生效

// 主程序入口
import Vue from 'vue'
import App from './App'
// 主程序导入路由
import router from "../router";//自动扫描路由配置Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',// 配置路由router,components: { App },template: ''
})

开启路由扫描后，必须在下面vue对象中开启路由 也就是：router

配置ElementUI

安装ElementUI资源插件

npm i element-ui -S

导入ElementCSS文件

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