vue学习笔记01：vue指令

最新推荐文章于 2024-04-26 17:54:13 发布
最新推荐文章于 2024-04-26 17:54:13 发布
阅读量331 收藏 8
点赞数 8
文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bohuang123/article/details/135583110
版权

1. Vue简介

前端主要有三大框架，Angular、Vue和React。Vue主要分为Vue2和Vue3两个大版本，生态系统完善，最新的长期稳定版本2.7.14，Vue3相比性能、APi支持更加完善。

Vue是一个用来构建用户界面的渐进式框架。
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Vue使用步骤:

1. 准备容器
2. 引包(官网)-离线/在线-开发/生产版本
3. 创建vue实例 new Vue()
4. 指定配置项el、data =>渲染数据
    a. el指定挂载点,选择器指定要控制的哪个盒子
    b. data提供数据

<!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>
    <!--1. 准备容器，一会儿vue就会把数据展示到这里-->
    <div id="app">
        <p>姓名: {{ uname.toUpperCase() }} </p>
        <p>年龄: {{ age >= 18 ? "成年人": "未成年" }} </p>
        <p>朋友的姓名: {{ friend.name }}</p>
    </div>
    <!-- 导入vue.js-->
    <script src="./vue.js"></script>
    <script>
        // 3. 创建vue实例对象
        new Vue({
            el: '#app', // 把数据展示到哪里
            data: {
                // 放需要展示的数据
                uname: 'laotang',
                age: 30,
                friend: {
                    sex: '男',
                    name: "齐齐"
                }
            }
        })
    </script>
</body>
</html>

  • 插值表达式 {{ }}
    插值表达式是一种Vue的模板语法，利用表达式进行插值，渲染到页面中。用法:{{ 表达式 }}。
    表达式可以是一个方法,data中的数据或其他可以计算出结果的任意表达式。
    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 响应式
    响应式可以理解为数据改变，视图自动更新。使用Vue开发，只需关注业务核心逻辑即可。

国内安装chrome： https://www.google.cn/chrome/

2. Vue指令

Vue会根据不同的指令，指针标签实现不同的功能。内置指令一般都是带有v-前缀的特殊标签属性，不同属性对应不同的功能。

  • v-html指令
    v-html="表达式"–>动态设置元素innerHTML,该命令可以动态解析标签。
<!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">
        <p>{{ str }}</p>
        <p v-html="str">这里的内容将会被覆盖</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                str: "你是一个<strong>优秀</strong>的boy"
            }
        })
    </script>
</body>
</html>
  • v-show和v-if指令
    二者都可以控制元素显示隐藏。但二者也有一些区别，v-show="表达式"表达式为true显示，false隐藏，它的原理是切换display:none控制隐藏。v-if="表达式"，表达式值true表示显示，false表示隐藏，它的原理是基于条件判断，是否创建或移除元素节点。
<!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">
        <div class="box1" v-show="flag">我是一个v-show控制的盒子</div>
        <div class="box2" v-if="flag">我是要给v-if控制的盒子</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                flag: true
            }
        })
    </script>
</body>
</html>

除上述说的，v-if还可以和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>
    <div id="app">
        <p v-if="sex===1">性别: 男</p>
        <p v-else>性别: 女</p>
        <br>
        <p v-if="score>=90">成绩A: 奖励外星人X17 R2一台</p>
        <p v-else-if="score >=80 && score < 90">成绩B: 小米14pro一台</p>
        <p v-else-if="score >=60 && score < 80">成绩C: 零食礼包一袋</p>
        <p v-else>成绩D: 操场10圈</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                sex:1,
                score: 65
            }
        })
        
    </script>
</body>
</html>
  • v-on指令
    v-on指令用来注册事件(注册事件=添加监听+提供逻辑处理)。
    语法:
    第一种:v-on:事件名="内联语句"；
    第二种:v-on:事件名="method中函数名"。
    其中，v-on可以简写为@事件名

demo1 内联写法:

<!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--">-</button>
        <span>{{count}}</span>
        <button @click="count++">+</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                count: 100
            }
        })
    </script>
