vue.js知识点回顾

最新推荐文章于 2024-07-22 08:55:10 发布

`秋刀鱼`

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量142

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/s8459/article/details/129349509

版权

vue.js基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="sxl">
        <p>{{ msg }}</p>
    </div>
    
    <!-- 导入vue.js -->
    <script src="./vue.js"></script>

    <script>
        // 实例化一个vue
        new Vue ({
           el:'#sxl', 
           data:{
            msg:'第一个'
           }
        })

    </script>
</body>
</html>

胡字语法基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="age">
    <p>{{ age }}</p>

    <p>{{ age + 10}}</p>
    </div>

    <script src="./vue.js"></script>

    <script>
       new Vue ({
        el:age,
        data:{
         age:20   
        }
       })

    </script>
</body>
</html>

v-text和v-html的使用：

<div v-text="msg"></div>

<div v-html="msg"></div>

v-on&medthods的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
        <button v-on:click="fn2">我是一个按钮</button>

    </div>

    <script src="./vue.js"></script>

  <Script>
    new Vue ({
        el:'.app',
    // vue中放方法的地方
    methods:{
        fn2(){

            alert('我是网页中弹出的内容')
        }
    }

    })

  </Script>
</body>
</html>

Vue.js 条件语句

条件判断

v-if

条件判断使用 v-if 指令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div id="app">
        <h2> 关于全省ikun人数 </h2>
        <div v-if="ikun >= 1000"> 广东省ikun人数 </div>
        <div v-else-if="ikun >= 4000 "> 江西省ikun人数 </div>
        <div v-else-if="ikun >= 2000 "> 以及南昌ikun人数 </div>
        <div v-else>全省唯一ikun</div>
    </div>

    <script src="./vue.js"></script>
    
    <script>
        new Vue ({
            el:'#app',
            data:{
                ikun:2000

            }
        })

    </script> -->
    
        <div id="app">
        <h3>期末成绩奖励相关安排</h3>
        <div v-if="score >= 600"> 全班一起去旅游 </div>
        <div v-else-if="score >= 550"> 全班一起看电影 </div>
        <div v-else-if="score >= 300"> 奖励作业真题一套 </div>
        <div v-else-if="score >=80">一起回家种田</div>
        <div v-else>叫家长明天来一趟办公室</div>
        </div>
        <script src="./vue.js"></script>

        <script>
        new Vue({
        el:'#app',
        data:{
            score: 450
            } 
        })
        </script>
         <!-- 得到结果：期末成绩奖励相关安排
              奖励作业真题一套 -->
        
</body>
</html>

v-if与v-for的区别：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-if="display"> 我是由v-if控制的 </div>
        <div v-show="display"> 我是由v-show控制的 </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                display:true  //我是由v-if控制的
                             // 我是由v-show控制的

                // display:false //布尔值 false：将会隐藏
            }
        })
    </script>
   
</body>
</html>

v-for遍历数组：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-if语法 -->
    <!-- <标签 v-for='item in 数组'></标签> -->
    <div id="app">
        <button @click="add">在尾部添加一个元素</button>
        <ul>
            <!-- 第一个参数是元素，第二个参数是下标，与名字无关 -->
            <!-- 大多时候只是为了拿到元素，可能用不到下标 -->
            <li v-for="(item,index) in list">{{index}}-{{item}}</li>
            <!-- item、index默认参数 -->
            <!-- <li v-for="item in list">{{index}}-{{item}}</li> -->

        </ul>

    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data:{
                list:['郭富城','刘德华','黎明','张学友']

            },
            methods:{
                add() {
                    this.list.push('浪少')

                }
            }

        })
    </script>
</body>
</html>

v-for遍历对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-for指令遍历对象 -->
    <!-- 语法：<标签 v-for="(val,key) in 对象"><标签/> -->
        <!--   <标签 v-for="val in 对象"><标签/> -->
    <div id="app">
        <ul>
            <!-- 对象有多少属性就会产生多少个标签 -->
            <li v-for="item in obj">{{ item }}</li>
            <!-- 第一个参数：属性值 第二个参数：属性名 -->
            <!-- 跟名字无关，也可以简写只拿属性值 -->
            <hr>
            <li v-for="(key,val) in obj">{{ key }}---{{ val }}</li>
        </ul>
    </div>

    <script src="./vue.js"></script>

    <script>
    new Vue({
        el:'#app',
        data:{
            obj:{
                age:19,
                name:'浪少',
                sex:'男',
                height:'175cm'
            }

        }
    })
    </script>
