Vue学习

最新推荐文章于 2024-05-29 17:10:32 发布
最新推荐文章于 2024-05-29 17:10:32 发布
阅读量106 收藏 2
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43888133/article/details/111476623
版权

文章目录

一、基础

1、v-text、v-html

<!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}}
         {{1+1+1}} 
         {{link}}
         <!-- 使用{{}}括号的方法需要加上() -->
         {{hello()}} 
    </div>
    <!-- 花括号：只能写在标签体力(<>这里</>) -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "<h1>Hello</h1>",
                link: "https://www.baidu.com"
            },
            methods: {
                hello(){
                    return "World";
                }
            },
        })
    </script>   
</body>
</html>

2、v-bind

<!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 v-bind:href = link>这是百度</a>
    <!-- class,style  {class名：加上？}-->
    <span v-bind:class = "{active:isActive,'text-danger':hasError}"
     :style="{color:color,fontSize: size}">你好</span>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                link: "http://www.baidu.com",
                isActive: false,
                hasError: false,
                color: "red",
                size: "100px"
            }
        })
    </script>

</body>
</html>

3、v-model

<!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">
        精通的语言：
            <input type="checkbox" v-model="language" value="Java">java<br/>
            <input type="checkbox" v-model="language" value="C++">C++<br/>
            <input type="checkbox" v-model="language" value="JS">JS<br/>
        选中了：{{language.join(",")}}  
        <!-- 选中的是框中间的值，不是value值 -->
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                language: []
            }
        })
    </script>
</body>

</html>

4、v-on

<!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">
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancle">取消</button>

        <h1>有{{num}}个赞</h1>

        
        <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello"><!--只能点击一次 -->
            大div
            <!-- 防止冒泡点击 -->
            <div style="border: 1px solid blue;padding: 20px;" v-on:click.stop="hello">小div</div>
        </div>

        <input type="text" v-model="num" v-on:keyup.up = "num+=2" @keyup.down="num-=2" v-on:click.ctrl="num=100">
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                cancle() {
                    this.num--;
                },
                hello() {
                    alert("点击了");
                }
            },

        })
    </script>
</body>

</html>

5、v-for

<!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">
        <ul>
            <li v-for ="(user,index) in users" :kep="user.name" v-if="user.gender == '女'">
                当前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} ==> {{user}}<br>
                <!-- 对象信息：
                <span v-for = "(v,k,i) in user">
                    {{k}} ==> {{v}} ==> {{i}}
                </span> -->
            </li>
        </ul>
    </div>


    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }],
                nums: [1,2,3,4,4]
            }
        })

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

6、v-if和v-show

<!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>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <div id="app">
        <!-- 
        v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
        v-show，当得到结果为true时，所在的元素才会被显示。 
        -->
        <button v-on:click="show = !show">点我呀</button>
        <!-- v-if是直接隐藏代码 -->
        <h1 v-if="show">if看到我了</h1>
        <!-- v-show 是在表签里面加上了style="display: none;" -->
        <h1 v-show="show">show看到我了</h1>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>
</body>

</html>

7、v-else和v-else-if

<!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>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <div id="app">
    <button v-on:click="random=Math.random()">点我呀</button>
    <span>{{random}}</span>

    <h1 v-if="random>=0.75">
        看到我啦？！ &gt;= 0.75
    </h1>

    <h1 v-else-if="random>=0.5">
        看到我啦？！ &gt;= 0.5
    </h1>

    <h1 v-else-if="random>=0.2">
        看到我啦？！ &gt;= 0.2
    </h1>

    <h1 v-else>
        看到我啦？！ &lt; 0.2
    </h1>
</div>
    <script>         
        let app = new Vue({
            el: "#app",
            data: { random: 1 }
        })     
    </script>
</body>
</html>

二、基础小进阶

1、计算属性和侦听器

<!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>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <div id="app">
        <li>西游记； 价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>
        <li>水浒传； 价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"> </li>
        <li>总价：{{totalPrice}}</li>
        {{msg}}
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice() {
                    return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum
                }
            },
            watch: {
                xyjNum(newVal, oldVal) {
                    if (newVal >= 3) {
                        this.msg = "库存超出限制";
                        this.xyjNum = 3;
                    } else {
                        this.msg = "";
                    }
                }
            }
        })
    </script>
</body>

</html>

2、过滤器

<!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">
        <ul>
            <li v-for = "user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
                {{user.gender | gFilter}} ==> {{user.gender | genderFilter}}
            </li>
        </ul>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //filter全局过滤器
        Vue.filter("gFilter", function (val) {
            if (val == 1) {
                return "男~~~";
            } else {
                return "女~~~";
            }
        })

        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            filters: {
                //filters 定义局部过滤器，只可以在当前vue实例中使用
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })
    </script>
</body>

</html>

3、组件化

<!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">
        <button v-on:click="count++">我被点击了 {{count}} 次</button>

        <counter></counter>
        <button-counter></button-counter>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        //1、全局声明一个组件
        Vue.component("counter", {
            template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        });

        //2、局部声明一个组件
        const buttonCounter = {
            template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
            data() {
                return {
                    count: 1
                }
            }
        };
        new Vue({
            el: "#app",
            data: {
                count: 1
            },
            components: {
                'button-counter': buttonCounter
            }
        })
    </script>
</body>

</html>

4、生命周期钩子函数

 <!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">
        <span id="num">{{num}}</span>
        <button @click="num++">赞！</button>
        <h2>{{name}}，有{{num}}个人点赞</h2>
    </div>

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

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "张三",
                num: 100
            },
            methods: {
                show() {
                    return this.name;
                },
                add() {
                    this.num++;
                }
            },
            beforeCreate() {
                console.log("=========beforeCreate=============");
                console.log("数据模型未加载：" + this.name, this.num);
                console.log("方法未加载：" + this.show());
                console.log("html模板未加载：" + document.getElementById("num"));
            },
            created: function () {
                console.log("=========created=============");
                console.log("数据模型已加载：" + this.name, this.num);
                console.log("方法已加载：" + this.show());
                console.log("html模板已加载：" + document.getElementById("num"));
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            beforeMount() {
                console.log("=========beforeMount=============");
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            mounted() {
                console.log("=========mounted=============");
                console.log("html模板已渲染：" + document.getElementById("num").innerText);
            },
            beforeUpdate() {
                console.log("=========beforeUpdate=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板未更新：" + document.getElementById("num").innerText);
            },
            updated() {
                console.log("=========updated=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板已更新：" + document.getElementById("num").innerText);
            }
        });
    </script>
</body>

</html>
weixin_43888133
关注
Vue学习笔记(简易)
Stay Hungry, Stay Foolish!
08-04 146
安装vue # 最新稳定版 $ npm install vue 1、vue声明式渲染 let vm = new Vue({ el: "#app",//绑定元素 data: { //封装数据 name: "张三", num: 1 }, methods:{ //封装方法 cancle(){
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue语法
stay_少年的博客
05-21 204
vue模板语法 1.插值 1.直接使用{{}} 将数据解释为普通文本，而非html代码 解决刷新或文档过长出现{{}}问题 解决方法1可以用v-text 解决方法2 使用 v-cloak指令 <div v-cloak>{{msg}}</div> <style> [v-cloak]{ display: none; } </style> v-html 会将元素当成HTML标签解析后输出 标签中
Vue学习心得
weixin_49331914的博客
07-08 4367
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点; mvvm ●Model:模型层，在这里表示JavaScript对象 ●View:视图层,在这里表示DOM (HTML操作的元素) ●ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者 在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通
20 VUE学习：插件
百锦再的博客
05-29 9万+
插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。/* 可选的选项 */})一个插件可以是一个拥有install()方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的[应用实例]和传递给app.use()// 配置此应用通过 []和 []注册一到多个全局组件或自定义指令。通过 []使一个资源[可被注入]进整个应用。向 []中添加一些全局实例属性或方法一个可能上述三种都包含了的功能库 (例如 [vue-router])。
Vue学习心得与总结
2201_75464762的博客
12-28 2421
大二开课，跟老师学+自学，一开始看老师分享的培训课程深入学习，虽然知道学习内容且有计划，但总是学着学着就学不下去（课程冗长没有成就感，知识理论不太好接受，学的蛮难过的），最后，三天打鱼两天晒网。我认识到Vue不仅仅是一种框架，更是一种优秀的工具和理念，在我未来的开发中，我会继续深入学习和实践Vue.js，不断提升自己的能力。通过实际的开发经验，我学会了如何将Vue.js应用于真实的项目中，如何与后端API进行交互，获取和更新数据，以及如何处理用户输入和交互反馈，这些都是学习课程中不能替代的经验。
19 VUE学习：自定义指令
百锦再的博客
05-28 9万+
除了 Vue 内置的一系列指令 (比如v-model或v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。我们已经介绍了两种在 Vue 中重用代码的方式：[组件]和。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑。另一方面，自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。
Vue学习总结
魅控
08-07 5934
Vue 基础 指令： 插值表达式： 语法：{{要插入的值}}，此时相当于占位符，到时候{{关键字}}会被替换成 Model中的数据 bug点： 当网速较慢时，Vue初始化未完成时，插值表达式不能被解析，会直接显示 出来，加载完毕之后又会被替换成真实结果，造成闪烁（Vue的加载代码写在 HTML元素之后时会出现该bug） 1.v-cloak指令： 语法：把它当作HTML元素的一个属性使用 示例： {...
十天学完Vue学习总结
H215919719的博客
11-14 9422
内容比较概念，了解，看过即可。当然不是只有看看和跟着敲这么简单，要做1~2个项目加以理解我做的第一个项目是：音乐网站（不需要后台技术，发送请求就可以获得数据）适合新手小白练手第二个项目是一个点餐系统：前后端进行交互，适合想往全栈发展的小白去做最后祝大家学好吃好喝好！我的vue学习专辑就结束啦！
Vue 学习
HammerTien的博客
02-11 1642
Vue TodoList 项目 Vue初识之 TodoList Part1 Vue初识之 TodoList Part2 Vue初识之 TodoList Part3
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且响应式的用户界面。Vue的特点在于其渐进式架构，允许开发者逐步将Vue融入现有的项目中，而不必...
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
FEProjectDemos:Vue学习中使用的demo
05-19
Vue学习系列（7/7） Vue源码学习系列（8/15） ElementUI源码学习系列（4/8） mint ui源码学习系列 Vuex 源码学习系列 vue-router 源码学习系列 weex 源码探究 Vue 相关技术栈用法和源码学习系列 …… Plan 今年目标...
vue学习资料.rar
10-22
这份"vue学习资料.rar"压缩包显然包含了帮助学习Vue.js的各种资源。 1. **数据绑定**：Vue.js 的核心概念之一是双向数据绑定，这使得视图与模型之间的数据变化可以实时同步。通过`v-model`指令，我们可以轻松地在...
VTOL-7-Nano-3D-Print
09-17
VTOL-7-Nano-3D-Print for T1 Ranger
c1900-universalk9-mz.SPA.153-1.T.bin
最新发布
09-17
c1900-universalk9-mz.SPA.153-1.T.bin
常用命令_linux.zip
09-17
常用命令_linux
卡瓦牙椅E70E80-Vsion中文使用说明书第三部分.pdf
09-17
卡瓦牙椅E70E80-Vsion中文使用说明书第三部分.pdf
linux命令、脚本、基础知识学习_Linux-study.zip
09-17
linux命令、脚本、基础知识学习_Linux-study
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值