vue基础学习(三)

03-01  vue的生存周期-钩子函数

     <style>
            [v-cloak]{display:none;}
        </style>
        <div id="box" v-cloak>
            {{msg}}
            <p v-text="msg"></p>
        </div>
        <script>
            //解决模板{{XX}}闪烁问题:
            //   css:    [v-cloak]{display:none;}     在模板中加v-cloak属性
                //或:v-text = ‘msg‘  v-html = ‘msg‘  也能防止闪烁

            //vue生存周期:

            //    钩子函数:
            //    created:        ——>  实例以创建
            //    beforeCompile:  ——>  编译之前
            //    compiled:        ——>  编译之后
            //    ready:           ——>  插入到文档中

            //    beforeDestroy:       ——>  销毁之前
            //    destroyed:           ——>  销毁之后

            window.onload = function () {
                var vm = new Vue({
                    el: ‘#box‘,
                    data: {
                        msg:‘well‘
                    },
                    created: function(){
                        alert(‘实例已创建‘)
                    },
                    beforeCompile: function () {
                        alert(‘编译之前‘)
                    },
                    compiled: function () {
                        alert(‘编译之后‘)
                    },
                    ready: function () {
                        alert(‘插入到文档‘)
                    },

                    //销毁之前和销毁之后只有在$destroy执行的时候才有
                    beforeDestroy: function () {
                        alert(‘销毁之前‘)
                    },
                    destroyed: function () {
                        alert(‘销毁之后‘)
                    }
                })

                //点击页面销毁Vue对象
                document.onclick = function () {
                    alert(‘123‘);
                    vm.$destroy();
                }
            }
        </script>

03-02  vue的计算属性一

     <div id="box" v-cloak>
            a==>{{a}}
            <br />
            b==>{{b}}
        </div>
        <script>
            window.onload = function () {
                var vm = new Vue({
                    el: ‘#box‘,
                    data: {
                        a: 1
                    },
                    computed: {     //里面其实是属性,是函数的写法,但不是函数.可以写一些业务代码,return不能少
                        b: function () {
                            //return 2;
                            return this.a + 2;
                        }
                    }
                });

                document.onclick = function () {
                    vm.a = 101;
                }
            }
        </script>

03-03  vue的计算属性二

     <div id="box">
            a==>{{a}}
            <br />
            b==>{{b}}
        </div>
        <script>
            //computed 与 data里面的属性区别:
            //computed里面可以放一些业务逻辑代码,切记要return
            window.onload = function () {
                var vm = new Vue({
                    el: ‘#box‘,
                    data: {
                        a: 1
                    },
                    computed: {     //里面其实是属性,是函数的写法,但不是函数.可以写一些业务代码,return不能少
                        //b: function () {  //简写.默认调用的是get
                        //    //return 2;
                        //    return this.a + 2;
                        //}
                        b: {
                            get: function () {
                                return this.a + 6;
                            },
                            set: function (val) {
                                this.a = val;
                            }
                        }
                    }
                });
                document.onclick = function () {
                    //vm.a = 101;
                    vm.b = 1000;
                }
            }
        </script>

