一步一步学Vue（十二）
时间:2022-06-01
本文章向大家介绍一步一步学Vue（十二），主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
为了提升代码的逼格，之后代码改为Vue文件组件，之前代码虽然读起来容易理解，而且适合在小的项目中使用，但是有如下缺点：
- 全局定义(Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板(String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的
- 不支持CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 Webpack 或 Browserify 等构建工具。
所以基于这种考虑，我们以后会使用单文件模式去编写代码，并且为了看上去更洋气一些，我们的代码会以IView作为基础组件，不熟悉的同学正好可以简单了解一些，本节主要基于单文件组件重构上节的代码。
vue官方提供了很好的命令行工具，vue-cli，可通过npm直接安装 npm install -g vue-cli；对此我不做过多介绍，google到的内容你看都看不过来。
我们基于webpack-simple 脚手架搭建我们的项目，运行 vue init webpack-simple demo，接着一步一步走就ok了，然后进入demo 文件夹，执行npm install 安装依赖即可，安装完毕后执行npm run dev 即可启动程序：
看到上述结果表示已经运行成功，从package.json的script节可以看到，开发模式下启动了热加载模式，无需手动刷新浏览器即可完成代码重载。
既然使用IView，那么我们先安装IView ,npm install --save iview; 并在webpack 入口页面引入并启用
修改我们的webpack.config.js,保证支持css引入以及字体文件导入（npm install --save-dev css-loader style-loader url-loader）：
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.css$/,
use: ['style-loader','css-loader' ]
},
{
test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,
loader: 'url-loader?limit=1024'
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}此时我们的iview已经可用了，我们这里引入了iview全部组件，如果按需引入，则需要对每一个组件进行分别引入。首先搭建我们布局页(直接简单修改iview layout代码)：
<template>
<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
<Row type="flex">
<i-col :span="spanLeft" class="layout-menu-left">
<Menu active-name="1" theme="dark" width="auto">
<div class="layout-logo-left">
Demo Project
</div>
<Menu-item name="1">
<Icon type="ios-navigate" :size="iconSize"></Icon>
<span class="layout-text">TODOList</span>
</Menu-item>
</Menu>
</i-col>
<i-col :span="spanRight">
<div class="layout-header">
<i-button type="text" @click="toggleClick">
<Icon type="navicon" size="32"></Icon>
</i-button>
</div>
<div class="layout-content">
<div class="layout-content-main">内容区域</div>
</div>
<div class="layout-copy">
2011-2016 © demo
</div>
</i-col>
</Row>
</div>
</template>
<script>
export default {
data () {
return {
spanLeft: 5,
spanRight: 19
}
},
computed: {
iconSize () {
return this.spanLeft === 5 ? 14 : 24;
}
},
methods: {
toggleClick () {
if (this.spanLeft === 5) {
this.spanLeft = 2;
this.spanRight = 22;
} else {
this.spanLeft = 5;
this.spanRight = 19;
}
}
}
}
</script>
<style scoped>
.layout{
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-breadcrumb{
padding: 10px 15px 0;
}
.layout-content{
min-height: 200px;
margin: 15px;
overflow: hidden;
background: #fff;
border-radius: 4px;
}
.layout-content-main{
padding: 10px;
min-height:768px;
}
.layout-copy{
text-align: center;
padding: 10px 0 20px;
color: #9ea7b4;
}
.layout-menu-left{
background: #464c5b;
}
.layout-header{
height: 60px;
background: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.layout-logo-left{
width: 90%;
height: 30px;
background: #5b6270;
border-radius: 3px;
margin: 15px auto;
text-align:center;
line-height:30px;
color:#fff;
}
.layout-ceiling-main a{
color: #9ba7b5;
}
.layout-hide-text .layout-text{
display: none;
}
.ivu-col{
transition: width .2s ease-in-out;
}
</style>运行npm run dev：可看到如下效果：
接下来引入我们的vuex，使用npm install --save vuex ，并对main.js做如下修改：
import Vue from 'vue'
import IView from 'iview';
import Vuex from 'vuex';
import App from './App.vue'
import 'iview/dist/styles/iview.css';
import store from './store';
Vue.use(IView);
Vue.use(Vuex);
new Vue({
el: '#app',
store,
render: h => h(App)
})创建store.js,并添加如下代码（代码来源于上一篇博文中代码）：
var list=[];
export default {
state: {
items: [], // todoContainer中items,
//初始化表单所用
initItem: {
title: '',
desc: '',
id: ''
}
},
mutations: {
search (state, payload) {
state.items = list.filter(v => v.title.indexOf(payload.title) !== -1);
},
save (state, payload) {
if (state.initItem.id) {
var o = list.filter(v => v.id === payload.id);
o.title = payload.title;
o.desc = payload.desc;
state.items = state.items.map(v => {
if (v.id == payload.id) {
return payload;
}
return v;
});
} else {
var id=state.items.length+1;
state.items.push({id:id,title:payload.title, desc:payload.desc});
}
list = state.items;
},
remove (state, payload) {
state.items = state.items.filter(v => v.id !== payload.id);
},
edit (state, payload) {
state.initItem = state.items.filter(v => v.id === payload.id)[0];
}
}
};创建components文件夹，并按照单文件组件的规范创建组件：
SearchBar.vue
<template>
<div class="row toolbar">
keyword：
<Input type="text" v-model="keyword" ></Input>
<Button type="primary" @click="search()">search</Button>
</div>
</template>
<script>
export default {
data: function () {
return {
keyword: ''
}
},
methods: {
search() {
this.$store.commit("search", {
title: this.keyword
});
}
}
}
</script>TodoList.vue:
<template>
<Table border :columns="columns" :data="items"></Table>
</template>
<script>
export default{
data(){
return {
columns:[
{
title:'Id',
key:'id'
},
{
title:'title',
key:'title',
},
{
title:'desc',
key:'desc'
},
{
title:'actions',
//TODO:操作
}
]
}
},
props:[
'items'
],
methods:{
edit: function () {
this.$store.commit('edit',this.todo);
},
remove: function () {
this.$store.commit('remove',{id:this.todo.id});
}
}
}
</script>TodoForm.vue:
<template>
<div class="col-md-6">
<div>
<label for="title">title:</label>
<input type="hidden" v-bind:value="todo.id" />
<Input v-model="todo.title" ></Input>
</div>
<div>
<label for="desc">desc</label>
<Input v-model="todo.desc" ></Input>
</div>
<div>
<Button type="primary" v-on:click="ok()">Ok</Button>
</div>
</div>
</template>
<script>
export default{
props: ['initItem'],
computed: {
todo: function () {
return { id: this.initItem.id, title: this.initItem.title, desc: this.initItem.desc };
}
},
methods: {
ok: function () {
this.$store.commit("save",this.todo);
}
}
}
</script>修改app.vue 完成组件注册和初始化：
<template>
<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
<Row type="flex">
<i-col :span="spanLeft" class="layout-menu-left">
<Menu active-name="1" theme="dark" width="auto">
<div class="layout-logo-left">
Demo Project
</div>
<Menu-item name="1">
<Icon type="ios-navigate" :size="iconSize"></Icon>
<span class="layout-text">TODOList</span>
</Menu-item>
</Menu>
</i-col>
<i-col :span="spanRight">
<div class="layout-header">
<i-button type="text" @click="toggleClick">
<Icon type="navicon" size="32"></Icon>
</i-button>
</div>
<div class="layout-content">
<div class="layout-content-main">
<search-bar></search-bar>
<todo-list :items="items"></todo-list>
<todo-form :init-item="initItem"></todo-form>
</div>
</div>
<div class="layout-copy">
2011-2016 © demo
</div>
</i-col>
</Row>
</div>
</template>
<script>
import SearchBar from './components/SearchBar.vue';
import TodoForm from './components/TodoForm.vue';
import TodoList from './components/TodoList.vue';
export default {
data () {
return {
spanLeft: 5,
spanRight: 19
}
},
components:{
'search-bar':SearchBar,
'todo-form':TodoForm,
'todo-list':TodoList
},
computed: {
iconSize () {
return this.spanLeft === 5 ? 14 : 24;
},
initItem: function () {
return this.$store.state.initItem;
},
items: function () {
return this.$store.state.items;
}
},
methods: {
toggleClick () {
if (this.spanLeft === 5) {
this.spanLeft = 2;
this.spanRight = 22;
} else {
this.spanLeft = 5;
this.spanRight = 19;
}
}
}
}
</script>
<style scoped>
.....
</style>此时保存，直接在浏览器可以看到如下效果：
今天时间不充足，重构就到这里，第一次使用单文件组件还是手生，代码调试比较费时间，一步一步的来吧。下一篇继续改造，里面包含了很多bug，大家可以试着修复或者完善一下。
good night。
- React第三方组件3(状态管理之Flux的使用③TodoList中)
- Vue实现百度下拉提示搜索一、前期准备二、代码实现三、实现效果
- React第三方组件3(状态管理之Flux的使用②TodoList上)
- ggplot2玫瑰图案例——星巴克门店分布图
- React第三方组件3(状态管理之Flux的使用①简单使用)
- 用ggplot2画了一个我也叫不上名的炫酷图表
- React技巧8(不再手动绑定this，跟.bind(this)说88)
- 美美的商务范儿——ggplot2蝴蝶图
- 机器学习（三）使用Python和R语言从头开始理解和编写神经网络介绍目录神经网络背后的直观知识多层感知器及其基础知识什么是激活函数？前向传播，反向传播和训练次数(epochs)多层感知器全批量梯度下降
- React第三方组件2(状态管理之Refast的使用⑤LogicRender使用)
- 左右用R右手Python9——字符串合并与拆分
- hdu 1003 Max Sum（最大子窜和）
- React第三方组件2(状态管理之Refast的使用④中间件middleware使用)
- 高维分面应用——ggplot2分面气泡图饼图
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java类如何防止被实例化
- PHP中的json_encode和json_decode
- Java重写equals和hashCode方法
- upload-labs第11~12关 00截断
- java 踩雷日记--new
- 用一个通俗易懂的例子彻底说清楚单例模式
- Manytasking Jmetal 代码反向解析 1_MATP 测试函数集
- PHP中的ereg()与eregi()
- Java 用反射实现实体类属性 not null 校验
- 数据结构:用实例分析ArrayList与LinkedList的读写性能
- vue-element-admin上传图片的功能
- Oracle数据误删恢复
- 用斗地主的实例学会使用java Collections工具类
- Command PhaseScriptExecution failed with a nonzero exit code问题解决
- Effective Java中构建器Builder的理解