赞
踩
本文为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>
cnpm install vue-cli -g
# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序,通常我们选择 webpack
vue list
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
项目的入口文件:
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 样式仅在当前组件有效,声明了样式的作用域, 是当前的界面私有的! */
安装Webpack
测试安装成功
使用webpack
如:
/暴露一个方法/
exports.sayHi = function () {
document.write(“<h1>java</h1>“)
}
如:
var hello = require(“./hello”);
hello.sayHi();
webpack.config.js模板
module.exports = {
entry:””,//入口文件
output:{//输出,指定WebPack把处理完成的文件放置到指定路径
path:””,
filename:””
},
module:{//模块,用于处理各种类型的文件
loaders:[
{test:/.js$/,loader:””}
]
},
plugins:{},插件,如:热更新,代码重用等
resolve:{},//指定路径指向
watch:true//监听,用于设置文件改动后直接打包
}
安装
npm install vue-router --save-dev
Vue的原理
<template>
<div>
<h1>内容页</h1>
</div>
</template>
<script>
export default {
name: "Content"
}
</script>
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 } ] });
<template>
<div>
<h1>首页</h1>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
import Main from '../components/Main'
{
// 路由路径
path: '/main',
// 路由名称
name: 'main',
// 跳转到组件
component: Main
}
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/>'
})
<template>
<div id="app">
<router-link to="/main">首页</router-link>
<router-link to="/content">内容</router-link> <router-view></router-view>
</div>
</template>
调用过程
# 解压压缩包
# 进入目录
cd xxxx
# 安装依赖 vue-router
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
#安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启动测试
npm run dev
npm install moduleName:安装模块到项目目录下
npm install -g moduleName:-g的意思是将模块安装到全局,具体安装到磁盘那个位置,要看npm config prefix的位置
npm install -save moduleName:--save的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖,-S为该命令的缩写
npm install -save-dev moduleName:--save-dev的意思是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖,-D为该命令的缩写
children:[
{
path:'',
compnent:
}
]
1.前端传
params接收参数 v-bind绑定事件
<router-link :to="{name:'路径',params:{参数} }"></router-link>
2.中间index.js接收,path:’路径/.参数’
3.用户展示
所有的元素必须在根节点下(必须在标签中)
{ {$router.params.参数} }
通过props:true解耦
/*修改
1 在component中加上props:true
2 将{ {$router.params.参数} }改为{ {参数名} },在组件中接收参数
如:
*/
exprot default{
props:['参数'],
...
}
在index.js中的routes:[
{
path:'/goHome',
redirect:''//重定向的路径
}
]
加一个导航栏
将路径改为'/goHome'
路由模式有两种:
hash:路径带 # 符号,如 http://localhost/#/login
history:路径不带 # 符号,如 http://localhost/login
修改路由配置,代码如下:
export default new Router({
mode: 'history',
routes: [ ]
});
处理 404 创建一个名为 NotFound.vue 的视图组件,代码如下:
<template>
<div>
页面不存在,请重试!
</div>
</template>
<script>
export default {
name: "NotFount"
}
</script>
<style scoped>
</style>
修改路由配置,代码如下:
import NotFound from '../components/NotFound'
{
path: '*',
component: NotFound
}
// beforeRouterEnter:在进入路由钱执行
// beforeRouterLeave:在离开路由前执行
export default{
props:['id'],
name:"UserProfile",
beforeRouterEnter:(to,from,next)=>{
console.log("准备进入个人信息页");
next();
},
beforeRouterLeave:(to,from,next)=>{
console.log("准备离开个人信息页");
next();
},
}
参数说明:
在钩子函数中使用异步请求
Java全栈学习路线可参考:【Java全栈学习路线】最全的Java学习路线及知识清单,Java自学方向指引,内含最全Java全栈学习技术清单~
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。