uni-app---- 小程序语法和vue语法比对(基本类似)

 

一   uni-app总结的比对的文章 https://ask.dcloud.net.cn/article/35657

 1   在uni-app、小程序、weex, rax 的各个端中，除了h5端，其他端的js都运行在一个独立的v8引擎下，不是在浏览器中，所以浏览器的对象无法使用(window、document、navigator、location)。

 2   以前的dom操作html，改成vue、react的MVVM模式了(双先绑定/domdiff)。

 现在前端趋势是去dom化，改用mvvm模式，更简洁的写法，大幅减少代码行数，同时差量渲染性能更好。

3    小程序的数据绑定参考了vue，但自己修改了一些。在uni-app中只支持标准的vue，不支持小程序的数据绑定语法。——小程序不支持axml界面中直接绑定 {{}} 方法。—vue里面支持的。

      小程序里的setData在uni-app里并不存在，因为vue是自动双向数据绑定的。直接通过赋值方式修改数据，如果数据绑定到界面上，界面会自动更新渲染。

4    vue和小程序 — 都有methods: {}

需要在js的export default {} 里的 methods: {} 里写一个方法，然后在组件中使用@click="changetextvalue()"

 

   

  1  全局样式，在根目录下的app.vue里写入，每个页面都会加载app.vue里的样式。——相当于小程序的app.js/app.acss

  2  <sytle>…也是通过 @import  ‘common/index.acss’ ; 引入外部样式</style>

  3  都是{{}} 绑定。

  4  : 属性绑定——相当于 v-mode:   ;  @事假绑定—— 相当于v-on:Click 这里是@click=“” … 不需要用{{}} 包括，直接写在”” 中。

  <button :type="buttontype" @click="changetextvalue()">修改为789</button>

  5  vue支持组件导入，可以更方便的封装一个包括界面、js、样式的库

  <template>  

    <view>  

        <uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用组件-->  

    </view>  

</template>  

<script>  

    import uniBadge from "../../../components/uni-badge.vue";//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）  

    export default {  

        data() {  

            return {  

 

            }  

        },  

        components: {  

            uniBadge //2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）  

        }  

    }  

</script>

6   如需要全局导入vue组件，即每个页面都可以直接使用而不用引用和注册的话，在项目根目录下的main.js里处理。

//main.js  

import pageHead from './components/page-head.vue' //导入  

Vue.component('page-head', pageHead) //注册。注册后在每个vue的page页面里可以直接使用<page-head></page-head>组件。

 

7   以前是html标签，比如<div>，现在是小程序组件，比如<view>

标签属于浏览器内置的东西；把一段js封装成函数或模块，你也可以把一个ui控件封装成一个组件。

8   vue支持给组件设ref（引用标记），这类似于之前html中给一个dom元素设id，然后在js中也可以用this.$refs.xxx来获取。————react也支持。