自用uni-app学习笔记（一）

uni-app生命周期
应用生命周期
1.onLaunch  只触发一次
2.onShow    后台转前台
3.onHide    前台转后台
4.onUniNViewMessage 对数据发送数据监听

vue学习
1.语法模板
    1.1方法一
    <view>
    {{text}}   
    </view>

    <script>
        export default {
            data() {
                return {
                    text: 'Hello word!'
                }
            }
        }
    </script>
    1.2.1方法二
    <view v-text = "text">
    
    </view>

    <script>
        export default {
            data() {
                return {
                    text: 'Hello word!'
                }
            }
        }
    </script>
    1.2.2    
    <view>
        <view v-text = "text">    
        </view>
        <view v-html = "text">    
        </view>
    </view>
    <script>
        export default {
            data() {
                return {
                    text: '<p>Hello word!</p>'//v-html 与v-ext区别:是否解析文件
                }
            }
        }
    </script>
    
2.样式绑定
    2.1方法一
        <view class = "content" style = "font-size:30px">
            text 
        </view>
    2.2方法二
        <view class = "content">
            text  
        </view>
        <style>
            .content{font-size:30px}
        </style>
    2.3方法三(动态改变样式)
        <view  :class ="text"  v-bind:style = "style1">
            text   
        </view>
        <script>
        export default {
            data() {
                return {
                    style1: ''font-size:30px
                }
            }
        }
        </script>
3.事件绑定
    3.1方法一
        <view v-on:click="click">
            text   
        </view>
        <script>
        export default {
            data() {
                return {
                }
            }，
            methods:
            {
                click:function()
                {
                    console.log("click")
                }
            }
        }
        </script>
4.条件渲染
    4.1方法一(显示并清除提交的输入框文字)
        <view class="">
            <input type="text" value="" v-model="text">
                <button type="primary" @click="click">
                    提交
                </button>            
            </input>
            <view>
                    <view class="" v-for="item in list">
                        {{item}}
                    </view>
            </view>
        </view>
        <script>
            export default {
                data() {
                    return {
                        text: '',
                        list:["hell","world"]
                    }
                },
                methods: {
                    click:function()
                    {
                        this.list.push(this.text)
                        this.text=''
                    }
                }
            }
        </script>
5.vue生命周期
    5.1 beforeCreate() //渲染前执行
    5.2 create（）     //渲染完执行(理解对象实例)
    5.3 beforeMount()  //渲染显示前执行
    5.4 mounted()      //渲染执行
    5.5 beforeUpdate() //刷新前执行
    5.6 update()       //刷新执行
    5.7 destroy()      //销毁
6.计算，属性和监听
    6.1方法一
        <view class="">
            {{fullText}}
        </view>
        <script>
            export default 
            {
                computed:
                {
                    fullText()
                    {
                        return this.text + " "+ this.list
                    }
            
                }
            }
        </script
        
    6.2补充
        (1)watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：
        当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自
        动”发生变化，也就是自动调用相关的函数去实现数据的变动。

        (2)对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不
        像watch和computed那样，“自动执行”预先定义的函数
        
        【总结】：methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数
        ，会自动调用,完成我们希望完成的作用
    
    6.3 watch:{} 监听数据
7.父子组件传值
    7.1新建文件夹->创建组件(保存)->导入组件
        import test from '../../components/test.vue'
        export default {
            components:{
                test

                //props
                //{  text:Number //对参数限制
                //     text:Array
                //     text:[String]
                //   text:[String,Number]
                //     text{
                //        type:Number
                //        default:3
                //   }
                //}
            }
        }
    7.2组件传值
        
        7.2.1 子传父
        组件：
            export default {
                props:['text'],
            }
        主件：
            <test :text ="text"></test>
        7.2.2父传子
        主件：
            <test @change="change" :text ="text"></test>            
            methods: {
                change(res)
                {
                    this.title = res
                }
            }
        组件：
            <button type="primary" @click="click">传值</button>
            methods:
            {
                click()
                {
                    this.$emit('change',this.title) // 发射信号
                }
            }