分类 前端 下的文章

4afbfbedab64034f29596c8ba6c379310b551da2.jpg
众所周知，AngularJS框架是由Google维护的，但是创立者为个人，后被收购，昨天在学习Vue语法的时候，了解到键盘监控的事件，尤大大让我很震惊的
居然用如此的方式来简化代码，往常都是调用keyCode方法来监控键盘输入的键码，但是在vue中，作者封装了直接在键盘事件的后面.出来就好。

--比如说，@keyup.enter=""，意思监控enter键，于此同时，还可以.出对应的键码，比如说enter是13，那么在代码中13就可以代替enter目前我简单的测试了一下，delete，还有方向键，end键等做出了封装，非常nice，简化了代码
代码的思路令人称奇，尤大大也是HTML5的Clear的打造人

--膜拜完毕，总结一下今天的知识，今天学习特别少，因为都在没有信号的狭小的旅途中，明天就可以回归正轨
事件:

v-on:click/mouseover......

简写的:
@click=""        推荐

事件对象:
    @click="show($event)"
事件冒泡:
    阻止冒泡:  
        a). ev.cancelBubble=true;
        b). @click.stop    推荐
默认行为(默认事件):
    阻止默认行为:
        a). ev.preventDefault();
        b). @contextmenu.prevent    推荐
键盘:
    @keydown    $event    ev.keyCode
    @keyup

    常用键:
        回车
            a). @keyup.13
            b). @keyup.enter
        上、下、左、右
            @keyup/keydown.left
            @keyup/keydown.right
            @keyup/keydown.up
            @keyup/keydown.down
        .....

hello，还是你们熟悉的老沈，今天下午看了智能社的一节课，受益匪浅啊，学习vue的过程中掌握了很多boot和js的语法，又请输入图片描述
跟着导师自己做了一个留言板的小案例。

--案例感受，vue的入门是真的很简单，学到了vue的自定义指令，能够很快的做一个非常实用的留言板，但是由于是前端页面，不能数据保存
，等到后期教师满意度的项目结束以后，会写一个购物网站，把vue+bootstrap+javabean能够完整的做一个项目。
--先po一下代码吧。
<!DOCTYPE html>

<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-3.0.0.js"></script>
<script src="bootstrap.min.css"></script>
<script src="vue.js"></script>


简易留言板

序号 用户名 年龄 操作
{{$index+1}} {{item.username}} {{item.age}}

暂无数据。。。


--js代码
new Vue({

el:'#window',
data:function () {
    return{
        message:[],
        username:'',
        age:'',
        Nowindex:'-99'
    }
},
methods:{
    submit:function () {
        this.message.push({
            name:this.username,
            age:this.age
        });
        this.age='';
        this.username='';
    },
    nowdelete:function (index) {
        if(index==-2){
            this.message=[]
        }else{
            this.message.splice(index,1);
        }
    }
}

})

--得引入jq和boot和vue
--案例功能，能够提交表单信息到下方的表格，以及删除
--用到的vue指令
v-model的表单双向数据绑定
v-for循环vue数组内容
--ps：在vue2.0的版本中，不能直接使用$index来表示序列了，要在for循环声明index的存在，比如v-for="(item,$index) in message
--ps:vue的点击事件v-on:click，如果后面跟的方法名如果有参数要表达的话，要写成@click="submit($index)"，类似这种

明天继续，结束！

下载.jpg
诶友们应该知道前端时间我一直在学习React，download了很多教程，也买了一些套餐课程，但是最近我学习非常吃力
有人会问我卡在哪里了？？我回答的是webpack的热加载这一块，对，你没听错，我卡在环境配置这里了，我的第一套
教程配置非常简单，无非就是cmd安装几个npm命令下环境非常easy，但是配置webpack遇到了bug，无奈求助无果只能
放弃。

--谈谈vue
一个同班同学一直想学，今天就入手了vue，就首先学习了一些基本的语法，总体来说，入门和react差不多，都是初级
但是一直感觉vue比较简单，但是还是好好学习下，不能一直这样任性了，好吧，趁着这个时间，我就来大家入门helloworld吧

--首先安装vue，直接去vue官网去下载js文件，直接引入即可
--我们用storm打开项目之后，引入vuejs文件后，重要的一步来了，在主干部分结束以后在写你的外链js或者内链js，否则会报错
因为有一个加载js顺序的原因，我们把js的入口文件定义为index.js

--我们定义了一个test容器，现在进入index.js
new Vue({

    el:'#test',
    data:function (){
       return{
           text:'say no!'
       }
    },
    components:{
        'my-header':emple
    }

})

--我们这边定义了一个根组件new 了这个一个vue的类，类中有很多参数，比如el：这个表达的就是渲染到哪个容器中
data是组件中的数据，比如这个数据名是text，那么在本函数或者htmltest容器中写{{text}}双括号就可以实现访问
数据名中的内容，components是包含组件，这里定义了一个组件名字为my-header,emple是定义了一个子组件--
/**
*这是一个组件

  • @type {{template: string, components: {"my-child": {template: string}}}}
    */

var emple={

    template: '<p><my-child></my-child>这是我的第一个组件{{words}}</p>',
    data:function(){
      return {
       words:'yes！'         
  }

},

    components:{
        'my-child':child
    }
};

--我们把组件附给了emple，在根组件就可以直接应用，在子组件中我们有一个template是模板，返回html或者数据都可以，里面的{{words}}
刚刚说了是本函数中的data数据，本函数中的words数据名就可以用这种双括号的方式可以访问到对应的'yes！',template模板中
同样也是一个组件，是组件的组件，这边我们进行了一个组件的嵌套；
--在本函数中的components中定义了一个组件（子子组件），定义了一个my-child的组件，他的值就是child，当然这个child也是一个组件，
/**
*

  • 这是一个子组件
    */

