vue笔记+渡一教育第一章整理

最新推荐文章于 2023-08-02 16:51:03 发布

weixin_韩

最新推荐文章于 2023-08-02 16:51:03 发布

阅读量993

点赞数 1

文章标签： js vue

本文链接：https://blog.csdn.net/weixin_45823347/article/details/106179915

版权

Vue组件切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <a href="" @click.prevent="regist">注册</a>
        <a href="" @click.prevent="regist">登录</a>
        <regist v-if="flag"></regist>
        <login v-else="flag"></login>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // if(条件===true){
                //语句
        // }else{
                //语句
        // }

        // v-if   v-else
        Vue.component('regist',{
            template:`
                <div>
                    <h1>我是注册页面</h1>
                </div>
            `
        })

        Vue.component('login',{
            template:`
                <div>
                    <h1>我是登录页面</h1>
                </div>
            `
        })


        new Vue({
            el:"#app",
            data:{
                flag:true
            },
            methods:{
                regist(){
                    this.flag=!this.flag;
                }
            }
        })
    </script>
</body>
</html>

v-for和v-show的区别

v-if条件渲染，如果初始渲染条件为真，就渲染，反之就不渲染。并且在渲染条件切换时，相对应的条件块内的事件监听器和子组件会适当的销毁和重建。
v-show不管初始条件是否为真，都会被渲染。只是通过修改css属性display来控制显示与隐藏。因此，平凡切换时用v-show，运行条件很少改变就用v-if。
注意：v-show不支持v-else和template元素。

css易忘点

		 padding:0 100px;上下内边距是0，左右100px
		 padding：100px 0;上下100，左右0
		 padding: 100px;有内边距所全是100px
		 padding:10,10,10,10;顺时针看上，右，下，左
		 
		 line-height: 40px;垂直居中
		 text-align: center;水平居中
		 margin：0 auto;居中
		 
		 text-decoration: none;去除a标签的下划线
		 text-decoration:underline;给a标签添加下划线
		 
		 a:link，定义正常链接的样式； 
		 a:visited，定义已访问过链接的样式； 
		 a:hover，定义鼠标悬浮在链接上时的样式； 
		 a:active，定义鼠标点击链接时的样式

vue实例的生命周期

钩子函数：

作用：钩子函数贯穿vue实例的整个过程，让用户给vue实例的不同阶段提供了添加代码的机会。

1、beforeCreate: 创建实例对象之前执行
2、 created 创建实例对象之后执行
3、beforeMount: 页面挂在成功之前
4、 mounted 页面挂在成功之后执行
5、beforeUpdate 组件更新之前执行
6、 update 组件更新之后执行
7、 beforeDestroy 实例销毁之前执行
8、destroyed 实例销毁完毕执行

//实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{msg}}
        <button @click="chg">更新</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
     var vm= new Vue({
            el:"#app",
            data:{
                msg:"zhangsan"
            },
            methods:{
                chg(){
                    this.$data.msg="lisi"
                }
            },
            beforeCreate(){
                alert('实例创建之前执行');
                //报错：数据还没有被监听到
                // alert(this.$data.msg);
            },
            created(){
                alert('实例创建之后执行');
                alert(this.$data.msg);
            },
            beforeMount(){
                alert('页面挂载之前执行');
            },
            mounted(){
                alert('页面挂在之后执行')
            },
            //更新
            beforeUpdate(){
                alert('更新执行要执行的')
            },
            updated(){
               alert('跟新之后要执行的')
            },
            beforeDestroy(){
                console.log('实例销毁之前');
                console.log(this.$data.msg);
                console.log(vm)
            },
            destroyed(){
                console.log('实例销毁之后');
                console.log(this.$data.msg);
                console.log(vm)
            }
            //vm在销毁之前和销毁之后都存在，但是销毁之后就获取不到页面中的div元素
            //实例销毁之后就无法操作dom
        })
    </script>
</body>
</html>

渡一笔记

javascript

编译语言 c c++
优点：快
不足：移植性不好（不跨平台）
是单线程

变量命名规则

1.必须以字母、下划线、$符号开始；
2.标识符只能包含下划线和$符号2种特殊字符,也可以是汉字,韩文等.
3.标识符不能包含空格.
4.标识符不能是关键字.

JavaScript特性

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

算数运算符用于对数字执行算数运算：
JavaScript 算数运算符
+  加法
-  减法
*  乘法
/  除法
%  系数
++ 递加
-- 递减

JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值。
运算符

x = y
x = y
x += y
x = x + y
x -= y
x = x - y
x *= y
x = x * y
x /= y
x = x / y
x %= y
x = x % y

JavaScript 一共提供了8个比较运算符。

大于运算符
< 小于运算符
<= 小于或等于运算符
= 大于或等于运算符
== 相等运算符
=== 严格相等运算符
!= 不相等运算符
!== 严格不相等运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js运算符</title>
</head>
<body> 
</body>
</html>
<script>
  console.log (2 + 2); // 加法，输出4
  console.log (2 - 2); // 减法，输出0
  console.log (2 * 2); // 乘法，输出4
  console.log (2 / 2); // 除法，输出1
  console.log (2 % 2); // 取模，输出0，结果是余数
  // 比较运算符
  console.log(1 == 2); // 等于，返回false
  console.log(2 === 1); // 严格绝对等于，数据类型也相同，返回false
  console.log(1 != 2); // 不等于，返回 true
  console.log(2 !== 1); //绝对严格不等于，数据类型也不相同，返回false
  console.log(2 < 1); // 小于，返回 false
  console.log(2 > 1); // 大于，返回 true
  console.log(2 >= 1); // 大于等于，返回 true
  console.log(1 <= 2); // 小于等于，返回  true
</script>