分享
是一种美德

Vue实例-本地留言板

mrnaas阅读(515)

好久没有写新的笔记了,今天回想了一下之前学习的Vue知识,现在复习一遍,写写学习事的实例并加以修改一下:

本地记事本:

本地简单的留言板功能,后期其实可以添加盖楼功能的,但是目前先不考虑,大家也可以自己试着添加一下,后期我更新后会同步代码!

1、主要功能

(1)添加留言

(2)删除留言

(3)留言统计及删除

2、主要知识点:

(1)监听事件—–v-on/@

(2)list—–v-for

(3)数据绑定—–v-model

(4)v-show

在线演示

代码示例:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta name="robots" content="noindex, nofollow" />

    <meta name="googlebot" content="noindex, nofollow" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>本地留言板</title>

    <link rel="stylesheet" type="text/css" href="./css/index.css" />

</head>

<body>

    <section id="app">

        <!-- 输入框 -->

        <header class="header">

            <h1>本地留言板</h1>

            <input v-model="temp.name" autofocus="autofocus" autocomplete="off" placeholder="请输入昵称"

              class="new-todo" />

              <input v-model="temp.text" autofocus="autofocus" autocomplete="off" placeholder="请输入留言内容"

                class="new-todo" />

                <button class="textbtn textbtn-red" @click="add">提交</button>

        </header>

        

        <!-- 记事本内容列表 -->

        <section class="main">

            <ul class="todo-list">

              <li class="todo" v-for="(item,index) in list">

                <div class="view">

                  <span class="index">{{ index+1 }}.</span>

                  <label>昵称:<span style="color: red;">{{ item.name }}</span></label>

                  <label>留言内容:<span style="color:blue">{{ item.text }}</span></label>

                  <label>留言时间: <span style="color:green">{{ item.time }}</span></label>

                  <button class="destroy" @click="remove(index)"></button>

                </div>

              </li>

            </ul>

        </section>

        <!-- 记事本统计信息 -->

        <footer class="footer" v-show="list.length!=0">

            <span class="todo-count" v-if="list.length!=0">

              <strong>{{ list.length }}</strong> items left

            </span>

            <button v-show="list.length!=0" class="clear-completed" @click="clear">

              Clear

            </button>

        </footer>

    </section>

    <!-- 底部 -->

    <footer class="info">

      <p>技术支持:

        <a href="http://www.mrnaas.com/" target="_blank" style="color: red;">MN乐享</a>

      </p>

    </footer>

    <script src="utils/vue.js"></script>

    <script src="utils/index.js"></script>

    <script>

        var app = new Vue({

            el: '#app',

            data: {

                temp:{

                    name:null,

                    text:null

                },

                list: []

            },

            methods: {

                add: function () {

                    let time = parseTime(Date())

                    let obj = JSON.parse(JSON.stringify(this.temp))//为了防止错误发生,采用深拷贝

                    if(obj.name && obj.text){

                        obj.time = time

                        this.list.push(obj);

                    }else{

                        alert("留言昵称/留言内容必填!")

                    }

                },

                remove: function (index) {

                    console.log("删除");

                    console.log(index);

                    this.list.splice(index, 1);

                },

                clear: function () {

                    this.list = [];

                }

            }

        })

    </script>

</body>

</html>

 

链接: https://pan.baidu.com/s/1fMgOHYz79emhehgaxNV-aA

提取码获取方法:

关注公众号发送:【留言板】

GitHub

https://github.com/twang211/webdemo

小程序热门框架推荐

mrnaas阅读(521)

随着微信小程序横空出世以及发展,衍生出各类型的小程序,并且由各类型平台的原生开发产生很多优秀好用的框架/组件库。

1、wepy-组件化开发框架

WePY (发音: /’wepi/) 是小程序上最早的一款类 Vue 语法的开发框架。WePY 2 是基于小程序原生组件实现组件化开发。因此 WePY 2 支持的最低版本小程序基础库为 1.6.3。

Github地址:https://github.com/Tencent/wepy

官网地址:https://wepyjs.github.io/wepy-docs/

资料集合:https://github.com/aben1188/awesome-wepy

2、Taro

Taro是由京东 – 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架是由京东 – 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架,是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

官网地址:https://taro.aotu.io/

Github地址:https://github.com/NervJS/taro

3、mpvue-美团小程序框架

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

官网地址:http://mpvue.com/

Github地址:https://github.com/Meituan-Dianping/mpvue

