首页技术为王JavascriptJS入门到精通 第20章 常用前端框架简介

JS入门到精通 第20章 常用前端框架简介

分类Javascript时间2026-07-08 10:44:18发布信义之树浏览102
导读：一、练习 1. 练习1 （1）源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定义数组并输出</title...

一、练习

1. 练习1

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
    <title>定义数组并输出</title>
    <script src="JS/react.js"></script>
    <script src="JS/react-dom.js"></script>
    <script src="JS/browser.min.js"></script>
</head>
    
<body>
    <div id="example"></div>   
    
      
      
<script type="text/babel">
     var arr = [
          <h1>Hello React</h1>,
          <h2>Hello JavaScript</h2>
    ];
      ReactDOM.render(
        <div>{arr}</div>,
          document.getElementById('example')
      );
</script>
      
      
</body>
</html>

   

 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_1/

 （3）Tips

   JS/react.js，react-dom.js，browser.min.js

   <script type="text/babel">

   var arr=[<h1>Hello React</h1>, <h2>Hello JavaScript</h2>];

  ReactDOM.render(<div>{arr}</div>,document.getElementById('example'));


2. 练习2

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
    <title>文本域输入内容按钮可用</title>
    <script src="JS/react.js"></script>
    <script src="JS/react-dom.js"></script>
    <script src="JS/browser.min.js"></script>
    
<script type="text/babel">
        // 一个文本域和提交按钮
          var TextBox = React.createClass({

            getInitialState:function(){return {text:""};},
            
            render: function() {
                  return (
                    <div>
                          <textarea onChange={this.handleChange}></textarea>
                          <br/>
                          <button disabled={this.state.text.length == 0}>测试</button>
                    </div>
                  );
            },

            handleChange: function(event) {
                  this.setState({text:event.target.value});
            }
          });
        
        ReactDOM.render(
            <TextBox />,
            document.getElementById('example')
        );
        
    </script>    
    
    
  </head>
  <body>
    <div id="example"></div>  
      
    
      
  </body>
</html>

   

 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_2/

 （3）Tips

   react.js，react-dom.js，browser.min.js

   var TextBox=React.creatClass({});

   getInitialState:function(){return()},

   handleChange:function(event){this.setState({text:event.target.value});}

   ReactDOM.render((<TextBox />,document.getElementById(''));

   数据驱动页面。


3. 练习3

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>文本插值</title>
<script src="../JS/vue.js"></script>
    

    
</head>
<body>
<div id="box">
    <h3>Hello {{name}}</h3>
</div>

<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
            name : 'Vue.js'//定义数据
        }
    });
</script>        
    
    
    
</body>
</html>

   

 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_3/

 （3）Tips

   src="../JS/vue.js"

   el: #box,   element

   data:{name:'Vue.js'}

   {{}} 两个花括号

   必须放在body里？


4. 练习4

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>插入HTML</title>
<script src="../JS/vue.js"></script>


    
</head>
<body>
<div id="box">
    <p v-html="message"></p>
</div>
    
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
            message : '<h1>科技是第一生产力</h1>'//定义数据
        }
    });
</script>    
    
</body>
</html>

   

 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_4/

 （3）Tips

   必须在body下面。

   el:

   data:{message:''}

   v-html


5. 练习5

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>对商城头条的标题进行截取</title>
<style>
a {
  text-decoration: none;
  color:#000000;
  font-size:14px;
  font-family:"微软雅黑"
}

ul,li{
list-style:none;}
li{
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    overflow: hidden;}
    
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <li><a href="#"><span>[特惠]</span>{{title1 | subStr}}</a></li>
        <li><a href="#"><span>[公告]</span>{{title2 | subStr}}</a></li>
        <li><a href="#"><span>[特惠]</span>{{title3 | subStr}}</a></li>
        <li><a href="#"><span>[公告]</span>{{title4 | subStr}}</a></li>
        <li><a href="#"><span>[特惠]</span>{{title5 | subStr}}</a></li>
    </ul>
</div>
    
<script type="text/javascript">
    
    var demo = new Vue({
        el : '#box',
        
        data : {
            title1 : '商城爆品1分秒杀',
            title2 : '商城与长春市签署战略合作协议',
            title3 : '洋河年末大促，低至两件五折',
            title4 : '华北、华中部分地区配送延迟',
            title5 : '家电狂欢千亿礼券 买1送1！'
        },
        
        filters : {
            subStr : function(value){
                if(value.length > 10){               //如果字符串长度大于10
                       return value.substr(0,10)+"..."; //返回字符串前10个字符，然后输出省略号
                }else{                               //如果字符串长度不大于10
                       return value;                    //直接返回该字符串
                }
            }
        }
    });