</body>
</html>

demo2 使用函数:

<!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 @click="fn">切换显示隐藏</button>
        <h1 v-show="flag">hello vue</h1>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                flag: true
            },
            methods: {
                fn() {
                    // 改变flag=flag取反的值
                    // this 永远表示Vue的实例
                    this.flag = !this.flag

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

demo 给函数传参:

<!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">
        <div class="box">
            <h3>小黑自动售货机</h3>
            <button @click="fn(5)">可乐5元</button>
            <button @click="fn(10)">咖啡10元</button>
            <button @click="fn(8)">牛奶8元</button>
        </div>
        <p>银行卡余额: {{ money }} 元</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                money: 100
            },
            methods: {
                fn(n) {
                    this.money = this.money - n
                }
            }
        })
    </script>
</body>
</html>

demo3 事件对象:

<!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">
        <h2>需求: 输入框输入内容,将内容显示到p标签中</h2>
        <input type="text" @input="fn(100, 200, $event)">
        <p>{{ result }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                result: ""
            },
            methods: {
                fn(a, b, e) {
                    this.result = e.target.value
                }
            }
        })
    </script>
</body>
</html>
  • v-bind指令
    v-bind指令可以动态的设置html的标签属性，比如src、url、title...，语法: 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">
        <img v-bind:src="url" :alt="alt" title="hello, 我是波仔">
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                url: './01test.png',
                alt: '我是波仔'
            }
        })
    </script>
</body>
</html>

综合v-bind和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">
        <div class="btn">
            <button v-show="index>0" @click="index--">上一页</button>
        </div>
        <div>
            <img v-bind:src="list[index]">
        </div>
        <div class="btn">
            <button v-show="index < list.length-1" @click="index++">下一页</button>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                index: 0,
                list: [
                    "images/10-01.png",
                    "images/10-02.png",
                    "images/11-00.gif",
                    "images/11-01.gif",
                    "images/11-02.gif",
                    "images/11-03.gif",
                    "images/11-04.png",
                    "images/11-05.png",
                ]
            }
        })
    </script>
</body>
</html>
  • v-for指令
    该名利主要是基于数据循环，多次渲染整个元素(数组、对象、数字…)。
    语法: v-for="(item，index) in 数组",其中,item表示每一项,index表示下标。也可以省略index来循环:v-for="item in 数组"
<!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">
        <h3>小黑水果店</h3>
        <ul>
            <li v-for="(item,index) in list">{{index}}:{{item}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                list: ["西瓜", "苹果", "鸭梨", "榴莲"]
            }
        })
    </script>
</body>
</html>

v-for和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">
        <h3>小黑的书架</h3>
        <ul>
            <li v-for="item,index in book_list" v-bind:id="item.id">
                <span>{{item.name}}</span> 
                <span>{{item.author}}</span>
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                book_list:[
                    {"id":1, "name":"《红楼梦》","author":"曹雪芹"},
                    {"id":2, "name":"《西游记》","author":"吴承恩"},
                    {"id":3, "name":"《水浒传》","author":"施耐庵"},
                    {"id":4, "name":"《三国演义》","author":"罗贯中"}
                ]
            },
            methods:{
                del(id) {
                    this.book_list = this.book_list.filter(item=>{
                        return item.id !== id
                    })
                }
            }
        })
    </script>
</body>
</html>
  • v-model指令
    v-model指令的作用:给表单元素使用,双向绑定，可以快速获取或设置表单元素的内容。
  1. 数据变化,视图自动更新
  2. 视图变化,数据自动更新
    语法: 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="text" v-model="username"> <br>
        密码: <input type="password" v-model="password">
        <button @click="login">登录</button>
        <button @click="reset">重置</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                "username": "",
                "password": ""
            },
            methods:{
                login() {
                    console.log("输出账号密码: ",this.username, this.password)
                },
                reset() {
                    this.username = ""
                    this.password = ""
                }
            }
        })
    </script>
</body>
</html>

综合案例: 1. 列表渲染 2. 删除功能 3. 添加功能 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">
        <!--输入框-->
        <h1>小黑记事本</h1>
        <input v-model="todoName" placeholder="请输入任务" class="new-todo">
        <button @click="add" class="add">添加任务</button>
        <!--列表区域-->
        <section class="main">
            <ul class="todo-list">
                <li class="todo" v-for="(item, index) in list" :key="item.id">
                    <div class="view">
                        <span class="index">{{index+1}}.</span><label>{{item.name}}</label>
                        <button class="destroy" @click="del(item.id)">x</button>
                    </div>
                </li>
            </ul>
        </section>
        <!--统计和清空 如果没有任务了,底部隐藏掉v-show-->
        <footer class="footer" v-show="list.length > 0">
            <!--统计-->
            <span class="todo-count">合计:<strong>{{list.length}}</strong></span>
            <!--清空-->
            <button @click="clear" class="clear-completed">清空任务</button>
        </footer>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                todoName:"",
                list: [
                    {"id":1, "name":"跑步1公里"},
                    {"id":2, "name":"跳绳200个"},
                    {"id":3, "name":"游泳200米"}
                ]
            },
            methods: {
                del(id) {
                    this.list = this.list.filter(item=>item.id !== id)
                    return this.list
                },
                add() {
                    if (this.todoName.trim()==="") {
                        alert("请输入任务名称")
                        return
                    }
                    this.list.unshift({
                        id: +new Date(),
                        name: this.todoName
                    })
                    this.todoName=""
                },
                clear() {
                    this.list = []
                }

            }
        })
    </script>
</body>
</html>
bohuang123
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue学习笔记
12-05
vue的学习笔记里面的主要内容是vue.js cli的安装和相关的指令
vue学习笔记之动态组件和v-once指令简单示例
09-17
主要介绍了vue学习笔记之动态组件和v-once指令,结合简单实例形式详细分析了vue.js动态组建点击切换相关操作技巧,需要的朋友可以参考下
vue学习笔记十：Vue中引入jquery
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
03-03 8499
vue3中引入jquery并使用
Vue学习笔记二：常用指令
qq_45283247的博客
03-01 85
Vue学习笔记二：常用指令 Vue版本：2.5.21 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
Vue学习笔记03：Vue基础入门
HHHBan的博客
11-20 906
Vue 基础入门 一、Vue 简介 1. 什么是 vue 官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 渐进式框架：Vue 不强求你一次性接受并使用它的全部功能特性，我们可以在项目中一点点来引入和使用 Vue，而不是用 Vue 的一个小功能，就必须用 Vue 来开发整个项目。 1.1 解读核心关键词：构建用户界面 前端开发者最主要的工作，就是为网站的使用者（又称为：网站的用户）构建出美观、舒适、好用的网页。 1.2 构建用户界面的传统方式 在传统
vue学习笔记三：vue开发基础下
jinyeran的博客
10-24 3879
一、全局API vue.directive vue.use vue.extend vue.set vue.mixin 二、实例属性 vm.$props vm.$options vm.$el vm.$children vm.$root vm.$slots vm.$attrs 三、全局配置 productionTip slient devtools 四、组件进阶 mixins render createElement
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
01-21
本文实例讲述了Vue入门基本概念与使用。分享给大家供大家参考，具体如下： 1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁,...
VUE入门学习项目资料与学习笔记.zip
02-12
主要是本人在学习vue过程中总结的学习心得和代码示例。包括Vue的环境搭建、常用指令、属性、组件、vue-router、axios以及项目的简单讲解。
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 354
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 132
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 111
vue echarts 柱状图 堆叠柱状图
vue 实现级联选择器功能
清音的博客
04-22 510
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 227
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 331
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 404
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
xu_duo_i的博客
04-25 292
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
elementUi 日期选择器 组件禁止手输
CMDN123456的博客
04-22 340
elementUi 日期选择器 组件禁止手输
Vue 组件分类、局部注册和全局注册
zsx0728的博客
04-26 129
组件分为根组件与普通组件，本文用案例介绍了局部注册和全局注册。
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值