2019-07-24 记录

最新推荐文章于 2022-05-26 23:36:59 发布

加油的小五

最新推荐文章于 2022-05-26 23:36:59 发布

阅读量105

点赞数

本文链接：https://blog.csdn.net/fmm1993/article/details/97093067

版权

记录日常专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue 模板语法

  <style>
    .active {
      color: red;
    }

    .yellow {
      color: yellow
    }
  </style>
<div id="app">
    <div>{{msg}}</div>
    <div v-text="msg"></div>
    <div v-html="msg" :class="[activeClass,activeClass1]" @click="onClickDiv"></div>
    <div>
      <!-- {{getName()}} {{age}} -->
      {{name}} {{age}}
    </div>
 </div>
   <div id="app">
    <div>{{msg}}</div>
    <div v-text="msg"></div>
    <div v-html="msg" :class="[activeClass,activeClass1]" @click="onClickDiv"></div>
    <div>
      <!-- {{getName()}} {{age}} -->
      {{name}} {{age}}
    </div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        msg: '<h1>baby</h1>',
        sName: 's',
        eName: 'e',
        age: '28',
        activeClass: '',
        activeClass1: 'yellow',
        actived: false
        // name: ''
      },
      // watch: {
      //   sName: function () {
      //     console.log('计算了一次');
      //     this.name = this.sName + this.eName;
      //   },
      //   eName: function () {
      //     console.log('计算了一次');
      //     this.name = this.sName = this.eName;
      //   }
      // },
      methods: {
        getName: function () {
          console.log('计算了一次');
          return this.sName + ' ' + this.eName;
        },
        onClickDiv: function () {
          // this.actived = !this.actived;

          this.activeClass = this.activeClass === 'active' ? "" : "active"

        }

      },
      computed: {
        name: {
          get: function () {
            console.log('计算了一次');
            return this.sName + ' ' + this.eName;
          },
          set: function () {
            this.age = '9'
          }
        }
      }
    })

总结

1、v-for 可以循环整数，
2、template 标签可以不占位，并且可以使用v-for 循环，不可以使用 v-if
3、v-for 要加:key属性
4、改变数组要用变异方法，或者set

组件使用细节

1、tbody 标签下面直接跟组件会报错，因为tbody下面只能跟着tr ,

正确写法

<table>
      <tbody>
        <tr is="row"></tr>
        <tr is="row"></tr>
      </tbody>
</table>

2、子组件中的data,要用函数返回对象的形式写：因为在子组件会有很多个用函数返回值data的形式会区分每个子组件的值，根组件是可以直接写成data对象的。

 Vue.component('row', {
      template: '<tr><td>{{content}} </td></tr>',
      data: function () {
        return {
          content: 'this is a row'
        }
      }

    })
    var app = new Vue({
      el: '#app',
      data: {},
    })

3、dom节点的引用

<body>
  <div id="app">
    <div ref="hello" @click="handleClick">ddd</div>
  </div>
  <script>
    Vue.component('row', {
      template: '<tr><td>{{content}} </td></tr>',
      data: function () {
        return {
          content: 'this is a row'
        }
      }

    })
    var app = new Vue({
      el: '#app',
      data: {},
      methods: {
        handleClick: function () {
          console.log(this.$refs.hello.innerHTML)
        }
      }
    })
  </script>
</body>

写到标签上获取的是dom的引用写到组件上是组件的引用

  <div id="app">
    <counter ref="one" @change="handleChange"></counter>
    <counter ref="two" @change="handleChange"></counter>
    <div>{{total}}</div>
  </div>
  <script>
    Vue.component('counter', {
      template: '<div @click="handleClick">{{number}}</div>',
      data: function () {
        return {
          number: 0
        }
      },
      methods: {
        handleClick: function () {
          this.number++;
          this.$emit('change')
        }
      }

    })
    var app = new Vue({
      el: '#app',
      data: {
        total: 0
      },
      methods: {
        handleClick: function () {
          console.log(this.$refs.hello.innerHTML)
        },
        handleChange: function () {
          this.total = this.$refs.one.number + this.$refs.two.number
        }
      }
    })
  </script>

子组件要修改父组件传过来的值

直接修改是会报错的，正确做法是把props中父组件传递过来的数据，赋值一份给自己的data属性里面然后修改自己的属性

<body>
  <div id="app">
    <counter :count="2"></counter>
    <counter :count="3"></counter>
  </div>
  <script>
    Vue.component('counter', {
      props: ['count'],
      template: '<div @click="handleClick">{{number}}</div>',
      data: function () {
        return {
          number: this.count
        }
      },
      methods: {
        handleClick: function () {
          this.number++;
        }
      }

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

子组件给父组件传值

 this.$emit('change', 2)

组件参数校验

  <div id="app">
    <child content="123hhh"></child>
  </div>
  <script>
    Vue.component('child', {
      props: {
        // content: [Number, String]
        content: {
          type: String,
          // required: false,
          // default: 'default'
          validator: function (value) {
            return (value.length > 5)
          }
        }
      },
      template: '<div>{{content}}</div>'
    })
    var app = new Vue({
      el: '#app',
    })

加油的小五

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019-07-24 记录

vue 模板语法 <style> .active { color: red; } .yellow { color: yellow } </style><div id="app"> <div>{{msg}}</div> <div v-text="msg...
复制链接

扫一扫