vue知识点

已于 2023-03-05 19:42:51 修改
阅读量82 收藏
点赞数
文章标签： vue.js javascript 前端
于 2023-03-05 19:12:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68470780/article/details/129349522
版权

vue的基本使用

<!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>
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
    <!-- <div id="vu">
        {{ msg }}
    </div> -->
    <!-- 导入 -->
    <!-- 准备一个容器 -->
    <div class="root">
        <h1>hello,{{name}},{{address}}</h1>
    </div>
    <!-- 一一对应 -->
    <div class="root2">
        <h1>hello,{{name}},{{address}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //组织Vue在生产中提示

        // 创建vue实例
        new Vue({
            el:'.root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{//data中用于数据存放，数据供el指定的容器使用，值暂时写成对象
                name:'Yang',
                address:'南昌'
            }
        })
        new Vue({
            el:'.root2', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{//data中用于数据存放，数据供el指定的容器使用，值暂时写成对象
                name:'Yang',
                address:'广州'
            }
        })
    </script>
    <!-- <script>
        new Vue ({
            el:'#vu',
            data:{
                msg:'123'
            }
        }) -->
    </script>
</body>
</html>

vue差值语法

<!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="la">
        <p>{{ la }}</p>
        <p>{{ la+5555 }}</p>
        <p>{{ la>=6666 }}</p>
    </div>
    <script src="./vue.js"></script>
    
    <script>
        new Vue({
            el:'.la',   
            data:{
                la:6666
            }
        })
    </script>
</body>
</html>

v-text和v-html

 <!-- 遇到标签不解析，只当纯文本 -->
        <div v-text="msg"></div>
        <!-- 遇到标签会解析 -->
        <div v-html="msg"></div>

vue生命周期

<!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 src="./vue.js"></script>
    <div id="smzq">
        {{smzqh}}
    </div>
    <script>
        var rot = new Vue({
            el:'#smzq',
            data:{
                smzqh:'12345'
            },
            beforeCreate(){
                console.log('befaaaaaaaa');//创建
            },
            created(){
                console.log('created');//初始化
            },
            beforeMount(){
                console.log('beforeMount');//编译
            },
            mounted(){
                console.log('mounted');//挂载dom
            },
            beforeUpdate(){
                console.log('beforeUpdate');//渲染
            },  
            updated(){
                console.log('updated');//更新
                //组件更新后调用$destroyed函数，进行销毁  this.$destroy();
            },
            beforeDestroy(){
                console.log('beforeDestroy');//删除前
            },
            destroyed(){
                console.log('destroyed');//删除后
            }
        })
    </script>
</body>
</html>

v-bind

<!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-bind 让行内属性不写死 -->
    <div id="app">
        <a href="http://mi.com">跳</a>
        <a v-bind:href="url">跳转</a>
        <button @click="change" target="_blank">跳转</button>
    </div>
    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                url:'http://baidu.com'
            },
            methods:{
                change(){
                    this.url='http://taobao.com'}
            }
        })
    </script>
</body>
</html>

v-on事件绑定

<!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">
        <!-- 方法 以内联方式响应事件 -->
        <!-- <button v-on:click = "length++">改变边长</button> -->

        <!-- 绑定方法处理事件 -->
        <button v-on:click = "changeLength">改变边长</button>
        <p>正方形的边长是{{ length }},面积是{{ area }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                length:2
            },
            // 计算属性 必须有return 求结果 有缓存
            // computed:{
            //     计算属性名(){
            //         // 计算 
            //         // return 处理操作后结果
            //     }
            // }
            computed:{
                area(){
                    return this.length*this.length
                }
            },
            methods:{
                changeLength(){
                    this.length++
                }
            }
        })
    </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">
        <button @click="list.splice(1,0,{id:4,name:'赵六'})">
            添加
        </button>
        <ul v-for="item in list" :key="item.id">
            <input type="checkbox">
            <span>{{item.name}}</span>
        </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>

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">
        <ul>
            <!-- 对象有多少属性就会有多少标签 -->
            <li v-for="item in obj">{{item}}</li>
            <!-- 第一个参数是属性值，第二个是属性名 跟名字无关 也可以简写只拿属性 -->
            <li v-for="(val,key) in obj">{{ val }}---{{ key }}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                obj:{
                    name:'jb',
                    age:10,
                    sex:'男'
                }
            }
        })
    </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-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">
        <h3>吃什么</h3>
        <div v-if="money >= 1000">吃自助</div>
        <div v-else-if="money >= 500">吃火锅</div>
        <div v-else-if="money >= 300">吃手抓饼</div>
        <div v-else-if="money >= 0">洗洗睡吧</div>

        <!-- 双分支 -->
        <div v-if="age >= 18">可以看片了</div>
        <div v-else>偷看</div>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                money:5,
                age:18
            }
        })
    </script>