</body>
</html>

v-for遍历数字：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 遍历数字(指定次数的循环) -->
        <h2>以下是指定数列</h2>
        <ul>
            <!-- num是1到9 -->
            <li v-for="num in 9"> {{ num }} </li>
        </ul>

    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
    
        })

    </script>
</body>
</html>

v-for中key的作用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- splice三个参数 分别是:下标从哪里开始删除 删除的数量 要添加的参数  -->
        <button @click="list.splice(1,0,{id:4,name:'大黄'})">添加的元素</button>
        <ul>
            <li v-for="item in list" :key="item.index">
                <input type="checkbox">
                <span>{{ item.name }}</span>
            </li>
        </ul>
    </div>
        <!-- 问题：每当勾选了小白以后，然后在下标1的位置添加了大黄，结果发现勾了大黄，没有勾小白
        原因：v-for会尝试最大限度的复用当前元素，导致状态绑定错乱
        解决：在v-for后加上一个key属性，key绑定这个数据的唯一值(一般是id，不能是字符串和数字类型) -->
    <script src="./vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'小红'},
                    {id:2,name:'小白'},
                    {id:3,name:'小花'},
                ]

            }
        })

    </script>
</body>
</html>

JSON转换

01-json字符串和js字符串的关系：

<script>

// JSON与JS对象的关系

// JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串

// 这是一个对象

var obj = {a:"hello", b:"world"};

console.log(typeof(obj)); // object

// 这是一个JSON字符串，本质是一个字符串

var json = '{"a":"hello", "b":"world"}'

console.log(typeof(json)); // string

</script>

02-json与js对象互换

<script>

// JSON与JS对象互换：

// JSON.parse()方法实现从JSON字符串转换为JS对象

var obj = JSON.parse('{a:"hello",b:"world"}')

console.log(obj);

// JSON.stringify()方法实现从JS对象转换为JSON字符串

var json = JSON.stringify({a:"hello",b:"world"})

console.log(json);

</script>

存储数据

01-cookle:

一、使用场景

1、记住密码，下次自动登录

2、记录用户浏览数据,进行商品(广告)推荐

二特点:

1、cookie保存在浏览器端

2、单个cookle保存的数据不能超过4kb

3、cookie中的数据是以域名的形式进行区分的

4、cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除

5、cookie中的数据会随着请求被自动发送到服务器端

三、

由于cookie存储机制有很多缺点，HTML5不再使用它,转而使用改良后的WebStorage存储机制。(localStorage和sessionStorage)

02-localStorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.什么是localstorage
        // 在HTML5中,新加入了一个localstorage特性,这个特性主要用来作为本地存储来使用。 
        // 它解决了cookie存储空间不足的问题,每条cookie的存储空间为4K,localstorage一般为5M。

        // 2.localStorage的生命周期
        // LocalStorage生命周期是永久，这意味着除非用户在显示在浏览器提供的UI上清除localStorage信息,
        // 否则这些信息将永久存在。 

        // 3.localstorage的局限
        // a.在IE8以上的IE版本才支持localstorage这个属性。
        // b.目前所有的浏览器中都会被localStorage的值类型限定为string类型，
        //   对我们日常比较常见的JSON对象类型需要一个转换。

        // 4.判断浏览器是否支持localstorage这个属性 
        if(window.localstorage){
           alert('浏览器支持localStorage')
        }

        // 5.localstorage的写入
        if(!window.localStorage){
            alert('浏览器不支持localstorage')
        }else{
            var storage = window.localStorage;
            // 写入a字段
            storage['a'] = 1;
            // 写入b字段 
            storage.b =2;
            // 写入c字段
            storage.setItem('c',3)

            console.log(typeof storage['a']); //string 
            console.log(typeof storage['b']); //string 
            console.log(typeof storage['c']); //string
        }
    </script>
</body>
</html>

03-SessionStorage的生命周期

SessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了

那么所有通过Session存储的数据也就被清空

计算属性：

