(23)打鸡儿教你Vue.js
2023-09-11 14:16:52 时间
实例:
模板语法
vue-router,vuex以及调式方法介绍
打包部署:
npm run build
Webpack 目前无论在求职还是工作中,使用越来越普及。而想要学懂,学会Webpack更绝非易事。
<template>
<div>
<p>标题</p>
<input type="text" v-model="title">
<p>内容</p>
<input type="text" v-model="content">
<div class="btn" @click="add()">添加</div>
</div>
</template>
<script>
import store from '@/store'
export default {
name: "Add",
store,
data () {
return {
title: '',
content: ''
}
},
methods: {
add () {
store.commit('addItem',{
title: this.title,
content: this.content
})
this.title = ''
this.content = ''
this.$router.push('/home/list')
}
}
}
</script>
<style scoped>
</style>
Add.vue
<template>
<div>
<router-view />
<ul class="footer">
<li class="icons"><router-link :to="{name: 'list'}">新闻列表</router-link></li>
<li class="icons"><router-link :to="{name: 'user'}">个人中心</router-link></li>
</ul>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped lang="scss">
li {
list-style: none;
}
.footer {
position: fixed;
width: 100%;
height: 60px;
line-height: 60px;
left: 0;
bottom: 0;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
.icons {
font-size: 16px;
flex: 1;
text-align: center;
border-top: 1px solid #42b983;
a {
color: #42b983;
display: block;
&.active {
color: #fff;
background: #42b983;
}
}
}
</style>
Home.vue
<template>
<div>info</div>
</template>
<script>
export default {
name: "Info"
}
</script>
<style scoped>
</style>
Info.vue
<template>
<div>
<ul>
<li v-for="(item, index) in pageLists" :key="index">
{{item.title}}-{{item.content}}
</li>
</ul>
</div>
</template>
<script>
import store from '@/store'
export default {
name: "List",
store,
computed: {
pageLists () {
return store.state.lists
}
}
}
</script>
<style scoped>
</style>
List.vue
<template>
<div>
<form action="" v-if="!isReg">
<div>用户名:</div>
<input type="text" v-model="name">
<div>密码:</div>
<input type="password" v-model="password">
<div>
<button type="button" @click="login()">登录</button>
<button type="button" @click="reg()">注册</button>
</div>
</form>
<form action="" v-else>
<div>用户名:</div>
<input type="text" v-model="name">
<div>密码:</div>
<input type="password" v-model="password">
<div>再次输入密码:</div>
<input type="password" v-model="repeat">
<div>
<button type="button" @click="addUser()">确定</button>
<button type="button" @click="cancel()">取消</button>
</div>
</form>
</div>
</template>
<script>
export default {
name: "Login",
data () {
return {
isReg: false,
name: '',
password: '',
repeat: ''
}
},
methods: {
login () {
if (localStorage.getItem("name") === this.name && localStorage.getItem("password") === this.password){
this.name = ''
this.password = ''
this.$router.push('/home/list')
}else{
alert('用户名密码不正确')
}
},
reg () {
this.isReg = true
},
cancel () {
this.isReg = false
},
addUser () {
if (this.password === this.repeat){
localStorage.setItem('name', this.name)
localStorage.setItem('password', this.password)
this.name = ''
this.password = ''
this.isReg = false
}else{
alert('两次密码输入不一致')
}
}
}
}
</script>
<style scoped>
</style>
Login.vue
<template>
<div>user</div>
</template>
<script>
export default {
name: "User"
}
</script>
<style scoped>
</style>
User.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang="scss">
* {
padding: 0;
margin: 0;
}
</style>
App.vue
import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/Login.vue'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
linkActiveClass: 'active',
routes: [
{
path: '/',
name: 'login',
component: Login
},
{
path: '/home',
name: 'home',
component: Home,
children: [
{
path: 'list',
name: 'list',
component: () => import(/* webpackChunkName: "list" */ './views/List.vue')
},
{
path: 'user',
name: 'user',
component: () => import(/* webpackChunkName: "user" */ './views/User.vue')
},
]
},
{
path: '/add',
name: 'add',
component: () => import(/* webpackChunkName: "add" */ './views/Add.vue')
}
// {
// path: '/about',
// name: 'about',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
// }
]
})
router.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
lists: []
},
mutations: {
addItem (state, value) {
state.lists.push(value)
}
},
actions: {
}
})
store.js
基础使用
认识Webpack
了解模块打包
多种Webpack安装方式及最佳方案
配置
命令行
核心知识
认识Loader
打包静态资源
plugins的概念及打包
SourceMap 应用与配置
WebpackDevServer
热模块更新
Babel 配置
进阶
Tree Shaking
Webpack中的分片打包
SplitChunksPlugin
懒加载和chunk
打包分析,Preloading, Prefetching
CSS 文件的代码分割
浏览器缓存
Shimming、环境变量使用方法
原理分析与扩展
自定义loader
自定义plugin
Webpack打包原理全分析
Webpack源码设计原理
全面性能优化
单页应用
多页应用
React
Vue
Typescript
ES6
PWA
EsLint
性能优化
使用过 Webpack ,做过
简单配置尝试
了解 JS 基础语法
使用过类似于 Webpack 这样的打包工具
对NodeJS有所理解
使用webpack
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
相关文章
- (尚036) vue_demo_users_todo 初始化显示+(尚037)+搜索
- (尚024)Vue_案例_交互删除
- vue - webpack.dev.conf.js for FriendlyErrorsPlugin
- Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"@"
- 技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用(二)
- Vue - PC 端列表下拉页面触底加载分页数据,监听浏览器屏幕触底事件,类似uni-app微信小程序的onReachBottom()页面触底生命周期函数(监听屏幕触底事件,实现懒加载效果)
- Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件(在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件)
- JavaScript - math.js 数学库,实现 math.add() “数字累加“ 计算总和的操作(例如:循环 N 个整数或小数,然后再循环内 “+=“ 叠加算数)适用于Vue等全部前端项目
- (25)打鸡儿教你Vue.js
- (7)打鸡儿教你Vue.js
- Web前端-Vue.js必备框架(五)
- Vue.js Ajax(axios)
- vue.config.js
- Vue 组件化
- Vue通过ref获取不到$refs
- Vue知识点总结(18)——生命周期(超级详细)
- 四、Vue CLI-异步请求(axios)
- vue基础---介绍
- vue实战入门进阶篇九:vue+elementui实现网站后台-系统设置界面实现
- Vue中的路由导航
- 【转发】vue v-for循环的用法(索引,键值)
- 关于vue中-js使用-css的变量,和css使用js定义的变量
- vue项目集成mock.js
- vue中使用laydate.js插件
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- vue面试(一)
- vue后台(一)
- npm 报错之 vue项目中stylus-loader版本兼容问题(stylus(css预处理框架))
- Web 前端 之 Vue 浏览器调试工具 Vue.js devtools 安装(三种方法)的简单整理
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- Django+Vue项目学习第二篇:vue项目创建
- Vue学习第21天——插槽slot的理解及案例
- vue 导出功能