前言
本文为Vue框架基础知识、语法与使用介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~
本文上接：【Vue】Java后端程序员也必须掌握的前端框架（上）
十一、自定义事件内容分发
<div id="app"> <todo> <todo-title slot="todo-title" v-bind:title="title"></todo-title> <todo-items slot="todo-items" v-for="{item,index} in todoItems" :item="item" v-bind:index="index" v-on:remove="removeItems(index)" v-bind:key="index"></todo-items> </todo> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script> <script> // 定义一个待办事项的组件 //插槽 Vue.component(‘todo’, { template: ‘<div>\ <slot name="todo-title"></slot>\ <ul>\ <solt name="todo-items"></solt>\ </ul>\ </div>‘ }); Vue.component(“todo-title”,{ props: [‘title’], template: ‘<div>{ {title} }</div>‘ }); Vue.component(“todo-items”,{ props: [‘item’,’index’], //只能绑定当前组件的方法 template: ‘<li>{ {item} }<button @click="remove">删除</button></li>‘, methods:{ remove:function (index) { //自定义事件并发 this.$emit(‘remove’, index); } } }); var vm = new Vue({ el:”#app”, data:{ title:’kaungshen’, todoItems:[‘狂神说’,’java’] }, methods: { removeItems:function (index) { console.log(“删除了”+this.todoItems[index]+”OK”); this.todoItems.splice(index,1); } } }); </script>
十二、vue-cli
- vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板
1.安装 vue-cli
cnpm install vue-cli -g # 测试是否安装成功 # 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack vue list
2.第一个 vue-cli 应用程序
1、我们新建一个文件夹 vue-cli； 2、创建一个基于 webpack 模板的 vue 应用程序 # 这里的 myvue 是项目名称，可以根据自己的需求起名 vue init webpack myvue # 一路都选择no即可; Project name：项目名称，默认 回车 即可 Project description：项目描述，默认 回车 即可 Author：项目作者，默认 回车 即可 Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加） Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添 加） Set up unit tests：单元测试相关，选择 n 不安装（后期需要再手动添加） Setup e2e tests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加） Should we run npm install for you after the project has been created：创建完成后直接初始 化，选择 n，我们手动执行;运行结果! 初始化并运行 cd myvue npm install npm run dev
3.Vue-cli目录结构
build 和 config：WebPack 配置文件
node_modules：用于存放 npm install 安装的依赖文件
src： 项目源码目录
static：静态资源文件
.babelrc：Babel 配置文件，主要作用是将 ES6 转换为 ES5
.editorconfig：编辑器配置
eslintignore：需要忽略的语法检查配置文件
.gitignore：git 忽略的配置文件
.postcssrc.js：css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法
index.html：首页，仅作为模板页，实际开发时不使用
package.json：项目的配置文件
name：项目名称
version：项目版本
description：项目描述
author：项目作者
scripts：封装常用命令
dependencies：生产环境依赖
devDependencies：开发环境依赖
项目的入口文件：
import Vue from ‘vue’ import App from ‘./App’ Vue.config.productionTip = false; / eslint-disable no-new / new Vue({ el: ‘#app’, components: { App }, template: ‘<App/>‘ }); /* import Vue from ‘vue’ ：ES6 写法，会被转换成 require(“vue”);（require 是 NodeJS 提供的模块加载器） import App from ‘./App’ ：意思同上，但是指定了查找路径，./ 为当前目录 Vue.config.productionTip = false ：关闭浏览器控制台关于环境的相关提示 new Vue({…}) ：实例化 Vue el: ‘#app’ ：查找 index.html 中 id 为 app 的元素 template: ‘’ ：模板，会将 index.html 中替换为 components: { App } ：引入组件，使用的是 import App from ‘./App’ 定义的 App 组 件; */
App.vue
<template> <div id="app"> <img src="./assets/logo.png"> <HelloWorld/> </div> </template> <script> import HelloWorld from ‘./components/HelloWorld’ export default { name: ‘App’, components: { HelloWorld } } </script> <style> #app { font-family: ‘Avenir’, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> /* template：HTML 代码模板，会替换 < App /> 中的内容 import HelloWorld from './components/HelloWorld'：引入 HelloWorld 组件用于替换 template 中的 < HelloWorld/> export default{...}：导出 NodeJS 对象，作用是可以通过 import 关键字导入 name: 'App'：定义组件的名称 components: { HelloWorld }：定义子组件 在hello,Vue中,关于 < style scoped> 的说明：CSS 样式仅在当前组件有效，声明了样式的作用域, 是当前的界面私有的! */
十三、Vue的Webpack
安装Webpack
npm install webpack -g npm install webpack-cli -
测试安装成功
webpack -v webpack-cli -
使用webpack
1.创建项目
2.创建一个名为modules的目录，用于放置JS模块等资源文件
3.在modules下创建模块文件，如hello.js用于编写JS模块相关代码
如：
/暴露一个方法/
exports.sayHi = function () { document.write(“<h1>java</h1>“) }
4.在modules下创建一个名为main.js的入口文件用于打包设置entry属性
如：
var hello = require(“./hello”); hello.sayHi();
5.在项目目录下创建webpack.config.js配置文件，使用webpack命令打包webpack
6.在主页面引入打包之后的js文件
webpack.config.js模板
module.exports = { entry:””,//入口文件 output：{//输出，指定WebPack把处理完成的文件放置到指定路径 path：””, filename:”” }, module:{//模块，用于处理各种类型的文件 loaders:[ {test:/.js$/,loader:””} ] }, plugins:{},插件，如：热更新，代码重用等 resolve:{},//指定路径指向 watch:true//监听，用于设置文件改动后直接打包 }
十四、vue-router路由
安装
npm install vue-router --save-dev
Vue的原理
1、 components 目录下存放我们自己编写的组件
2、定义组件 Content.vue 组件
<template> <div> <h1>内容页</h1> </div> </template> <script> export default { name: "Content" } </script>
3、安装路由,在src目录下,新建一个文件夹 : router ,专门存放路由，写入 index.js
import Vue from 'vue' // 导入路由插件 import Router from 'vue-router' // 导入上面定义的组件 import Content from '../components/Content' // 安装路由 Vue.use(Router); // 配置路由 export default new Router({ routes: [ { // 路由路径 path: '/content', // 路由名称 name: 'content', // 跳转到组件 component: Content } ] });
4、我们在新建一个 Main.vue 组件
<template> <div> <h1>首页</h1> </div> </template> <script> export default { name: "Main" } </script>
5、将Main组件也配置到路由中！
import Main from '../components/Main' { // 路由路径 path: '/main', // 路由名称 name: 'main', // 跳转到组件 component: Main }
6、在 main.js 中配置路由
import Vue from 'vue' import App from './App' // 导入上面创建的路由配置目录 import router from './router' Vue.config.productionTip = false new Vue({ el: '#app', // 配置路由 router, components: { App }, template: '<App/>' })
7、在 App.vue 中使用路由
<template> <div id="app"> <router-link to="/main">首页</router-link> <router-link to="/content">内容</router-link> <router-view></router-view> </div> </template>
调用过程
main.js–>App.vue main.js–>index.js(路由设置) App.vue–>其他按照路由vue index.js–>引入其他vue