</script>


</body>

</html>

   

 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_5/

 （3）Tips

   filters:{}  过滤器。

   |   管道符。

  subStr:function(value){}

  value.substr(0,10)


6. 练习6

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>绑定属性</title>
<style type="text/css">
.title{
    color:#FF0000;
    border:1px solid #FF00FF; 
    display:inline-block;
    padding:5px;
}
</style>
<script src="../JS/vue.js"></script>
    
</head>
    
<body>
    
<div id="box">
    <span v-bind:class="value">梦想照进现实</span>
</div>
    
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
            value : 'title'//定义绑定的属性值
        }
    });
</script>
    
</body>
</html>

   

 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_6/

 （3）Tips

   v-bind:class="value" 绑定html。


7. 练习7

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>动态改变图片透明度</title>
<style>

</style>
<script src="../JS/vue.js"></script>
</head>
<body>
    
<div id="example">
    <img id="pic" v-bind:src="url" v-on:mouseover="visible(1)" v-on:mouseout="visible(0)">
</div>
    
    
    
<script type="text/javascript">
    
var vm = new Vue({
    
    el:'#example',
    data:{
        url : 'images/flower.jpg'},
        methods : {
            visible : function(i){
                var pic = document.getElementById('pic');
                if(i == 1){
                    pic.style.opacity = 0.5;
                }else{
                    pic.style.opacity = 1;
                }
            }
        }
})

</script>


</body>

</html>

   

 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_7/

 （3）Tips

   v-bind:src="url" v-on:mouseover="visible(1)"

   data:{url:''},

   methods:{visible:function(i){}} 键值对的形式，方法，实现。


8. 练习8

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>判断2021年2月份的天数</title>
<script src="../JS/vue.js"></script>
</head>
<body>
    
<div id="box">
    <p v-if="(year%4==0 && year%100!=0) || year%400==0">
        {{show(29)}}
    </p>
    
    <p v-else>
        {{show(28)}}
    </p>
</div>
    
    
    
<script type="text/javascript">
    
    var demo = new Vue({
        
        el : '#box',
        data : {
            year : 2021
        },
        methods : {
            show : function(days){
                alert(this.year+'年2月份有'+days+'天');//弹出对话框
            }
        }
    });
</script>
</body>
</html>

   

 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_8/

 （3）Tips

   v-if="" v-else

   this.  实例里的都能找到


二、编程训练

1. 训练1

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
    <title></title>
    <script src="../JS/react.js"></script>
    
    <script src="../JS/react-dom.js"></script>
    
    <script src="../JS/browser.min.js"></script>
    
  </head>
  <body>
      
    <div id="example"></div>
      
    <script type="text/babel">
    
      function getTime() {
        var element = <div>现在时间：{new Date().toLocaleTimeString('zh-CN', { hour12: false })}</div>;
        
        ReactDOM.render(element,document.getElementById('example'));
      }
      
      setInterval(getTime, 1000);
      
    </script>
      
  </body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_9/

  （3）Tips

    var element= <div></div>;  直接写

    {new Date().toLocaleTimeString('zh-CN',{hour12:false})}

    

2. 训练2

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
    <title></title>
    <script src="../JS/react.js"></script>
    <script src="../JS/react-dom.js"></script>
    <script src="../JS/browser.min.js"></script>
  </head>
  <body>
      
    <div id="example"></div>
      
    <script type="text/babel">
    
      var inputStyle = {
        "backgroundColor":"#EEEEEE",
        "color":"blue"
      };
      
      function App(){
        return (
                <div>
                  <input type="text" style={inputStyle}/>
                  <button>测试</button>
                </div>
        );
      }
      
      ReactDOM.render(
              <App />,
              document.getElementById("example")
      )
    </script>
      
      
  </body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_10/

  （3）Tips

    style={inputStyle}

    <App />   组件函数


3. 训练3

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style>

</style>
<script src="../JS/vue.js"></script>
</head>
<body>
    
<div id="example">
    <img id="pic" v-bind:src="url" v-on:mouseover="enlarge()" v-on:mouseout="resume()">
</div>
    
<script type="text/javascript">
    
var vm = new Vue({
    el:'#example',
    
    data:{
        url : 'images/flower.jpg'//图片URL
    },
    
    methods : {
        enlarge : function(){
            var pic = document.getElementById('pic');
            pic.style.width = pic.clientWidth * 1.2 + "px";
        },
        resume : function (){
            var pic = document.getElementById('pic');
            pic.style.width = pic.naturalWidth + "px";
        }
    }
})
</script>


