VUE
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
快速入门
新建 HTML 页面，引入 Vue.js文件
<scriptsrc="js/vue.js"></script>在JS代码区域，创建Vue核心对象，进行数据绑定
newVue({
el: "#app",
data() {
return {
username: ""
}
}
});创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
el ： 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data ：用来定义数据模型
methods ：用来定义函数。这个我们在后面就会用到
编写视图
<divid="app">
<inputname="username"v-model="username">
{{username}}
</div>插值表达式
{{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。
形式：{{表达式}}。
内容可以是：变量、三元运算符、函数调用、算术运算
整体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-model="username">
<!--插值表达式-->
{{username}}
</div>
<script src="js/vue.js"></script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){ // data() 是 ECMAScript 6 版本的新的写法
return {
username:""
}
}
/*data: function () {
return {
username:""
}
}*/
});
</script>
</body>
</html>Vue 指令
指令 | 作用 |
v-bind | 为HTML标签绑定属性值，如设置 href , css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为HTML标签绑定事件 |
v-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
v-else | |
v-else-if | |
v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
v-for | 列表渲染，遍历容器的元素或者对象的属性 |
<!-- v-bind -->
<a v-bind:href="url">百度一下</a>
<!--
v-bind 可以省略
-->
<a :href="url">百度一下</a>
<!-- v-model -->
<input name="username" v-model="username">
<!-- v-on -->
<input type="button" value="一个按钮" v-on:click="show()">
<!--
而使用 `v-on` 时还可以使用简化的写法，将 `v-on:` 替换成 `@`，html代码如下
-->
<input type="button" value="一个按钮" @click="show()">
<!--
上面代码绑定的 `show()` 需要在 Vue 对象中的 `methods` 属性中定义出来
-->
new Vue({
el: "#app",
methods: {
show(){
alert("我被点了");
}
}
});
<!-- v-show -->
<div v-show="count == 3">div v-show</div>
<br>
<input v-model="count">
<!-- v-for -->
<标签 v-for="变量名 in 集合模型数据">
{{变量名}}
</标签>
<div v-for="addr in addrs">
{{addr}} <br>
</div>
<标签 v-for="(变量名,索引变量) in 集合模型数据">
<!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
{{索引变量 + 1}} {{变量名}}
</标签>
<div v-for="(addr,i) in addrs">
{{i+1}}--{{addr}} <br>
</div>
声明周期以及mounted
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中==发送异步请求，加载数据
前端工程化
所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点
模块化：将js和css等，做成一个个可复用模块
组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
自动化：项目的构建，测试，部署全部都是自动完成
所以对于前端工程化，说白了，就是在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率，降低开发难度等等。接下来我们就需要学习vue的官方提供的脚手架帮我们完成前端的工程化。
我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板。Vue-cli主要提供了如下功能：
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
我们需要运行Vue-cli，需要依赖NodeJS，NodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS，然后才能安装Vue-cli
NodeJS安装和Vue-cli安装参考NodeJS安装_Java小白，一起学习的博客-CSDN博客
Vue项目简介
环境准备好了，接下来我们需要通过Vue-cli创建一个vue项目，然后再学习一下vue项目的目录结构。Vue-cli提供了如下2种方式创建vue项目:
命令行：直接通过命令行方式创建vue项目
vue create vue-project01图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建
vue ui图形化界面如下：
创建vue项目
此处我们通过第二种图形化界面方式给大家演示。
首先，我们再桌面创建vue文件夹，然后双击进入文件夹，来到地址目录，输入cmd，然后进入到vue文件夹的cmd窗口界面
然后再当前目录下，直接输入命令vue ui进入到vue的图形化界面，如下图所示：
然后我门选择创建按钮，在vue文件夹下创建项目
vue项目目录结构介绍
vue项目的标准目录结构以及目录对应的解释如下图所示:
其中我们平时开发代码就是在src目录下
对于8080端口，经常被占用，所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容，添加如下代码：
devServer:{
port:7000
}我们访问的首页是index.html，index.html的代码很简洁，但是浏览器所呈现的index.html内容却很丰富
对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件，其代码如下：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')上述代码中，包括如下几个关键点：
import: 导入指定文件，并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App
new Vue(): 创建vue对象
$mount('#app');将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。
router: 路由，详细在后面的小节讲解
render: 主要使用视图的渲染的。
我们main.js中通过代码挂在到index.html的id=app的标签区域的。vue创建的dom对象挂在到id=app的标签区域
打开App.vue,注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分：
template: 模板部分，主要是HTML代码，用来展示页面主体结构的
script: js代码区域，主要是通过js代码来控制模板的数据来源和行为的
style: css样式部分，主要通过css样式控制模板的页面效果得
Vue路由
路由介绍
前端路由：URL中的hash(#号之后的内容）与组件之间的对应关系
当我们点击时，浏览器的地址栏会发生变化，路由自动更新显示与url所对应的vue组件。
而我们vue官方提供了路由插件Vue Router,其主要组成如下：
VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>：请求链接组件，浏览器会解析成<a>
<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件
其工作原理如下图所示：
首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;
然后我们页面提供一个<router-link>组件,用户点击，发出路由请求;
接着我们的VueRouter根据路由请求，在路由表中找到对应的vue组件；
最后VueRouter会切换<router-view>中的组件，从而进行视图的更新
路由入门
先我们需要先安装vue-router插件，可以通过如下命令
npm install vue-router@3.5.1然后我们需要在src/router/index.js文件中定义路由表，根据其提供的模板代码进行修改，最终代码如下：
import Vue 'vue'
import VueRouter 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/emp', //地址hash
name: 'emp',
component: () => import('../views/tlias/EmpView.vue') //对应的vue组件
},
{
path: '/dept',
name: 'dept',
component: () => import('../views/tlias/DeptView.vue')
}
]
const router = new VueRouter({
routes
})
export default router
注意需要去掉没有引用的import模块。
在main.js中，我们已经引入了router功能，如下图所示：
路由基本信息配置好了，路由表已经被加载，此时我们还缺少2个东西，就是<router-lin>和<router-view>,所以我们需要修改每个页面的按钮添加router-link,其代码如下：
<el-menu-item index="1-1">
<router-link to="/dept">部门管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/emp">员工管理</router-link>
</el-menu-item>然后我们还需要在内容展示区域即App.vue中定义route-view，作为组件的切换，其App.vue的完整代码如下：
<template>
<div id="app">
<!-- {{message}} -->
<!-- <element-view></element-view> -->
<!-- <emp-view></emp-view> -->
<router-view></router-view>
</div>
</template>
<script>
// import EmpView './views/tlias/EmpView.vue'
// import ElementView './views/Element/ElementView.vue'
export default {
components: { },
data(){
return {
"message":"hello world"
}
}
}
</script>
<style>
</style>但是我们浏览器打开地址： http://localhost:7000/ ，发现一片空白，因为我们默认的路由路径是/,但是路由配置中没有对应的关系，
所以我们需要在路由配置中/对应的路由组件，代码如下：
const routes = [
{
path: '/emp',
name: 'emp',
component: () => import('../views/tlias/EmpView.vue')
},
{
path: '/dept',
name: 'dept',
component: () => import('../views/tlias/DeptView.vue')
},
{
path: '/',
redirect:'/emp' //表示重定向到/emp即可
},
]打包部署
前端工程打包
通过nginx服务器发布前端工程
前端工程打包
我们直接通过VS Code的NPM脚本中提供的build按钮来完整，如下图所示，直接点击即可：
然后会在工程目录下生成一个dist目录，用于存放需要发布的前端资源，如下图所示：
部署前端工程
通过nginx服务器，详细查看nginx_Java小白，一起学习的博客-CSDN博客
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