4、WeUI 

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

官网地址:https://weui.io/

5、MINA

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

网址:https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

6、Tina.js

一款轻巧的渐进式微信小程序框架,具有轻盈小巧、极易上手、极易上手等特性。

网址:https://github.com/tinajs/tina

7、weweb

weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web应用。如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中。如果你熟悉vue的语法,也可以使用wepy编写小程序,再通过weweb转换后将其运行在web端。

网址:https://github.com/wdfe/weweb

8、 iView Weapp

iView Weapp一套高质量的微信小程序 UI 组件库。

官网地址:https://weapp.iviewui.com/

Github地址:https://github.com/TalkingData/iview-weapp

9、ZanUI-WeApp(作者已停止维护)

Github地址:https://github.com/youzan/zanui-weapp

10、Vant Weapp (ZanUI-WeApp升级版本)

轻量、可靠的小程序UI组件库。

Github地址:https://github.com/youzan/vant-weapp

11、uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

官网:https://uniapp.dcloud.io

欢迎大家关注公众号:

12306bypass分流抢票教程

mrnaas阅读(319)

又快到了说年一度的春运时期了,远离家乡工作的同胞们又要开始抢票的工作了,现在推荐一款不错的抢票软件,12306bypass,是一款分流抢票软件,不用安装即可使用。

官网下载链接:http://www.12306bypass.com

百度网盘下载:链接: https://pan.baidu.com/s/1L2iJgvVTvGYgA2tr-V6uag 提取码: ci9q

下载到本地后解压进入软件目录双击  Bypass.exe  即可运行。

 

接下来就是用自己12306的账号登录,服务器可以默认也可以自己选择其他地区,一般默认就好。

登陆成功后就可以开启咱们的抢票之旅了,走你。

 

 

我们添加好往返城市,日期,然后查询车票;

然后选择乘客(拉取的是12306账号的联系人)、席位类型;

已选车次是你在车票列表自己选择合适的然后双击就加到列表中了,同样也提供高铁动车选座,最好也把候补提交也加上,因为候补成功了也不和刷票有冲突;

这些操作做完之后就可以开始抢票了。

 

下图就是已经开始抢票了:

 

 

如果抢票成功会有音乐提示,同样bypass提供了消息通知设置可以qq、微信、邮件通知还有自动支付,但是看着自己的实际情况来配置。

 

好了,基本使用就是这些了,如果有不懂的或者其他问题可以去官网查询亦或者留言我会及时解答。

最后预祝大家抢票成功!

欢迎大家关注公众号:

Nodejs版本控制和切换-NVM

mrnaas阅读(212)

Node使用中有时候用到的项目需要不同的node版本,总不能来回卸载安装吧,所以就需要用到版本管理工具。

nvm和n都是node版本管理工具。

为了解决node各种版本存在不兼容现象。

nvm是让你在同一台机器上安装和切换不同版本的node的工具。

1、下载:

https://github.com/coreybutler/nvm-windows/releases

2、安装:

按照提示完成安装即可,安装完成后可以检测一下是否安装成功

在cmd命令行输入nvm,如果出现nvm版本号和一系列帮助指令,则说明nvm安装成功。

3、配置:

修改setting.txt

在你安装的目录下找到settings.txt文件,打开后加上
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

这一步主要是将npm镜像改为淘宝的镜像,可以提高下载速度。

4、安装nodejs

可以先使用 num list 查看本地已安装的版本

然后使用 nvm list available 查看所有版本

NVM常用命令
nvm list 查看已经安装的版本
nvm list installed 查看已经安装的版本
nvm list available 查看网络可以安装的版本
nvm version 查看当前的版本
nvm install 安装最新版本nvm
nvm use <version> ## 切换使用指定的版本node
nvm ls 列出所有版本
nvm current显示当前版本
nvm alias <name> <version> ## 给不同的版本号添加别名
nvm unalias <name> ## 删除已定义的别名
nvm reinstall-packages <version> ## 在当前版本node环境下,重新全局安装指定版本号的npm包
nvm on 打开nodejs控制
nvm off 关闭nodejs控制
nvm proxy 查看设置与代理
nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror,如果不设置的默认是 https://nodejs.org/dist/
nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是: https://github.com/npm/npm/archive/.
nvm uninstall <version> 卸载制定的版本
nvm use [version] [arch] 切换制定的node版本和位数
nvm root [path] 设置和查看root路径