var child={

template:'<p>i am child</p>'

};
--这边我们的template也是一个html标签，为了让子组件能够套子子组件的内容，刚刚我们在子组件的组件方法compoents中定义了一个组件
并且把值child给了my-child，然后把组件给放到了子组件的模板中，然后在根组件中与html进行交互，在html中我们在test容器中
进行了组件的创建，直接在test容器中加载了组件，这样一个组件的嵌套就好了，组件的内容有子组件的模板内容和子子组件的模板
内容，他们嵌套的内容大概顺序就是：
--首先定义了一个根组件，并且创建了一个组件为a，a组件中的值是一个组件函数，a组件中的模板中定义了一个html标签，其中html标签中又2
包含了一个组件，这个组件在子组件已经定义并且赋值，所以子子组件的模板内容+子组件的模板内容一起根组件返回到html页面中进行组件和页面的
应用。

ok，就到这里了，不太懂的话，就私信我吧。
wechat：meng99huan

下载.jpg
最近老沈可是很久没有写java代码了，在完成一部分前端的工作，熟悉我的人都知道，前端比较差，最基本的东西还是懂得，但是没有认真去
学过html5和css3，一个学校的项目由于人事的原因从最初的2人变成只有我自己，一个完善的教师满意度打分系统，前端和后台分离，目前后台大部分
功能已实现，就只是前端的，所以就今天写了一个css3的anmition动画写的一个简单的div块旋转到中央的一个效果还是挺别致的。

粘贴一下代码，原div块的position 要给顶一个最终位置，比如说要把这个块的最终位置设置在中间

ready{

border-radius: 6px;
width: 444px;
height: 430px;
background:#fff;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
/*让块旋转*/
-webkit-animation: divrotate 1.3s; /*Safari and Chrome*/

}
最后一句代码就是兼容mac浏览器和谷歌浏览器的代码
divrotate是动画名称 1.3s是整个动画运行的时间
下面我们就开始定义动画
@keyframes divrotate {

0%{
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);     /* IE 9 */
    -moz-transform:rotate(90deg);    /* Firefox */
    -o-transform:rotate(90deg);
    width:30px;
    height: 30px;

}
25%{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);     /* IE 9 */
    -moz-transform:rotate(180deg);    /* Firefox */
    -o-transform:rotate(180deg);
    /*让块往右走*/
    left:12%;
    width:100px;
    height: 100px;
}
50%{
    transform:rotate(270deg);
    -ms-transform:rotate(270deg);     /* IE 9 */
    -moz-transform:rotate(270deg);    /* Firefox */
    -o-transform:rotate(270deg);
    /*让块往右走*/
    left:24%;
    width: 180px;
    height: 180px;
}
75%{
    transform:rotate(300deg);
    -ms-transform:rotate(300deg);     /* IE 9 */
    -moz-transform:rotate(300deg);    /* Firefox */
    -o-transform:rotate(300deg);
    /*让块往右走*/
    left:48%;
    width: 280px;
    height: 280px;
}
100% {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);   /* IE 9 */
    -moz-transform:rotate(360deg);  /* Firefox */
    -o-transform:rotate(360deg);
    /*让块往右走*/
    left:34%;
    width: 444px;
    height: 430px;
}

}

定义动画带起始式是@keyframes divrotate
后面跟的是动画名称
然后每个百分比之间的样式就是，动画在经行的进度之内做出的操作，还是比较简单的
css虽然好写，但是要写出非常nice的效果，就非常需要一个很好的思路和创意

好了，这几天会持续发表一些学习ReactJS的心得。

今天又很开心学习了第四章节，收获蛮大的，希望写完文章后能对状态有着更好的掌握！
1.首先是组件的嵌套

React组件的创建是用creatClass函数
在这里我们举一个例子：
var Part_one=React.createClass({

        render:function () {
             return(
                 <div>
                 <h1>我爱敲代码</h1>
                    *<Part_Two/>*
                </div>
             );
         }
     });

然后呢，我们再定义一个组件名为 <Part_Two/>
var Part_Two=React.createClass({

         render:function () {
            return (
                 <h2>我也爱敲代码</h2>
            )
         }
    });

然后在其中一个组件中嵌套另外一个组件，就是这么简单！
测试通过后就成功显示了2行字，‘我爱敲代码和我也爱敲代码’
2.下面展示下今天比较重要的状态。
在React定义状态的时候是用
getInitialState:function(){

            return {
                clickCount:0,
            }
        }

要改变状态要调用setstate函数，在这里我做了一个小项目，点击一次按钮就加一!QQ截图20180712213911.png

ps：展示下源码
var Click=React.createClass({

        getInitialState:function(){
            return {
                clickCount:0,
            }
        },
        clickOver:function(){
            this.setState({
                clickCount:this.state.clickCount+1,
            })
        },
        render:function () {
            return (
                <div>
                    <p>点击下面的按钮</p>
                    <button onClick={this.clickOver}>点我</button>
                    <p>你一共点击了：{this.state.clickCount}</p>
                </div>
            )
        }
    });
    /*渲染到页面*/
    React.render(<Click/>,
        document.getElementById("window")
    )

解释：首先我们定义了一个状态事件，返回值是一个变量为0，然后又定义了一个事件用于每次+1，然后构建了一个div实现了简单的交互
button指向了每次+1的事件，下面的展示一共点击多少下的p标签则调用了状态事件，每当用户点击一次就调用方法让变量+1，然后p标签就
记录了一共多少次，最终渲染到window中，拥有一点点js基础的人能很直观的看懂。

写在最后：React 把组件看成是一个状态机。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

  1. 1
  2. ...
  3. 7
  4. 8
  5. 9
  6. 10
  7. 11