</body>
</html>

v-if与v-show的区别
 本质就是标签display设置为none ，控制隐藏，只是基于CSS进行切换

    v-show有更高的初始渲染销耗

    v-show适合频繁切换的情况

    v-if

   动态的向DOM树内添加或者删除DOM元素

   v-if有更高的切换消耗

   v-if适合运行条件很少改变的情况
 

JSON对象

<!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>
        // JSON和js对象的关系
        // JSON是js对象的字符串表示法 它使用文本表示一个js对象的的信息 本质是一个字符串
        // 这是一个对象
        var obj = {a:"hello",b:"world"}
        console.log(typeof(obj));//object

        // json.stringify()方法 实现从js对象转换为json字符串        // 这是一个json字符串 本质是一个字符串
        var json = JSON.stringify({a:"hello",b:"world"})
        console.log(json);//{"a":"hello","b":"world"}
        // var json ='{a:"hello",b:"world"}'
        // console.log(typeof(json));//string
    </script>
</body>
</html>

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>
        // localStorage
        // 在html5中 新加入了一个localstorage特性， 这个特性主要用来作为本地存储来使用
        // 它解决了cookie存储空间不足的问题 每条cookie的存储空间为4k localstorage一般为5m
        // localstorage生命周期
        // localstorage的生命周期是永久 这意味着除非用户在显示浏览器提供的ui上清除localstorage信息，否则这些信息永久存在
        // local的局限
        // 在ie8以上的ie版本才支持localstorage这个属性
        // 目前所有的浏览器中都会被localstorage的值类型限定为string类型, 对我们日常比较常见的json对象类型需要一个转换
        // 判断浏览器是否支持localstorage这个属性
        // (window.localStorage){
        //     alert('支持localstorage')
        // }
        
        // 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']);
            console.log(typeof storage['b']);
            console.log(typeof storage['c']);
        }
    </script>
</body>
</html>

vue计算属性

<!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">
        姓：<input type="text" v-model = "lastName"> <br>
        名：<input type="text" v-model = "firstName"> <br>
        全名: <span>{{fullName}}</span> <br>
        <button @click="btn">修改计算属性值</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 每一个计算属性都包含一个getter函数与setter函数
        // 计算属性会默认使用getter函数 setter函数并不常见 所以一般计算属性getter和setter都不写
        // getter函数是默认用法 setter函数不是默认用法 如果要使用setter函数 必须手动写出setter函数
        new Vue({
            el:'#app',
            data(){
                return {
                    firstName:'鲲鲲',
                    lastName:'cai'
                }
            },
            computed:{
                fullName:{
                    // get:获取值时触发
                    // 当有人读取fullName时 get就会被调用 返回值就作为fullName的值
                    get(){
                        return this.lastName+''+this.firstName;
                    },
                    set(value){
                        console.log('set',value);
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            },
            methods:{
                btn(){
                    this.fullName = '菜-大王'
                }
            }
        })
    </script>
</body>
</html>

vue事件冒泡

<!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" @click = "divClick">
        <ul @click = "ulClick">
            <!-- 事件修饰符 -->
            <!-- .stop阻止事件冒泡 -->
            <li @click = "liClick">123</li>
            <li>1234</li>
            <li>12345</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            methods:{
                divClick(){
                    console.log('div');
                },
                ulClick(){
                    console.log('ul');
                },
                liClick(){
                    console.log('li');
                    // 阻止事件冒泡
                    // evt.stopPropagation()
                }
            }
        })
    </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>
    <!-- .stop 阻止事件冒泡 -->
    <a v-on:click.stop = "doThis"></a>
    <!-- .self 当前事件目标是当前元素自身事 触发事件 -->
    <ul @clicl.self = "ulClick"></ul>
    <!-- .capture 将原本默认的冒泡方式改为捕捉方式 -->

    <!-- .prevent 阻止默认事件行为-->

    <!-- @submit.prevent 提交事件不再重载页面 -->
    <form v-on:sumbit.prevent = "onSubmit"></form>
    <!-- .stop.prevent 修饰符可以串联，既阻止冒泡又阻止默认行为 -->
    <a v-on:click.stop.prevent = "doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