</body>

</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_11/

  （3）Tips

    clientWidth，可视宽度。


4. 训练4

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style>

</style>
<script src="../JS/vue.js"></script>
</head>
<body>
    
<div id="example">
    <input v-model="num">
    
    <input type="button" v-on:click="judge()" value="查看结果">
    <p>{{result}}</p>
</div>
    
<script type="text/javascript">
var vm = new Vue({
    el:'#example',
    data:{
        num : '',
        result : ''
    },
    methods : {
        judge : function(){
            if(this.num == ''){
                this.result = '请输入一个数字';
            }else if(this.num % 2 == 1){
                this.result = this.num + '是奇数';
            }else{
                this.result = this.num + '是偶数';
            }
        }
    }
})
</script>


</body>

</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_12/

  （3）Tips

    v-model="num"

    v-on:click="jundge"

   

三、实践与练习

1. 实践1

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
    <title>统计单击次数</title>
    <script src="../JS/react.js"></script>
    <script src="../JS/react-dom.js"></script>
    <script src="../JS/browser.min.js"></script>
  </head>
  <body>
      
    <div id="example"></div>  
      
    <script type="text/babel">
        var ClickNum = React.createClass({
            getInitialState:function(){
                return {
                    clickCount: 0,
                }
            },
            handleClick: function(){
                this.setState({
                    clickCount: this.state.clickCount + 1,
                })
            },
            render: function(){
                return (
                    <div>
                        <h2>单击下面按钮</h2>
                        <button onClick={this.handleClick}>单击按钮统计单击次数</button>
                        <p>单击次数：{this.state.clickCount}</p>
                    </div>
                )
            }
        });
        
        ReactDOM.render(
            <ClickNum />,
            document.getElementById('example')
        )
    </script>
      
  </body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_13/

  （3）Tips

    getInitialState:function(){return{clickCount:0}}

    this.setState({clickCount:this.state.clickCount+1,})

    不太懂。


2. 实践2

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>实时显示的日期和时间</title>

<script src="../JS/vue.js"></script>
</head>
<body>
    
<div id="box">
    {{nowdate | formatDate}}
</div>
    
<script type="text/javascript">
    var formatNum = function(num){
        return num < 10 ? "0" + num : num;//为数字前添加前导0
    }
    var demo = new Vue({
        el : '#box',
        data : {
            nowdate : new Date()
        },
        filters : {
            formatDate : function(value){
                var year = value.getFullYear();
                var month = formatNum(value.getMonth() + 1);
                var date = formatNum(value.getDate());
                var hour = formatNum(value.getHours());
                var minute = formatNum(value.getMinutes());
                var second = formatNum(value.getSeconds());
                return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
            }
        },
        
        //DOM文档渲染完毕后调用
        mounted : function(){
            var _this = this;
            var timer = setInterval(function(){
                _this.nowdate = new Date()//修改数据
            },1000);
        },
        
        //实例销毁之前调用
        beforeDestroy : function(){
              if(this.timer){
                clearInterval(this.timer); //在Vue实例销毁前清除定时器
              }
        }
    });
</script>


</body>

</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_14/

  （3）Tips

    filters:{}

    mounted   安装，只执行一次。

   为什么要用_this=this ,还是没绕通。

   beforeDestroy


3. 实践3

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style>

</style>
<script src="../JS/vue.js"></script>
</head>
<body>
    
<div id="box">
    <input v-model="num1" size="5">
    <select v-model="operator">  <!--操作员-->
        <option selected>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input v-model="num2" size="5">
    =
    <input v-model="result" v-on:focus="getResult()" size="5">
</div>
    
    
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            num1 : '',
            num2 : '',
            operator : '+',
            result : ''
        },
        
        methods : {
            
            getResult : function(){
                switch (this.operator){
                    case "+":
                        this.result = parseInt(this.num1) + parseInt(this.num2);
                        break;
                    case "-":
                        this.result = parseInt(this.num1) - parseInt(this.num2);
                        break;
                    case "*":
                        this.result = parseInt(this.num1) * parseInt(this.num2);
                        break;
                    case "/":
                        this.result = parseInt(this.num1) / parseInt(this.num2);
                        break;
                }

            }
            
        }
    });
</script>



</body>

</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/20_15/

  （3）Tips

    v-model 绑定vue值

    v-on:focus=""















JS入门到精通 第19章 jQuery技术 JS入门到精通 第17章 Javascript中的XML

相关内容

更多

游客 回复需填写必要信息
↑