零基础的同学看过来,如何系统学习前端,只要你掌握了,学习web前端的思路就打开了,为以后成为高级前端工程师做一个铺垫

mrnaas阅读(293)

软件开发工程师在行业外大众的眼里, 或许是一个出众的职业,收入不低, 技术含量还挺高,就连我自己刚入行时也是这么认为的,但事实上并不确切。任何行业中,只要是在金字塔顶端的那部分,都是令人羡慕的,然而,那是需要心血、实力的。 但如果仅仅只是想入行,就没那么苛刻了, 尤其是软件开发行业,更容易。

做一件事情轻松还是坚难, 使用什么样的方法不可忽视,我以一个过来人的身份分析能如何正确快速的踏入软件开发这个行业。

许多人认为开发软件是一件只有聪明人才能做的事情, 这只是一个刻板印象,跟IT行业发展的速度太快有关系 。二十年前, 在中国绝大部份人可能连电脑是长什么样的都还不知道,仅仅几年后,电脑飞速普及,每家必备。 然而, 要使用这部机器, 必须经过专业的培训,连开关机时先按显示器开关还是先按主机开关都有很深的学问,这不仅难度高,而且还很神秘。更别说里面装的软件了, 不经过长期专业的指导,根本玩不来。 从正常的逻辑上的看「使用软件都这么难了, 那制造软件门槛不是要高到天上去了」

事实上, 开发软件和使用软件之间并没有什么必然的关联,更不是老子和儿子的关系 。 有时候使用某个软件会很困难,而开发某类软件却很容易,还有的时候却是相反的,因为开发软件的工具和编程语言, 也只是一种软件而已。至于倒底是先有软件和还先有编程语言,那就是先有鸡还是先有蛋的问题了, 这里不作详细讨论 。

首先解释几个常见的疑问

编程是不是需要具备较强数学能力?

完全不用, 只需要你掌握普通的加减乘除、算绝对值、指数等最最基础的知识, 编程的数学要求也就满足了。 这毫不夸张, 我写了五六年的代码 , 唯一一次用到上学时学到的数学公式是三角函数相关的知识,那时候需要让一个点在网页上转圈,而且这并不是工作上的需要, 只是我自己没事耍着玩而已。

英语不好能编程吗?

理论上最低的要求是认识26个英文字母即可, 也就是说你只要上过初中英文课程就行了。 这并不是说编程并不需要会英语, 而是因为现在翻译软件满天飞, 看不懂用软件翻译就能解决问题了。

找软件工程师的工作有学历要求吗?

学历自然是越高越好, 然而, 只要技能掌握扎实,就绝对会有公司要你。 现在这种职位行业需求大, 很多公司根本招不到人, 学历不是他们首要考虑的入职要求。

编程职业是不是到年纪大了就不能做了?

没有人会原地踏步, 只要你不断努力就总会有你发挥价值的空间, 反之, 干任何工作都会丢饭碗

编程这种工作是不是需要经常加班?

在任何行业中, 总有加班现像特别严重的公司, 政府机关和国企也不能例外, 不想加班只要不去那样的单位就可以了, IT行业也有工作很轻松的企业。 反正我做了这么多年, 加班次数数都数的过来。

至于最重要的收入方面,这个需要看地区, 如果在一二线城市, 那绝对高于普通传统行业。

讲了一大堆废话,接下来进入正题,聊聊如何快速成为一名前端开发工程师, 这里的前端开发指的是网站的前端。

网页前端开发技术是所有软件开发技术中入门最简单的, 没有之一。前端开发其实并不是纯粹的编程,它的的工作分为两块, 一块是制作网页, 一块是制作网页上的动态效果, 制作网页是不需要编程的,制作动态效果是需要编程的。 因此, 制作网页是非常简单的一件事, 而稍微有点难度的是写网页动态效果 ,但和其它编程技术比起来还算是很简单。

上面说过, 想在零基础的前提下入行做一名前端开发工程师(软件工程师),是不需要拥有很高的学历的,也不需要很强的数学能力, 更不需要玩的很溜的英语水平。 然而, 却需要具备

  • 对编写代码有强烈的兴趣,非常想自己去制作一张网页、编写一段特效,或者说用代码实现一个自己想要的功能
  • 较强的自学能力, 能不通过别人的帮助,自己寻找方法学会某一类知识、玩转某一种技术。
  • 养成看书的习惯, 因为看书是最好的系统的学习知识的方法。 一名前端开发工程师, 最低标准也需要看完两本600页的专业知识书籍。
  • 能持之以恒,不轻言放弃,因为从零基础到可以通过掌握的前端技能谋生, 最起码需要经过3-6个月不间段的学习和训练, 这也许是一个枯燥寂寞痛苦的过程

