vue基础

反转字符串

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串   </button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
输出为：Runoob! 点击按钮转换为 !boonuR

Prop 验证

组件可以为 props 指定验证要求。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

   Vue.component('my-component',  { 
       props:  {  
           // 基础的类型检查 (\`null\` 和 \`undefined\` 会通过任何类型验证) 
           propA:  Number,
           // 多个可能的类型 
           propB:  [String,  Number],  
           // 必填的字符串 propC:  { 
           propC:  { 
              type:  String, 
              required:  true  
           },
           // 带有默认值的数字
           propD:  { 
               type:  Number,  
               default:  100  
           },
           // 带有默认值的对象
           propE:  { 
                type:  Object,  
                // 对象或数组默认值必须从一个工厂函数获取                      default: function(){  
                return  {message:  'hello'}                                               
               }  
           },
           // 自定义验证函数 
           propF:  { 
               validator:function(value){  
               // 这个值必须匹配下列字符串中的一个  
               return  ['success',  'warning', 'danger'].indexOf(value)  !==  -1  }  
           }
         } 
      })