</body>
</html>

Draconis.
关注
vue知识
qq_43751465的博客
06-20 334
慕课网视频地址 vue-cli学习 Chrome插件vue.js devtools的安装 Vue两大核心思想：组件化和数据驱动 1、vue.js安装 2、创建第一个vue实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
Vue知识点汇总
编程界明世隐的博客
04-09 1898
一、MVVM的理解 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View...
Vue知识点总结
xfhgxhhhg的博客
08-02 6783
vue的知识框架。
VUE知识点总结
Zhang_hao_r的博客
02-03 7553
Vue：一种用于构建用户界面的渐进式JavaScript框架 Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件 特定：1、采用组件化模式，提高代码复用率，且让代码更好维护 2、声明式编码，让编码人员无需直接操作DOM，提高开发效率 ...
vue知识点汇集 总结 回顾
10-27
下面将根据标题和描述，结合压缩包内的文件名称，对Vue的知识点进行详细梳理。 1. **基础概念** - **虚拟DOM**：Vue使用虚拟DOM作为数据和实际DOM之间的中间层，以提高性能和效率。 - **组件化**：Vue中的组件是...
Vue知识点串讲.md
07-10
Vue知识点串讲.md
vue知识点总结.md
03-01
vue知识点总结.md
vue 知识点.docx
01-05
Vue.js 知识点概述 在本文中，我们将对 Vue.js 进行详细的介绍，包括其定义、特性、优点、安装环境、项目搭建、Webpack 配置等方面的知识点。 什么是 Vue.js Vue.js 是一套构建用户界面的渐进式框架。与其他重量...
Vue知识点以及面试题
11-24
Vue知识点以及面试题
vue知识点思维导图.png
02-04
vue知识点
vue知识点.pdf
01-16
Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。Vue的核心特性包括组件化、响应式数据绑定、虚拟DOM、指令系统以及生命周期等，这些使得Vue在构建复杂单页应用(SPA)时...
vue知识点概括总结题库.zip
07-07
这个“Vue知识点概括总结题库.zip”文件包含了对Vue.js核心概念和关键功能的详细梳理，适合正在学习或准备面试的开发者参考。 题库文档“题库.doc”可能涵盖了以下几个Vue.js的重要知识点： 1. **基础概念**：Vue...
VUE知识点脑图.xmind
04-06
超级用心的总结了Vue学习、面试、使用中的知识点。包含Vue框架的知识点，非常详细，可编辑；另含有面试必问的问题。
vue知识点_vue_ask6op_
10-02
在"vue知识点_vue_ask6op_"这个压缩包中，可能包含了一个Xmind文件，这是一种思维导图格式，用于整理和展示Vue.js的相关知识点。下面我们将详细探讨Vue.js的一些核心概念和特性。 1. **响应式系统**：Vue.js的核心...
总结得vue知识点文档
08-23
总结得vue知识点文档
Vue知识点.note
11-24
Vue知识点.note
vue知识点.md
08-11
vue知识点.md
Vue面试题及Vue知识点整理
10-17
在面试中，Vue的知识点通常包括其基本概念、核心特性以及如何在实际项目中应用。以下是对Vue面试题及知识点的详细解析： 1. **MVVM 模式理解**： MVVM 是 Model-View-ViewModel 的缩写。Model存储数据和业务逻辑，...
vue知识点pdf分享
最新发布
10-25
综上所述，一个完整的Vue知识点的PDF分享应当包括Vue的基本概念、响应式数据绑定、组件化开发模式、路由管理、状态管理和动画效果等方面的内容。通过学习这些知识点，开发者可以更好地掌握Vue的使用方法，提高前端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值