vue与微信小程序的不同-记录

文件比较：

    1.微信一个页面有后缀文件.wxml,.wxss,.json,js

    .wxml为页面模板，.wxss样式，只作用域为当前页面，.json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项，.js为当前页面的逻辑处理，包含数据方法监听

    2.vue只有一个后缀为.vue的，里面包含了css与js的部分，混合在同一个.vue文件中

2.for循环，if，show语法：

    vue为v-for,v-if,v-show

    小程序为wx:for wx-if,wx-show

3.组件的引用

    1。vue中局部引入子组件需要在父组件.js部分中import导入子组件路径，然后注册使用components声明子组件标签，然后在父组件页面上使用子组件标签。子组件中使用props接收父组件传过来的值

    2。小程序子组件需要在.json文件中声明"component": true,.js文件中用Component({})包含里面所有的对象属性，里面有properties接收父组件值。第二步需要引入的父组件的 json文件中，在 usingComponents填写引入组件的组件名以及路径，然后在父组件页面上使用子组件标签

4.页面生命周期

    vue:进行数据请求时一般只用到created,mounted阶段

    小程序：进行数据请求时一般只用到onLoad,onshow阶段

5.事件处理

    vue v-on:click点击事件

    小程序 bind:tap 点击事件 //冒泡事件

           catch:tap 点击事件  //阻止事件冒泡

6:双向绑定

    vue: v-model 表格元素绑定，数据直接修改页面随之更新,v-bing:用来绑定值，而小程序中没有，值需要{{}}即可

    小程序：只需要将变量用{{}}，赋值时需要通过this.setData({data变量：值})，这样页面才会变化

7.获取子组件DOM元素

    vue：在父组件中包含里的子组件上写上ref='子refs名'，然后在父组件里的js文件中通过this.$refs.子refs名 就可以拿到子组件里的数据与方法

    小程序：在父组件里包含里的子组件写上id或者class名，人后在父组件的js文件中通过this.selectComponent("#id")或者this.selectComponent(".class")

父子组件通信：

   父传子：

        vue子组件通过props接收父组件传过来的值，父组件中的子组件标签上用 :子组件值="父组件值"

        小程序在子组件中的Component({properties：{对象}})接收，程序没有通过 v-bind，而是直接将值赋值给一个变量，父组件中的子组件标签上用 子组件值="父组件值"

    子传父事件：

        vue子组件触发父组件的方法通过this.$emit("事件名",传过去的对象值)。父组件中的子组件标签上用 <son @事件名="父组件的事件">

        小程序子组件触发父组件的发放通过this.triggerEvent('事件名', 传过去的对象值)。父组件中的子组件标签上用<son bind:事件名="父组件的事件">