1、计算属性的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //计算属性：
        //可以在里面写一些计算逻辑的属性
        //他不像普通函数那样直接返回结果，而是经过一系列计算之后再返回结果
        //同时只要在它当中应用了data中的某个属性，当这个属性发生变化时，计算属性可以嗅探到这种变化，并自动执行
        //定义：要用的属性不存在，通过已有属性计算得来
        //使用：在computed,对象中定义计算属性，在页面中使用{方法名}来显示计算的结果

        // 基本结构
        new  Vue({
            el:'',

            // 数据
            data:{},

            // 方法属性：事件绑定，不用return，没有缓存
            methods:{},

            // 侦听器：侦听一个值的改变，不用返回值
            watch:{
                要侦听的数据(){}

            },

            // 计算属性(重视结果)
            // 必须有return，只求结果，有缓存
            computed:{
                计算属性名(){
                     // 经过一系列计算
                    return 处理操作后结果
                }
            }
            // 计算属性的缓存特性
            // 第一次调用计算机属性时，会产生一个结果，这个结果会被缓存起来，后面每次用到这个属性都是从缓存里取
            // 当它的依赖项发生改变，会重新计算得到一个结果，再缓存起来
        })
    </script>
</body>
</html>

2、计算属性的基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>原始字符串：{{ message }}</p>
        <p>计算反转后的字符串：{{ reverseMessage }}</p>
        <p>将原字符串转为小写：{{ toLowerCase }}</p>
    </div>

    <script src="../vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data:{
                message:'ABCDEFG'
            },
            computed:{
                // 计算反转后的字符串
                reverseMessage:function(){
                    // split()把一个字符串切割成字符串数组
                    // reverse()颠倒数组中元素的顺序
                    // join() 把数组中的所有元素转换为一个新的字符串
                    return this.message.split('').reverse().join('')
                },

                // 将原数组转换为小写
                toLowerCase(){
                    // substring(from,to)提取字符串中介于两个指定下标之间的字符 
                    //  toLowerCase()用于把字符串转换为小写
                    return this.message.substring(0,7).toLowerCase()
                }
               
            }

        })
                // 将原字符串第一个元素转换为小写
                var str = "SMALL String";
                str = str.replace(str[0],str[0].toLowerCase());
                console.log(str); 
// 颠倒再连接
    </script>
</body>
</html>

3、计算属性的完整结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
    1、每一个计算属性都包含一个getter函数与setter函数
    2、计算属性会默认使用getter函数，setter函数并不常见,所以一般计算属性getter和setter都不写
    3、getter函数是默认用法,setter函数不是默认用法。如果要使用setter函数,必须手动写出setter函数
    4、setter函数内的形参是你要修改的值 
    -->
    <div id="app">
        性：<input type="text" v-model="lastName"> <br><br/>
        名：<input type="text" v-model="firstName"> <br><br/>
        全名：<span> {{ fullName }} </span>
        <button @click="btn"> 修改计算属性的值 </button> <br><br/>
    </div>

    <script src="../vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data(){
                return {
                    lastName:'江户川',
                    firstName:'柯南'
                }
            },
            computed:{
                fullName:{
                    // get：获取值触发
                    // 当有人读取fullName时，且返回值就作为fullName的值
                    get(){
                        return this.lastName + '-' + this.firstName
                    },
                    // set：设置值时会触发
                    // 当计算属被修改时调用set
                    set(value){
                        console.log('set',value);
                    }
                }
            },
                methods:{
                    btn(){
                        this.fullName = '工藤新一';
                    }
            }
        })

    </script>
</body>
</html>

修饰符：

01-lazy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 事件修饰符.lazy(懒惰) 不会及时的将输入框的内容存放在data -->
        <input v-model.lazy="msg">
        <span>{{msg}}</span>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data:{
                msg:123
            }

        })
    </script>
</body>
</html>

02-number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 修饰符.number 把string字符串转换为number数字 -->
        <input type="number" v-model.number="age">
        <span>{{age}}</span>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data:{
                age:''
            },
            watch:{
                age(){
                    console.log(typeof(this.age));
                }
            }

        })
    </script>
</body>
</html>

03-trim

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- .trim 屏蔽空格 -->
        <input type="text" v-model.trim="msg">  
        <span>一个{{ msg.length }} 字符</span>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data:{
                msg:''
            }

        })
    </script>
</body>
</html>

`秋刀鱼`

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js知识点回顾

/ JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。// JSON.stringify()方法实现从JS对象转换为JSON字符串。// JSON.parse()方法实现从JSON字符串转换为JS对象。4、cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。3、cookie中的数据是以域名的形式进行区分的。-- V-show和v-if都可以用来控制标签的显示与隐藏。-- 遇到标签会解析 -->-- 遇到标签不解析，只当纯文本 -->
复制链接

扫一扫