前端技术分为两块, html、css和JavaScript,html和css用来制作网页页面, JavaScript用来编写网页特效

html和css相对简单, 其中内容深度较浅,易于理解,而且这两种技术的学习过程中并不会牵扯出其它相关联的知识,换句话说,你学好了html和css就等于学好了页面制作的全部。 此外, 学习html和css并没有多少需要深刻理解的知识,仅仅是花时间记忆和练习就足够了。 大致上使用html和css编写网页是以如下方式工作的

  • 在页面的左上角放置一个方块,将长度设置为100像素,将宽度设置为100像素,将背景设为淡蓝色,将边框设为深蓝色
  • 在页面顶部放置一行文字 , 将字体设置为微软雅黑,将字体大小设置为14像素,将字体颜色设置成淡黑色
  • 在页面中间放置一张图片, 图片地址设为xxx,图片宽为100像素,高度自适应,鼠标移至图片时变为手形
  • 在页面底部放置一个链接,链接地址为xxx,点击链接跳转至百度首页,并且需要另起一个新窗口

试想一下, 一张网页不就是以这种形式构成的吗

html其实并不需要通过看书来学习,因为它非常的简单, 内容也不多, 在网上看一些专门讲解html知识的网站的内容就可以了,这里推荐一个公认的适用于初学者学习的网站, 地址是http://www.w3school.com.cn/html/。

css的学习就要复杂多了,必须要通过专门的书籍来学习,因为css的知识量相对较大,各大浏览器对css的支持又不尽相同, 如果不通过系统的阅读书籍来循序渐进的学习,很难窥其全貌,在真正工作实践使用时,也很难灵活高效正确的应用。有的同学可以会想通过看视频来进行学习,我不是很推荐这种方法, 原因如下

  • css的内容很多,一般网络上的视频很难覆盖所有知识, 试想一下, 上学时老师给学生上一门课也需一个学期, 可见对某一类知识进行系统的学习, 信息量有多大了
  • 视频中讲解者的水平很难保证, 导致时间精力花下去了,效果却看不到
  • 看书这种习惯必须要养成,学css或许可以看视频 , 那学JavaScript呢? 学习知识如果依赖视频,那在这个行业中走不远

学习css推荐使用《css权威指南》这本书, 我当初看的就是这个, 内容很全讲,而且讲的通俗易懂,现在已经出到第三版了,内容质量应该胜过我之前看的地个版本

在这里插入图片描述

看书的过程中还需要做笔记, 不要太信任自己记忆力, 一些不常用但又很重要的知识, 如果不记下来, 随时温习 , 随着时间的推移,肯定会渐渐的忘记。 最好要把书中讲解的每一个要点, 都作记录。 在学校里, 如果不关心考试成绩, 那么完全可以左耳进右耳出, 因为学校里学的知识 , 上了社会已后, 不一定用的上。 然而, 在学习技术过程中忘掉学过的内容就太吃亏了, 因为这些知识完全可以在工作中用的上, 说的优雅一点就是对自己的职业生涯有帮助 , 说的现实一点就是可以升职加薪赚钱。

然而, 学习过程中, 看书只能占百分之四十, 另外百分之六十是动手实践。首先, 你可以参考别人网站上的网页, 找一张觉得自己有能力可以实现的页面, 然后照着样子自己写一张, 不管使用什么方法, 查书、网上资料,或者参照目标网页已实现的版本的做法, 总之动手去做, 把网页做出来就可以了,然后不断的重复这个过程,直到可以不借助任何外部手段, 徒手能把一张网页画出来, 这样就有找工作通过面试的资格了。 不要小看这一张做出来的网页, 因为从不会到会的这一个过程中, 在寻找解决问题的方法时, 学到的不仅仅是解决方法本身, 还有因为解决这个问题而被牵扯出来的其它知识也被一并学会。 因此, 看似只是做了一张简单的网页, 然而做网页的来龙去脉已经烂熟于心了。

学会制作网页后, 就已经是一名合格前端工程师了, 但在实际工作时却还没有办法独当一面, 只会制作页面, 肯定只能是协助人家工作, 打打下手。 只有学会使用JavaScript, 才能算的上是一位真正的前端开发工程师。

