IP地址端口号子网掩码提交表单库

Posted dincat

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了IP地址端口号子网掩码提交表单库相关的知识,希望对你有一定的参考价值。

Vue是什么?

  • vue 是一套用于构建用户界面的渐进式框架,vue核心库只关注视图层,不仅易上手还便于与第三方库或既有项目的整合
  • 指令:本质就是属性,Vue中以v-开头的属性就是指令
  • v-clooak 防止页面加载时出现闪烁问题
     <style type="text/css">
      /* 
        1、通过属性选择器 选择到 带有属性v-cloak的标签让他隐藏
     */
      [v-cloak]{
        /* 元素隐藏    */
        display: none;
      }
      </style>
      <body>
        <div id="app">
            <div  v-cloak  >{{msg}}</div>
        /*让带有插值愈发的添加  v-cloak 在数据渲染完成之后,
        v-cloak属性会被自动去除  v-cloak一旦移除也就是没有这个属性了,
        属性选择器就选择不到该标签也就是对应的标签会变为可见 */
        </div>
        //引入vue文件
        <script src="js/vue.js"></script>
        <script>
            var vm = new Vue({
            //el指定元素 id 是 app 的元素  
            el: ‘#app‘,
            //data里面存储的是数据
            data: {
                msg: ‘Hello Vue‘
              }
          });
        </script>
      </body>
  • v-text
    1. v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
    2. 如果数据中有html标签会将html标签一并输出
    3.注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值
    <div id="app">
        **<!--注意:在指令中不要写插值语法,直接写对应的变量名称 -->
        <!--所以在v-text中赋**值的时候不要写插值语法一般不加{{}}直接写数据名 -->
         <p v-text="msg"></p>
         <!--vue中只有在标签的内容中采用插值语法 -->
         <p>{{msg}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
         new Vue({
            el: ‘#app‘,
            data: {
                msg: ‘Hello Vue.js‘
            }
        });
    </script>
  • v-html
    1. 用法和v-text 相似 但是他可以将HTML片段填充到标签中
    2. 可能有安全问题,一般只在信任的内容上使用v-html,永远不用在用户提交的内容上
    3. 它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
    <div id="app">
        <!-- 输出:html标签在渲染的时候被解析 -->
        <p v-html="html"></p>
        <!-- 输出:<span>通过双括号绑定</span> -->
        <p>{{message}}</p>
        <!-- 输出:<span>html标签在渲染的时候被源码输出</span> -->
        <p v-text="text"></p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
               message: "<span>通过双括号绑定</span>",
               html: "<span>html标签在渲染的时候被解析</span>",
              text: "<span>html标签在渲染的时候被源码输出</span>",
             }
         });
    </script>
  • v-pre
    1. 显示原始信息跳过编译过程
    2. 跳过这个元素和它的子元素的编译过程。
    3. 一些静态的内容不需要编译加这个指令可以加快渲染

    <div id="app">
         <span v-pre>{{ this will not be compiled }}</span> 
         <!--  显示的是{{ this will not be compiled }} -->
         <span v-pre>{{msg}}</span>   
         <!-- 即使data里面定义了msg这里仍然是显示的{{msg}} -->
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                msg: ‘Hello Vue.js‘
            }
        });
    </script>
  • v-once
    执行一次性的插值【当数据改变时,插值处的内容不会继续更新】

    <div id="app">
    <!-- 即使data里面定义了msg 后期我们修改了
     仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
          <span v-once>{{ msg}}</span> 
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                msg: ‘Hello Vue.js‘
            }
        });
    </script>
  • 双向数据绑定
    1. 当数据发生变化的时候,视图也就发生变化
    2. 当视图发生改变的时候,数据也会跟着同步变化
  • v-model
    v-model 是一个指令,限制在 &lt;input&gt;、&lt;select&gt;、&lt;textarea&gt;、components中使用
     <div id="app">
          <div>{{msg}}</div>
          <div>
             <!---当输入框中内容改变的时候,页面上的msg 会自动更新 -->
            <input type="text" v-model=‘msg‘>
          </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                msg: ‘Hello Vue.js‘
            }
        });
    </script>
  • v-on
    用来绑定事件的: 形式如:v-on:click 缩写为 @click
    <div id="app">
          <div>{{num}}</div>
          <div>
                <!---通过v-on或者其缩写形式@来给元素绑定事件 -->
                <button v-on:click=‘num++‘>点击1</button>
                <button @click=‘num++‘>点击2</button>
          </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                num:1
            }
        });
    </script>
    • v-on事件函数中传入参数
      <div id="app">
        <div>{{num}}</div>
        <div>
               <!-- 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数-->
              <button v-on:click=‘handle1‘>点击1</button>
              <!-- 
                  如果事件绑定函数调用,那么事件对象推荐作为最后一个参数显示传递,
                  事件对象的名称为$event
              -->
              <button @click=‘handle2(12,23,$event)‘>点击2</button>
        </div>
      </div>
      <script src="./js/vue.js"></script>
      <script>
      new Vue({
          el: ‘#app‘,
          data: {
              num:1
          },
          methods:{
              handle1:function(e){
                  this.num++
                   <!-- 事件对象中有可以拿到相应的值-->
                   <!--这个拿的是是按钮里面的值:点击1-->
                  console.log(e.target.innerHTML)
              }
              handle2:function(p,p1,e){
                  console.log(p+p1)
                  <!--这个拿的是是按钮里面的值:点击2-->
                  console.log(e.target.innerHTML)
                  this.num++
              }
          }
      });
      </script>
  • 事件修饰符
    1. 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
    2. Vue 不推荐我们操作DOM 为了解决这个问题,Vue.js 为 v-on提供了事件修饰符
    3. 修饰符是由点开头的指令后缀来表示的

        <!-- 阻止单击事件继续传播 -->
        <a @click.stop="doList"></a>
        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit"></form>
        <!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
        <a v-on:click.stop.prevent="doThat"></a>
        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div v-on:click.self="doThat">...</div>

    使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

  • 按键修饰符
    在做项目中有时会用到键盘事件,在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为v-on在监听键盘事件时添加按键修饰符

        <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
        <input v-on:keyup.13="submit">
        <!-- -当点击enter 时调用 vm.submit() -->
        <input v-on:keyup.enter="submit">
        <!--当点击enter或者space时  时调用 vm.alertMe()   -->
        <input type="text" v-on:keyup.enter.space="alertMe" >
        <!--
            常用的按键修饰符
            1. .enter =>    enter键
            2. .tab => tab键
            3. .delete (捕获“删除”和“退格”按键) =>  删除键
            4. .esc => 取消键
            5. .space =>  空格键
            6. .up =>  上
            7. .down =>  下
            8. .left =>  左
            9. .right =>  右
        -->
        <script>
            var vm = new Vue({
                el:"#app",
                methods: {
                      submit:function(){},
                      alertMe:function(){},
                }
            })
       </script>
  • 自定义按键修饰符别名
    在Vue中可以通过config.keyCodes自定义按键修饰符别名

    <div id="app">
        <!-- 预先定义了keycode 116(即F5)的别名为f5,
        因此在文字输入框中按下F5,会触发prompt方法 -->
         <input type="text" v-on:keydown.f5="prompt()">
    </div>
    <script>
        Vue.config.keyCodes.f5 = 116;
        let app = new Vue({
        el: ‘#app‘,
        methods: {
            prompt: function() {
                alert(‘我是 F5!‘);
            }
        }
    });
    </script>
  • v-bind
    v-bind 指令被用来响应地更新 HTML 属性‘
    v-bind:href 可以缩写为 :href;
    <!-- 绑定一个属性 -->
    <img v-bind:src="imageSrc">
    <!-- 缩写 -->
    <img :src="imageSrc">
  • 绑定对象
    我们可以给v-bind:class 一个对象,以动态地切换class。
    注意:v-bind:class指令可以与普通的class特性共存

    <style>
        .textColor{
            color:#f00;
            background-color:#eef;
         }
      .textSize{
            font-size:30px;
            font-weight:bold;
         }  
    </style>
        <!-- 
            v-bind 中支持绑定一个对象
            如果绑定的是一个对象则键为对应的类名值为对应data中的数据
        --->
    <div id="app">
        <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
            <li>学习Vue</li>
            <li>学习Node</li>
            <li>学习React</li>
        </ul>
    </div>
    <script>
        var vm= new Vue({
            el:‘.box‘,
            data:{
                isColor:true,
                isSize:true,
               }
        })
    </script>
  • 绑定class

    <style>
        .textColor{
            color:#f00;
            background-color:#eef;
         }
      .textSize{
            font-size:30px;
            font-weight:bold;
         }  
    </style>
    <!-- v-bind 中支持绑定一个数组,数组中classA和 classB 对应为data中的数据 --->
    <div id="app">
        <ul class="box" v-bind:class="[classA, classB]">
            <li>学习Vue</li>
            <li>学习Node</li>
            <li>学习React</li>
        </ul>
    </div>
    <script>
        var vm= new Vue({
            el:‘.box‘,
            data:{
                classA:‘textColor‘,
                classB:‘textSize‘
               }
        })
    </script>
  • 绑定对象和绑定数组 的区别
    1. 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
    2. 绑定数组的时候数组里面存的是data 中的数据
  • 绑定style

    <div id="app">
         <div v-bind:style="styleObject">绑定样式对象</div>
         <!-- CSS属性名可以用驼峰式(camelCase)或短横线分隔(kebab-case记得用单引号括起来)-->
         <div v-bind:style="{fontSize: fontSize,background:‘red‘ }">内联样式</div>
         <!--组语法可以将多个样式对象应用到同一个元素 -->
         <div v-bind:style="[styleObj1, styleObj2]"></div>
    </div>
    <script>
        new Vue({
          el: ‘#app‘,
          data: {
            styleObject: {
              color: ‘green‘,
              fontSize: ‘30px‘,
              background:‘red‘
            },
            fontSize: "30px",
            styleObj1: {
                 color: ‘red‘,
                 width:‘100px‘
           },
           styleObj2: {
                fontSize: ‘30px‘
           }
         } 
    </script>
  • 分支结构
  • v-if 使用场景
    1. 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
    2. 进行两个视图之间的切换
    <div id="app">
       <!--  判断是否加载,如果为真,就加载,否则不加载-->
       <span v-if="flag">
           如果flag为true则显示,false不显示!
       </span>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flag:true
            }
        })
    </script>
  • v-show 和 v-if的区别
    1. v-show本质就是标签display设置为none/block,控显示隐藏
    v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点
    2. v-if是动态的向DOM树内添加或者删除DOM元素
    v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
  • 循环结构
  • v-for
    用于循环的数组里面的值可以是对象,也可以是普通元素

    <ul id="example-1">
           <!-- 循环结构-遍历数组  
            item 是我们自己定义的一个名字  代表数组里面的每一项  
            items对应的是 data中的数组-->
          <li :key="item.id" v-for="item in items">
            {{ item.message }}
          </li> 
           <!--  循环结构-遍历对象 
             v 代表   对象的value
             k 代表   对象的键 
             i 代表   索引 ---> 
           <div  v-for=‘(v,k,i) in obj‘>{{v + ‘-‘ + k + ‘-‘ + i}}</div>
    </ul>
    <script>
         new Vue({
          el: ‘#example-1‘,
          data: {
            items: [
              { 
                 id:1,
                 message: ‘Tom‘
               },
              { 
                id:2,
                message: ‘Jerry‘ 
              }
            ],
            obj: {
                uname: ‘lfang‘,
                age: 13,
                gender: ‘female‘
            }
          }
        })
    </script>
  • key 的作用 一般循环都会添加key 目的是
    1. key来给每个节点做一个唯一标识
    2. key的作用主要是为了高效的更新虚拟DOM

以上是关于IP地址端口号子网掩码提交表单库的主要内容,如果未能解决你的问题,请参考以下文章

一文搞懂网络知识,IP子网掩码网关DNS端口号

4月技术指标2

在linux中,啥是配置静态和动态的IP地址、子网掩码、默认网关,如何实现

HCIA 习题库

我问你这篇保熟不?! -- 做服务端开发,不懂网络层,真的可以吗?

我问你这篇保熟不?! -- 做服务端开发,不懂网络层,真的可以吗?