vue -- processData

254 阅读1分钟
processData

基础

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>processData</title></head><body>  <h1>processData option demo</h1>  <hr>  <div id="app">    <header></header>  </div>  <script src="../js/vue.js"></script>  <script type="text/javascript">    var header_a = Vue.extend({      template: ` <p> {{message}} </p> `,      data: function () {        return {          message: "hello I am header"        }      },    });    new header_a().$mount('header')  </script></body></html>

传值

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>processData</title></head><body>  <h1>processData option demo</h1>  <hr>  <div id="app">    <header></header>  </div>  <script src="../js/vue.js"></script>  <script type="text/javascript">    var header_a = Vue.extend({      template: ` <p> {{message}} -- {{a}} </p> `,      data: function () {        return {          message: "hello I am header"        }      },      props: ['a']    });    new header_a({ propsData: { a: 1 } }).$mount('header')  </script></body></html>

注意点

传值接收使用 props 而不是prop 

processData 是对象的形式