Vue复习(四)

最新推荐文章于 2024-03-20 17:18:51 发布

Dreamer_WYL

最新推荐文章于 2024-03-20 17:18:51 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/Dreamer_WYL/article/details/79924506

版权

表单控件绑定

v-model
input type=”text”

为表单控件元素创建双向数据绑定。（将JS变量的值“快速”设定到控件上，然后将用户输入的内容“快速”设置会JS变量）

（ps: input属性有很多，这次讲的文本属性。其他还有单选/复选/下拉框等。)

vue.js会将用户输入内容动态绑定回message变量

表单修饰符

.lazy
.number
.trim

.lazy

用户输入内容时不做绑定数据的更新处理，在控件的onchange事件（光标离开输入框时）中更新绑定的变量.
vue.js默认的行为，当用户在一个文本框中输入内容时，它在用户输入的过程中会动态绑定它绑定的这个变量。那么加上 .lazy 之后，用户输入时不做任何的处理，在等用户输入完之后，才做变量的绑定，目的是提高页面的处理效率

.number
将用户输入的内容转换为数值类型，如果用户输入非数值的时候，则返回NaN。

.trim

自动去掉用户输入内容两端的空格。

组件

Component,Portlet
组件就是页面上的一小块区域内容，完成一个小的页面功能

<body>
    <div id="app">
       <today-weather></today-weather>
    </div>
    <script>
       Vue.component('today-weather', {
            template:'<div>是是是，对对对，恩恩恩</div>'
       });

       var app = new Vue({
            el: '#app',
       });
    </script>
</body>

这个是全局性的

组件的局部注册
Vue.js的组件不仅可以单独声明注册使用，还可以在Vue实例中进行局部注册使用。

var WeatherComponent = {
           template: '<div>今天下雨,随它去吧!</div>'
       };
       var app = new Vue({  //这里就是所谓的vue实例
            el: '#app',
            data: {
            },
            components: {
                'my-weather': WeatherComponent
            },
       });

组建：数据
* 组建的数据函数
为Vue.js组件添加数据，使组件可以动态显示各种数据，注意是数据函数，不是数据属性。

data: function(){
    return{
     message:'学习使我快乐'
  };
}

组件：传递数据
* 为组件传递数据
制作可接收参数的组件

<div id="app">
      <h1>你的成绩评价</h1>
      <test-result :score="50"></test-result>
      <test-result :score="65"></test-result>
      <test-result :score="90"></test-result>
      <test-result :score="20"></test-result>
  </div>
  <script>
      Vue.component('test-result', {
      props:['score'],
      template:'<div><strong>{{score}}分.{{testResult}} </strong></div>',
      computed: {
        testResult: function() {
          var strResult = "";
          if (this.score < 60)
            strResult = "不及格";
          else if (this.score < 90)
            strResult = "中等生";
          else if (this.score <= 100)
            strResult = "优等生";
          else if (this.score > 100)
            strResult = "哈麻批，分数不对，重写";
          return strResult;
          }
        } 
     });   
      var app = new Vue({
          el: '#app',
      });
  </script>

组件：传递变量
* 为组件传递变量数据
制作可接受变量参数的组件。

  <div id="app">
     <div>请输入您的名字：<input v-model="myname"></div>
     <hr>
     <say-hello :pname="myname"></say-hello>
  </div>
  <script>
      Vue.component('say-hello', {
      props:['pname'],
      template:'<div>你好， <strong>{{pname}}</strong>！</div>',
     });   
      var app = new Vue({
          el: '#app',
          data: {
            myname: 'billy'
          }
      });
</script>

组件：参数验证
* preps:组件参数验证语法
为组件中接受到的变量进行逻辑验证。

<body>
  <div id="app">
      <h3>身世之谜</h3>
      <show-member-info name="koma" :age="25" :detail="{address:'earth',language:'世界语'}"></show-member-info>
  </div>
  <script>
      Vue.component('show-member-info'{
        props: {
          name: {
            type: String,
            required: true,
          },
          age: {
            type: Number,
            validator: function (value) {
                return value >= 0 && value <= 100;
            }
          },
          detail: {
            type: Object,
            default: function() {
              return {
                address: 'ws',
                language: 'English',
              };
            }
          },
        },
        template: '<div>姓名:{{this.name}}<br/>'
            * '年龄:{{this.age}}岁<br/>'
            * '地址:{{this.detail.address}}<br/>'
            * '语言:{{this.detail.language}} </div>'
      });
      var app = new Vue({
          el: '#app',
      });
  </script>
</body>

组件叫显示人的内部信息，有人的名字年龄和详细信息，详细信息是一个对象。
对传进来的参数进行验证。

首先是全局性的组件定义，Vue.component
然后props是一个属性集合，里面是java脚本的对象，每一个对象就是一个参数名。
里面的detail是一个属性，在属性里可以描述多个内容，定义了一个object对象，如果没给对象赋值，默认返回初始的地址和语言。

组件：事件传递
* v-on
* $emit

v-on

侦听组件事件，当组件触发事件后进行事件处理。

$emit

触发事件，并将数据提交给事件侦听者。、

 <div id="app">
      <h1>人生加法</h1>
      <add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
      <hr>
      <h3>{{result}}</h3>
  </div>
  <script>
      Vue.component('add-method', {
        props:['a','b'],
        template:'<div><button v-on:click="add"加吧</button></div>'
        methods: {
          add:function(){
            var value = 0;
            value = this.a + this.b;
            this.$emit('add_event,'{
              result:value
            });
          }
        },  
      });
      var app = new Vue({
          el: '#app',
      });
  </script>

前面的组件系列都是父组件给子组件传递参数。这个事件传递是子组件通过事件传递给父组件。

v-on一般用在父组件当中，侦听子组件，当事件发生后进行处理。

父组件调用子组件的时候通过v-on注册一个侦听子组件add_event事件的这么一个方法，方法名叫”getAddResult”
add-method是子组件名，a，b是子组件的一个参数，如果子组件触发add_event方法之后，会调用父组件的”getAddResult”这个函数

组件：slot插槽
* slot
slot是父组件与子组件的通讯方式。可以将父组件的内容显示在子组件当中.

Dreamer_WYL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue复习(四)

表单控件绑定v-modelinput type=”text”为表单控件元素创建双向数据绑定。（将JS变量的值“快速”设定到控件上，然后将用户输入的内容“快速”设置会JS变量）（ps: input属性有很多，这次讲的文本属性。其他还有单选/复选/下拉框等。)vue.js会将用户输入内容动态绑定回message变量表单修饰符.lazy.number.trim...
复制链接

扫一扫