脚本宝典收集整理的这篇文章主要介绍了

vue练习小项目

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

项目参考了notepad,非常感谢。
flex布局页面,响应式,简化了内容,当做练手vue项目

项目开发过程中,遇到的问题及知识点全部记录在下方

vue2 + vuex + flex + localStorage 本地记事本

项目使用了vue cli 脚手架,webpack-simple模板,fontawesome图标

在线预览及本地安装

notebook github
点击预览

npm install
npm run dev

预览gif

功能

类似vue官网的TodoMVC

  • 增删事件

  • 本地化存储

搜索及编辑功能还未完成,后续会再用上rouer

安装 normalize.css模块

css reset的一种方案

配置读取css和字体文件
npm install style-loader --save-dev
npm install css-loader --save-dev
npm install file-loader --save-dev

注意: webpack-simple模板中,需要对引入css路径进行配置    
在 webpack.config.js 中的 loaders 数组加入以下配置
{
    test: /\.css$/,
    loader: "style!css"
},
{
    test: /\.(eot|woff|woff2|ttf)([\?]?.*)$/,
    loader: "file"
}

npm安装normalize.css
npm install normalize.css --save

在main.js中 
import 'normalize.css'

安装字体库

vue-awesome
fontawesome

非父子组件通信

在开始开发的过程中,没用使用vuex状态管理,遇到了非父子组件通信的问题,可以使用vue2的bus

vue bus

新建一个bus.js

import Vue from 'vue'
export default new Vue()

使用 $emit 监听   $on响应

Bus.$on('transmit', function(tt) {
       this.completedClick()
});
注意: 以上的thisfunction(){} 中的this

Bus.$on('transmit', () => this.completedClick());
使用短语法 this指向bus

methods中的方法相互调用

用绑定this的方法,如:
this.roundNum = this.$options.methods.rnd.bind(this)(10,100);

箭头函数

事件处理器

事件处理器

① 监听事件,直接触发 JavaScript代码
② 方法事件处理器,触发函数,可调用原生DOM事件
③ 内联处理器,绑定方法并给予参数,此方法中,可再添加$event参数,访问原生DOM事件对象,如target、preventDefault

vue的事件处理器作方方法,其实和js事件处理程序是一样的,以上
①就是HTML事件处理程序,②是DOM0别事件处理程序,③是DOM2级事件处理程序,写的时候道理和我们平时在html在添加事件是一个道理

事件处理器参考链接

外部访问localhost

在调试的时候,除了chrome的模拟器,还需要在真实机器上测试,在手机上访问开发电脑上的localhost

第一步:接入相同的网络环境,获取ip地址

win: ipconfig
mac: ifconfig

第二步:

在webpack配置中,在devServer中添加host: '0.0.0.0',在启动的时候会打开http://0.0.0.0:8080
DevDocs host - Webpack 2 - DevServer

FAQ及其他vue内容

单个.vue组件中的

export default {
    name:''
}

其中的name主要给递归组件用

npm run build 执行错误

ERROR in build.js from UglifyJs
SyntaxError: Unexpected token: name (warn) [./~/vue-awesome/util.js:3,0][build.js:24054,4]

参考配置解决vue-awesome

es6预览

基于 Vue 2.0 和 Material Desigin 的 UI 组件库

Mint UI 基于 Vue.js 的移动端组件库

音乐视频等api

总结

以上是脚本宝典为你收集整理的

vue练习小项目

全部内容,希望文章能够帮你解决

vue练习小项目

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过