03-04  vue的简单方法

     <div id="box">
            {{a}}
        </div>

        <script>
            //vm.$mount(‘#box‘);   //手动挂载vue程序  等价于:el: ‘#box‘
            //vm.$el      //就是元素
            //vm.$data          //就是vue的data
            //vm.$options.aa();  调用自定义属性或函数
            //vm.$destroy       //销毁

            window.onload = function () {
                var vm = new Vue({
                    //el: ‘#box‘,
                    aa: function () {      //自定义属性
                        alert(111)
                    },
                    data: {
                        a: 1
                    }
                });

                vm.$mount(‘#box‘);      //手动挂载vue程序
                //console.log(vm.$el);
                vm.$el.style.background = ‘red‘;
                alert(vm.$data.a);
                vm.$options.aa();      //vm.$options.aa()  调用自定义属性
                vm.$log()     //查看现在数据状态
            }
        </script>

03-04  vue的循环索引:track_by="$index"

<div id="box">
            <ul>
                <li v-for="val in arr" track-by="$index">{{val}}</li>
            </ul>
            <input type="button" value="添加" @click="add()"/>
        </div>

        <script>
            //track-by="$index"     在有重复数据的,按索引循环

            window.onload = function () {
                var vm = new Vue({
                    data: {
                        arr:[‘apple‘,‘pear‘,‘orange‘]
                    },
                    methods: {
                        add: function () {
                            this.arr.push(‘tomato‘);
                        }
                    }
                }).$mount(‘#box‘);
            }
        </script>
时间: 2024-11-05 16:05:19

vue基础学习(三)的相关文章

Python入门基础学习 三

Python入门基础学习 三 数据类型 Python区分整型和浮点型依靠的是小数点,有小数点就是浮点型. e记法:e就是10的意思,是一种科学的计数法,15000=1.5e4 布尔类型是一种特殊的整形,true就相当于1,false相当于0,可以用来计算 类型转换 转换:整数:int();字符串:str();浮点数:float() 转换例子:(图9) 如果用内置函数当变量名,比如str=123,一旦被赋值,再使用这个函数会被报错. type()函数可以明确告诉我们变量类型. isinstance

Vue基础学习一

Vue基础一 1.0 前端开发规范 ? 前端开发规范 1.1 vue版本更迭 vue版本 ???-?vue?1.0???2014年 ???-?vue?2.0???2016年 ???-?vue?3.0[?试用版?]?2019年国庆 1.2匿名函数 javascript (function?(形参1,形参2)?{ /?你的代码?/ ?})(实参1,实参2) ???-?好处 ?????-?1.?防止全局作用域 ?????-?2.?防止命名冲突 ?????-?3.?防止一些脚本的攻击 ?????-?4.

Dango基础学习三

今天主要来学习一下Django的路由系统,视频中只学了一些皮毛,但是也做下总结,主要分为<静态路由>.<动态路由>.<二级路由> 一.先来看下静态路由 1.需要在project中的urls文件中做配置,然后将匹配到的urls转发到对应app的views的函数中 2.在对应的app的views中配置相应的函数 3.这个时候我们通过浏览器访问这个url,就可以得到如下的结果 ok.至此,静态路由我们就学习完了,下面我们开始学习动态路由 二.动态路由的学习,动态路由的学习主要

docker基础学习三

一.Dockerfile学习 由一系列的参数和命令构成的脚本.这些命令应用于基础镜像并最终创建一个新的镜像.基础镜像就是操作系统级别的镜像. 常用命令 FROM image_name:tag 定义了使用哪个基础镜像启动构建流程 MAINTAINER user_name 声明镜像的创建者 ENV key value 设置环境变量 (可以写多条) RUN command 是Dockerfile的核心部分(可以写多条) ADD source_dir/file dest_dir/file 将宿主机的文件

vue基础学习(一)

01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= function(){ var c = new Vue({ el:"#box",//选择器 data:{ 'msg':'welcome vue' } }); } </script> 01-02 v-model一般用于表单元素数据双向绑定 <div id="box&quo

salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式)

在salesforce的classic中,我们使用{!expresion}在前台页面展示信息,在lightning中,上一篇我们也提及了,如果展示attribute的值,可以使用{!v.expresion}展示信息. lightning在component中解析动态值的时候,会将{!} 这个里面的变量进行动态的解析以及展示.当然这个变量可以是基础类型,自定义类型,数组集合等等,当然如果表达式为空字符串或者是空格则不会解析.偶尔特殊的要求为需要输出'{!}'这个字符串,官方文档说可以使用<aura

JAVA多线程基础学习三:volatile关键字

Java的volatile关键字在JDK源码中经常出现,但是对它的认识只是停留在共享变量上,今天来谈谈volatile关键字. volatile,从字面上说是易变的.不稳定的,事实上,也确实如此,这个关键字的作用就是告诉编译器,只要是被此关键字修饰的变量都是易变的.不稳定的.那为什么是易变的呢?因为volatile所修饰的变量是直接存在于主内存中的,线程对变量的操作也是直接反映在主内存中,所以说其是易变的. 一.Java内存模型 Java内存模型规定所有的变量都是存在主存当中(类似于前面说的物理

shiro基础学习(三)&mdash;shiro授权

一.入门程序 1.授权流程        2.授权的三种方式 (1)编程式: 通过写if/else 授权代码块完成. Subject subject = SecurityUtils.getSubject(); if(subject.hasRole("admin")) {      //有权限 } else {      //无权限 } (2)注解式: 通过在执行的Java方法上放置相应的注解完成. @RequiresRoles("admin") public voi

JavaScript基础学习(三)&mdash;数组

一.数组简介     JavaScript数组的每一项都可以保存任何类型的数据,也就是说数组的第一个位置保存字符串,第二个位置可以保存数值,第三个位置可以保存对象,而且数组的大小是可以动态调整的,即可以随着数据的添加而自动增长以扩容纳新增数据.   二.数组的操作 1.创建 //创建一个空数组 var arr = []; var arr2 = [1,true,new Date()]; arr2.length = 2; alert(arr2); //true   2.pop和push方法