vue 项目与微信小程序存在的相同点和不同点有哪些

1.  <img  alt="vue项目和微信小程序之间有何异同？" >

1.  <image></image>

1.  

1.  Page({  

2.  data: {  

3.  items: [  

4.  { message: 'Foo' },  

5.  { message: 'Bar' }  

6.  ]  

7.  }  

8.  })  

10.  <text>{{item}}</text>

1.  <button>Add 1</button>  

2.  <button>Add1</button>  //阻止事件冒泡

1.  <button>明天不上班</button>  

2.  <button>明天不上班</button>  //阻止事件冒泡

1.  <p>  

2.  <input>  

3.  </p>  

5.  new Vue({  

6.  el: '#app',  

7.  data: {  

8.  reason:''  

9.  }  

10.  })

1.  <input>  

2.  Page({  

3.  data:{  

4.  reason:''  

5.  },  

6.  bindReason(e) {  

7.  this.setData({  

8.  reason: e.detail.value  

9.  })  

10.  }  

11.  })

1.  <button></button>  

2.  new Vue({  

3.  el: '#app',  

4.  methods:{  

5.  say(arg){  

6.  consloe.log(arg)  

7.  }  

8.  }  

9.  })

1.  <view></view>  

2.  Page({  

3.  data:{  

4.  reason:''  

5.  },  

6.  toApprove(e) {  

7.  let id = e.currentTarget.dataset.id;  

8.  }  

9.  })

1.  //子组件 bar.vue  

2.  <template>  

3.  <p>  

4.  </p>

<p></p>  

5.    

6.  </template>  

7.  <script> 

8.  export default{ 

9.  props:{ 

10.  title:{ 

11.  type:String, 

12.  default:'' 

13.  } 

14.  } 

15.  },

17.  methods:{ 

18.  say(){

19.  console.log('明天不上班'); 

20.  this.$emit('helloWorld') 

21.  } 

22.  }

23.  </script>  

25.  // 父组件 foo.vue  

26.  <template>  

27.  <p>  

28.  <bar></bar>  

29.  </p>  

30.  </template>  

32.  <script> 

33.  import Bar from './bar.vue' 

34.  export default{ 

35.  data:{ 

36.  title:"我是标题" 

37.  }, 

38.  methods:{ 

39.  helloWorld(){ 

40.  console.log('我接收到子组件传递的事件了') 

41.  } 

42.  }, 

43.  components:{

44.  Bar 

45.  } 

46.  </script>

1.  {  

2.  "component": true  

3.  }

1.  "usingComponents": {  

2.  "tab-bar": "../../components/tabBar/tabBar"  

3.  }

1.  // 子组件  

2.  <!--components/tabBar/tabBar.wxml-->  

3.  <view>  

4.  <view>  

5.  <text></text>  

6.  <view>首页</view>  

7.  </view>  

8.  <view>  

9.  <text></text>  

10.  <view>设置</view>  

11.  </view>  

12.  </view>

1.  // 父组件 foo.vue  

2.  <template>  

3.  <p>  

4.  <bar></bar>  

5.  </p>  

6.  </template>  

7.  <script> 

8.  import Bar from './bar.vue' 

9.  export default{ 

10.  data:{ 

11.  title:"我是标题" 

12.  }, 

13.  components:{ 

14.  Bar 

15.  } 

16.  </script>  

18.  // 子组件bar.vue  

19.  <template>  

20.  <p>  

21.  </p>

<p></p>  

22.    

23.  </template>  

24.  <script> 

25.  export default{ 

26.  props:{ 

27.  title:{ 

28.  type:String, 

29.  default:'' 

30.  } 

31.  } 

32.  } 

33.  </script>

1.  properties: {  

2.  // 弹窗标题  

3.  currentpage: {            // 属性名  

4.  type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）  

5.  value: 'index'     // 属性初始值（可选），如果未指定则会根据类型选择一个 

6.  } 

7.  }

1.  //子组件中  

2.  methods: {     

3.  // 传递给父组件  

4.  cancelBut: function (e) {  

5.  var that = this;  

6.  var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象，提供给事件监听函数  

7.  this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用  

8.  }, 

9.  }  

10.  //父组件中  

11.  <bar></bar>   

12.  // 获取子组件信息  

13.  toggleToast(e){  

14.  console.log(e.detail)  

15.  }

1.  //子组件  

2.  <bar></bar>  

3.  //父组件  

4.  this.$ref.bar.子组件的方法

1.  //子组件  

2.  <bar></bar>  

3.  // 父组件  

4.  this.selectComponent('#id').syaHello()