这里说的JavaScript也叫原生JavaScript

写JavaScript可就是正儿八经的编程了,如果想做一个优秀的前端工程师, 百分之七十的精力都需要花在这个上面。 花3-6个月成为JavaScript高手显然不现实, 3-6年或许差不多。 然而,如果仅仅是入门和应付工作,那就足够了。 要知道很多网页的动态效果都是别人写好的,我们只需要拿过来使用就可以了。常见的JavaScript应用场景如下

  • 验证表单输入的内容是否符合规则
  • 网页中的滚图片滚动效果
  • 网页中的标签切换效果
  • 关键字搜索时的向导提示
  • 无刷新页面内容更新

这些是最常见和简单的应用。复杂的应用包括

  • JavaScript网页游戏
  • 炫酷到能上天图片预览效果
  • 网页版Office软件

也就是电脑有的软件,用JavaScript在浏览器都能做出同样的效果。幸好,这些你根本不需要会,只会上面说的基础内容, 就足以让你找到一份前端开发工程师的工作.

JavaScript基础入门的学习一般都是先拿别人做好的东西来用, 然后照着样子自己修改或实现一人,最后再以自己的思路,实现一个更合适或者更优秀的。现在互联网行业内, 前端开发工程师招聘对于JavaScript的最低标准是会使用网上现成的特效完成工作,而并不要求你会自己写。

学习JavaScript推荐的书籍是《JavaScript权威指南》,也就是鼎鼎大名的「犀牛书」
在这里插入图片描述

我当初看这本书时还是第四版 ,现在已经出到了第六版 。 这本书写的非常精深, 想要一遍就看懂是不现实的。 它适合初学都也适合高手,在不同层次阅读这本书都会有不同的领悟, 我就看过三遍,而且每一遍看后感觉都不一样。 在初学阅读这本书时, 可以只看很少的几章, 其中只包括核心JavaScript中讲解的一些基本语法和浏览器文档对象模型这两部分内容就可以了。 当能在前面提到的几个简单场景中运用这几章中的内容完成任务时,就说明闭关修练可以结束了, 有了出关去江湖上闯荡的资格了。

还需要说到的一个东西叫jQuery, 这个东西的介绍在这里就不展开了。 举个简单的例子, 如果把JavaScript技术当成是「九阴真经」的话, 那前面讲到原生JavaScript相关的东西就是「九阴真经」的前半卷,而jQuery就是后半卷, 如果没学前半卷就去练后半卷的话, 那就会和梅超风一个下场 。 切记, 一定要学了原生JavaScript后再去学习jQuery, 这关系整个前端职业生涯的发展和成就。

最后,不能不知道,学习前端的三把利器

  1. 看书
  2. 使用搜索引擎
  3. 不懂上技术论坛提问(推荐上 http://www.csdn.net)

用好这三把武器,行走江湖将能如虎添翼。

我不建议去培训班学习,如果想做一个优秀的前端开发工程师,自学能力是必须要掌握的,既然如此,那不妨在入门的时候就可以开始自学了,何必多此一举去上培训班。而且,上培训班不仅可能削弱自学能力,还浪费钱。此外,现在培训班的教学质量真的很难保证,很可能的结果是吞了你的钱还教不会你技术。

透露点敏感而现实的东西, 如果把上面介绍的内容学到位, 那么在杭州地区, 月薪资应该能拿到6-8K, 一到两年后会破万, 再之后就看自己修行道行的深浅了。
再此,我在这准备了一个群,有很多资料免费领取,请私聊我

 

版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43623970/article/details/105694214

公告

mrnaas阅读(264)

本网站数据已经更新完毕,以后本网站会稳定为各位开发爱好者提供服务,如果遇到问题欢迎大家留言,会及时为大家解决!

MN乐享-乐享生活助手上线

mrnaas阅读(280)

小程序乐享生活助手上线,暂定第一版,后期会添加更多的生活小助手!

欢迎大家体验及提出意见!

欢迎大家关注公众号:

 

cnpm报错 : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本

mrnaas阅读(305)

 

cnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com
/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ cnpm install
+ ~~~~
    + CategoryInfo          : SecurityError: (:) [],PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

出现这个问题主要是因为没有执行可用脚本,具体解决办法如下:

1、打开power shell(一定要用管理员身份运行

2、在命令行输入:set-ExecutionPolicy RemoteSigned

3、输入A 回车

4、再次输入cnpm install就可以运行了

 

欢迎大家关注公众号: