lixiuxiu2017的博客

原创 Vue.js实现的一个简单的 todo list 的demo

注意啦！！！！学习本例demo的前提是你已经熟悉了vue语法该demo用到了vue中的组件思想和各种指令，比如v-for、v-bind、v-on等等该demo需要注意的地方有：①任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域，为了把迭代数据传递到组件里，我们要用 props选项 ②对于Vue2.2.0+的版本，当在组件中使用 v-for 时，必须同时使用key 属性。③关联组件时可以...

原创 Vue的安装及简单功能介绍

1、安装Vue Devtools（1）找到vue-devtools的github项目，并将其clone到本地某个文件夹下，利用Git命令：git clone https://github.com/vuejs/vue-devtools.git（2）在本地clone下来的vue-devtools文件夹下，安装项目依赖的npm包，利用npm命令：npm install（3）然后编译项目文件，利用npm命...

转载 Sublime Text 3 快捷键精华版

Sublime Text 3 快捷键精华版Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：选择多行Ctrl+Shift...

原创 git仓库同步到GitHub中的完整流程及Summary

1、把git仓库中的文件推送到GitHub中的完整流程（1）先把本地要上传的所有文件夹及文件都添加到git仓库中首先进入到放置所有要上传的文件及文件夹的目录下，单击右键选择“git bash”进入git命令行，然后初始化git仓库、添加到暂存区、提交岛git仓库中，如下图所示：  （2）再把本地仓库master分支上的所有文件都推送到GitHub远程仓库origin对应的master分支中先远程添...

原创 CSS3新增的所有功能

对于CSS3新增的所有功能及详细使用方法在我的GitHub上有详细的讲解，详见链接https://github.com/lixiuxiu2017/CSS3这里只是列出CSS3新增的功能概括：1、CSS3介绍2、CSS3新增的超级选择器：属性选择器、结构性伪类选择器、UI元素状态伪类选择器、通用兄弟元素选择器3、使用选择器在页面中插入文字、图片、项目编号等内容4、文字阴影与自动换行5、各种盒模型：总...

原创 HTML5的拖放API

（1）要使元素成为可拖动元素，首先要设置元素的draggable属性为true，但默认情况下，图像img元素、链接a元素都是可拖动的，即draggable属性默认为true（2）与拖放有关的事件类型有：dragstart（拖放操作开始时触发）：产生事件的元素是被拖放的元素drag（拖放过程中持续触发）：产生事件的元素是被拖放的元素dragenter（被拖放的元素开始进入放置目标元素时触发）：产生事...

原创 HTML5新增的video元素与audio元素的使用方法

HTML4中如果要在网页上播放一段音频或视频，必须使用第三方插件比如flash，HTML4代码量太大，容易给服务器增加负担，造成宽带浪费，为了解决这些问题，HTML5中增加了video视频元素和audio音频元素功能（1）基础用法：①video元素专门用来播放网络上的视频，audio元素专门用来播放网络上的音频；使用video和audio元素进行播放时不需要使用其他的插件，只要浏览器支持HTML5...

原创 利用Web Storage制作简单的网页留言板

友情提示：关于Web Storage本地存储功能的详细介绍，详见链接：http://blog.csdn.net/lixiuxiu2017/article/details/79592091，这里不再赘述利用Web Storage制作简单的网页留言板，需要自定义三个函数，分别实现不同的功能：（1）saveData()：将留言板中输入的内容保存到localStorage对象中。首先利用new Date(...

原创 Web Storage本地存储功能

在HTML4中使用cookie在客户端保存用户名等一些简单的用户信息，但cookie的缺点是：难以操作，长度只能限制在4KB，每个cookie都会被添加到http请求头部中发送给服务器，容易造成宽带浪费等，为了解决这些问题，在HTML5中提供了在本地客户端存储数据的功能Web Storage，其中包括sessionStorage和localStorage两种对象的定义（1）sessionStora...

原创 HTML5新增的canvas元素技能之四

5、利用canvas元素绘制动画在canvas画布中制作动画实际上就是不断变化坐标、擦除、重绘的过程（1）设置动画的间隔时间：使用setInterval（执行动画的函数，间隔时间）全局方法（2）设置绘图函数的方式一：通过不断变换x，y的坐标来实现Index1.html文件中的代码如下：（Index2.html文件中把'canvas1.js'换成'canvas2.js'即可）<!DOCTYPE...

原创 HTML5新增的canvas元素技能之三

4、利用canvas元素及JS脚本绘制文字（1）设置文本的三个属性：a、文本样式font=”font-weight font-sizefont-family”（字体加粗 字体大小 字体类型）b、文本水平对齐方式textAlign，属性值有：start（默认值）、end、left、right、centerc、文本垂直对齐方式textBaseline，属性值有：top（顶部对齐，但会留点距离）、mid...

原创 HTML5新增的canvas元素技能之二

3、利用canvas元素及JS脚本绘制圆形（1）表明开始绘制新路径：利用上下文对象的beginPath()方法（2）绘制圆形路径：利用上下文对象的arc()方法，语法是：arc(x,y,radius,startAngle,endAngle,anticlockwise),其中（x,y）是圆的圆心，radius是圆的半径，startAngle是起始角度，endAngle是结束角度，anticlockw...

原创 HTML5新增的canvas元素技能之一

1、利用canvas元素创建画布（1）创建画布：指定canvas元素的三个属性id、width（宽度）、height（高度）（2）引入JS脚本：利用script标签引入一个外部JS脚本文件，该文件中定义一个draw函数，包括绘制各种图形的逻辑实现过程（3）使用draw函数进行绘画：在body元素中加入onload="draw('canvas')"属性，调用脚本文件中的draw函数，canvas的基...

原创 HTML5的大纲讲解

HTML5的大纲讲解（1）HTML5大纲分析工具网址：https://gsnedders.html5.org/outliner/（会呈现最终页面效果）（2）HTML5大纲的编排规则：分为‘显示编排’和‘隐式编排’两种方式。‘显示编排’是指明确使用section元素进行分块，每个内容区块内使用标题元素h1-h6；‘隐式编排’是指不使用section元素进行分块，而是根据标题元素h1-h6的级别进行自...

转载 Git基本常用命令

Git基本常用命令如下：  　　mkdir：         XX (创建一个空目录 XX指目录名)  pwd：          显示当前目录的路径。  　　git init          把当前的目录变成可以管理的git仓库，生成隐藏.git文件。  　　git add XX       把xx文件添加到暂存区去。  　　git commit –m “XX”  提交文件 –m 后面的是注释...

原创 Git本地仓库与GitHub远程仓库的同步方法

GitHub介绍：基于Git的项目托管平台，简单的说就是一个网站，通过注册账号后，可以使用Git服务，它提供了可以在上面创建资源仓库的Web页面，通过shell命令或者图形用户界面可以和远程项目同步更新，对项目进行管理。换句话说，就是一个项目由多个人一起干，开发中对于项目里的文件，每个人都有可能拿同一文件进行来编辑，为了协同开发，就有了像Git（版本控制）这样的东西。而GitHub就相当于项目放置...

原创 Git的安装和使用教程

Git介绍：分布式版本控制系统（百度百科）分布式：Git版本控制系统是一个分布式的系统，是用来保存工程源代码历史状态的命令行工具。保存点：Git的保存点可以追踪源码中的文件, 并能得到某一个时间点上的整个工程项目的状态；可以在该保存点将多人提交的源码合并, 也可以回退到某一个保存点上。Git离线操作性：Git可以离线进行代码提交，因此它称得上是完全的分布式处理，Git所有的操作不需要在线进行；这意...

转载 HTML5废弃的标签

原创 header、hgroup、footer、address标签的demo

1、header标签的使用方式：2、hgroup标签的使用方式：3、footer标签的使用方式：4、address标签的使用方式：

原创 HTML5新的网页结构及主要新增元素的使用

1、HTML5的定义：HTML即超文本标记语言，是一种解释型文档，不做任何的编译处理HTML5是HTML的第五次产品更新，能够提高新元素的互操作性，解决了浏览器之间的不兼容性问题，目标就是将HTML5网页上的音视频、图像、动画等都带入一个国际标准化HTML5结构清晰，增加了很多主体元素，比如NAV标签表示导航的意思2、HTML5新的网页结构<!DOCTYPE html>   <!...

原创 标签nav的demo

<body>    <h1>nav的使用方法</h1>    <nav>       <ul>           <li><a href='nav标签'>首页</a></li>           <li><a hr

原创 标签aside的demo

方式一的demo：<body>   <header>       <h1>国庆节去成都看熊猫</h1>   </header>   <article>       <h2>看熊猫要去大熊猫基地</h2>        <p>那里有很多的大熊猫</

原创 标签section的demo

section元素自身嵌套使用的demo：<body><section>    <h1>这是一个section元素</h1>    <p>这里是一个内容区块</p>   <section>         <h2>A</h2>         <

原创 标签article的demo

<body><article>   <header>       <h1>我是article标题</h1>        <p>创建时间：<timepubdate='pubdate'>2018/3/7</time></p>   </header&

原创 ES6标准--Great Progress

这三个月我又自学了jQuery库和ES6语法，敲了大量的代码去练习。因为需要一边写论文一边自学这些前端的知识，所以进度可能有点慢，但我觉得能一直坚持每天学一点也是一种毅力，在这里想分享一下看完这两者的心得体会。jQuery库---现在已经不流行强调的理念是write less,do more(写得少，做得多），所以它提供的独特的选择器功能、链式操作方式、事件处理机制和封

原创 学前端VS考研

2017.10.17---一个值得纪念的日子终于把700多页的《JavaScript高级程序设计（第3版）》看完了，虽然中间断断续续花了将近半年的时间（中间还要上课看论文），但我敢保证看的质量绝对是杠杠的。因为我看书有一个习惯，就是第一遍就会看的特别仔细，而且会记住大概60%以上，然后第二遍第三遍可能就会过得很快，而有的人是第一遍先大体看一遍，然后第二遍再仔仔细细的看，所以我对看书的观点一直是

原创 JS中的继承机制

我昨天学习了JS中的两种继承机制：组合继承和寄生式组合继承组合继承是通过原型链实现对原型属性和方法的继承，通过借用构造函数实现对实例属性的继承寄生组合式继承是通过原型链的混成形式实现对方法的继承，通过借用构造函数实现对属性的继承组合继承的demo：寄生组合式继承的demo：二者的区别：组合继承最大的问题就是需要调用两次超类型的构造函数，这会造成构造函数中的属性被

原创 初学前端开发语言的心得

本人现在正在攻读硕士学位，处于研一下学期，从2017.4.1开始了学习前端开发语言的漫漫长征路，到今天5.17止，已经过去了一个半月。这期间除了上课、看论文，其他大部分时间都用来学习前端语言之一——JavaScript语言了，但感觉只是懂了这门语言的冰山一角中的冰山一角，真的是连入门都不算，不得不承认，一般程序员真不是付出一点努力就能当的，况且我的目标是高级程序员，想想漫漫长征路还有二万八千里要走