5.17笔记

vue组件

<body>
    <div id="app">
        <a href="" @click.prevent="botton">注册</a>
        <a href="" @click.prevent="botton">登录</a>
        <ssn v-if="msg"></ssn>
        <ssnn v-else="msg"></login>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        Vue.component('ssn',{
            template:`
                <h1>注册页面</h1>
                `
        })
        Vue.component('ssnn',{
            template:`
                <h1>登录页面</h1>
                `
        })
        new Vue({
            el:"#app",
            data:{
                msg:true
            },
            methods:{
                botton(){
                    this.flag=!this.flag;
                }
            }
        })
    </script>

vue生命周期

钩子函数
作用：钩子函数贯穿vue实例的整个过程，让用户给vue实例的不同阶段提供了添加代码的机会。
1、beforeCreate: 创建实例对象之前执行
2、 created 创建实例对象之后执行
3、beforeMount: 页面挂在成功之前
4、 mounted 页面挂在成功之后执行
5、beforeUpdate 组件更新之前执行
6、 update 组件更新之后执行
7、 beforeDestroy 实例销毁之前执行
8、destroyed 实例销毁完毕执行

vue官网图例

<body>
    <div id="app">
        {{ssn}}
        <button @click="ssn">点击</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
     var vm= new Vue({
            el:"#app",
            data:{
                ssn:"zhangsan"
            },
            methods:{
                chg(){
                    this.$data.msg="lisi"
                }
            },
            beforeCreate(){
                alert('实例创建之前执行');
                console.log('实例创建之前执行');
            },
            created(){
                alert('实例创建之后执行');
                console.log('实例创建之后执行');
                console.log(this.$data.msg);
            },
            beforeMount(){
                alert('页面挂载之前执行');
                console.log('页面挂载之前执行');
            },
            mounted(){
                alert('页面挂在之后执行')
                console.log('页面挂在之后执行')
            },
            beforeUpdate(){
                alert('更新执行要执行的')
                console.log('更新执行要执行的')
            },
            updated(){
                alert('跟新之后要执行的')
                console.log('跟新之后要执行的')
            },
            beforeDestroy(){
                console.log('实例销毁之前');
                console.log(this.$data.msg);
                console.log(vm)
            },
            destroyed(){
                console.log('实例销毁之后');
                console.log(this.$data.msg);
                console.log(vm)
            }
        })
    </script>
</body>

*

JavaScript特性

1、解释性脚本语言
2、基于对象
3、动态性
4、js引擎单线程：分片交错执行（轮转时间片）
5、js组成部分：ECMAScript、DOM、BOM
由ECMA国际制定了JavaScript标准，称为ECMAScript。

JavaScript 算数运算符
算数运算符用于对数字执行算数运算：
JavaScript 赋值运算符
赋值运算符向 JavaScript 变量赋值。
JavaScript 比较运算符


JavaScript 逻辑运算符