Vue从入门到放弃（一）——指令篇

最新推荐文章于 2023-06-07 14:59:24 发布
最新推荐文章于 2023-06-07 14:59:24 发布
阅读量396 收藏
点赞数 1
分类专栏： Vue从入门到放弃
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tuohongweng3138/article/details/85243124
版权

文章目录

1.v-if/v-else和v-show

1.1 v-if

常和v-else连用，v-if：跟true，则这个dom被渲染，否则就渲染else

body>
    <div id="app">
        <p v-if="isOk">v-if为true就显示</p>//这一行显示
        <p v-else>v-else显示的情况</p>//这一行不显示
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                isOk:'true'
            }
        })
    </script>
</body>
1

1.2v-show

让dom节点显示，实际上是改变display属性

<div id="app">
        <p v-show="isOk">我是使用v-show指令的</p>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                isOk:'true'
            }
        })
    </script>

1.3区别

  • v-if用来判断是否加载，在需要的时候再让服务器加载，减轻服务器压力
  • v-show调整css display属性，可以让客户端操作更加流程

2.v-for

v-for主要用来遍历，可以渲染列表，常用在<li>标签，<option>标签

2.1遍历数组

<div id="app">
        <ul>
            <li v-for="item in items">{{item}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                items:[1,2,6,32,65,8]
            }
        })
    </script>
  • 也可以写成(item,index) in items其中index是索引
  • 给数组排序
<div id="app">
        <ul>
            <li v-for="item in sortItem">{{item}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                items:[1,2,6,32,65,8]
            },
            computed: {
                sortItem:function(){
                    return this.items.sort(paixu)//这里传入自己定义的排序方法
                }
            }
            }
        );
        function paixu(a,b){//自己定义的排序方法
            return a-b;
        }
    </script>

2.2遍历对象

  • 对象循环输出
<body>
    <div id="app">
        <ul>
            <li v-for="student in students">{{student}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                students:[
                    {name:'宫崎英高',age:34},
                    {name:'尾田',age:55},
                    {name:'jojo',age:12},
                    {name:'路德维希',age:89},
                    {name:'劳伦斯',age:3},
                ]
            }    
            }
        );
    </script>
</body>
显示：
{ "name": "宫崎英高", "age": 34 }
{ "name": "尾田", "age": 55 }
{ "name": "jojo", "age": 12 }
{ "name": "路德维希", "age": 89 }
{ "name": "劳伦斯", "age": 3 }

3.v-text和v-html

3.1v-text

有时候网速也比慢，或者js出错时，会出现显示{{message}}这种情况

  • v-text就是解决这个问题的
<body>
    <div id="app">
        <p v-text="message"></p>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'very well good hunter'
            }    
            }
        );
    </script>
</body>

3.2v-html

  • 如果message中是html样式，则{{message}}会把标签也显示出来
  • v-html会将其中的标签解释出来
 <div id="app">
        <p>{{message}}</p>
        <p v-html="message"></p>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'<span style="color:red;">我是红色</span>'
            }    
            }
        );
    </script>

4.v-on

  • 监听DOM事件

    比如：点击按钮，实现数字自动加1，此时监听鼠标点击事件

    v-on：click可以简写成@click

<body>
    <div id="app">
        <p>{{count}}</p>
        <button v-on:click="add">点我加1</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                count: 10
            },
            methods: {
                add: function () {
                    this.count++
                }
            }
        })
    </script>
</body>

  • 也可以监听键盘事件：比如点击enter键

    代码实现了点击回车，数字自动加1

<body>
    <div id="app">
        <p>{{count}}</p>
        <input type="text" v-on:keyup.enter="add">
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                count: 10
            },
            methods: {
                add: function () {
                    this.count++
                }
            }
        })
    </script>
</body>

5.v-model

5.1绑定输入框

<body>
    <div id="app">
        <p>{{ message }}</p>
        <input type="text" v-model="message">
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'very well good hunter'
            }
        })
    </script>
</body>

修改data里的message，输入框也会随之改变；相反的，修改输入框内的信息，data里的message也会随之改变。这就是v-model双向绑定的作用

5.2绑定文本域

<body>
    <div id="app">
        <p>{{message}}</p>
        <textarea v-model="message"></textarea>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'very well good hunter'
            }
        })
    </script>
</body>

5.3绑定单选框

<body>
    <div id="app">
        <input type="radio" name="gender" value="man" v-model="picked">男
        <input type="radio" name="gender" value="female" v-model="picked">女
        你选择的是：{{picked}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                picked: ''
            }
        })
    </script>
</body>

​ 单选框中name属性将多个选项设置进一组，value为你选择后的值

5.4绑定多选框

<body>
    <div id="app">
        <input type="checkbox" id="game" value="bloodborne" v-model="picked">血源诅咒
        <input type="checkbox" id="game" value="monster hunter" v-model="picked">怪物猎人
        <input type="checkbox" id="game" value="dark souls" v-model="picked">黑暗之魂
        你选择的是：{{picked}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                picked: []
            }
        })
    </script>
</body>

5.5绑定下拉框

<body>
    <div id="app">
        <select v-model="picked">
            <option value="请选择" disabled></option>
            <option v-for="game in games">{{game}}</option>
        </select>
        你选择的是：{{picked}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                picked: [],
                games: ['黑暗之魂', '怪物猎人', '血源诅咒']
            }
        })
    </script>
</body>

6.v-bind

6.1绑定style

将Vue结构体中的data与标签的属性绑定，可以使标签的属性动态变化

<body>
    <div id="app">
        <div v-bind:style="styleColor">v-bind绑定style</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                styleColor: {
                    color: 'green'
                }
            }
        })
    </script>
</body>

7.其他内部指令

  • v-pre :在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
<body>
    <div id="app">
        <p v-pre>{{message}}</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            }
        })
    </script>
</body>

显示{{message}}，而不是hello vue

  • v-once：只对dom渲染一次，后面视为静态资源
  • v-cloak：在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
凤凰院凶真Z
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue太难啦！从入门到放弃day01——vue基础语法
小陈工的博客
08-03 1019
因为公司的业务需要，我要从事前端方面的工作，但是对于从没做过前端的我来说，是一个很大的挑战，所以只能一点点从基础开始学习。嗯，就从Vue开始吧！看我如何从入门到放弃！
vue.js入门（3）——详解组件通信
11-27
首先，Vue.js推荐使用props来从父组件向子组件传递数据。这种方式是显式的，使得代码易于理解和维护。子组件可以通过`this.$parent`访问其父组件，但这种做法通常被视为不良实践，因为它增加了组件之间的耦合，并...
vue从入门到放弃
秃头的博客
03-22 271
vue入门 史上最通俗易懂 一 、环境安装 1、初始化npm 2、安装 二 、入门案例 三、vue的声明周期和钩子函数 1、create 相关 2、mounted 相关 3、update 相关 4、destroy 相关 5、生命周期总结 四、基础使用 1、指令 2、计算属性 3、监听器 4、过滤器的使用 5、组件化
手把手教你栈溢出从入门到放弃（上）
G653214的博客
11-11 590
0x00 写在最前面 开场白：快报快报！今天是2017 Pwn2Own黑客大赛的第一天，长亭安全研究实验室在比赛中攻破Linux操作系统和Safari浏览器（突破沙箱且拿到系统最高权限），积分14分，在11支队伍中暂居 Master of Pwn 第一名。作为热爱技术乐于分享的技术团队，我们开办了这个专栏，传播普及计算机安全的“黑魔法”，也会不时披露长亭安全实验室的最新研究成果。 安全领域博大精深，很多童鞋都感兴趣却苦于难以入门，不要紧，我们会从最基础的内容开始，循序渐进地讲给大家。技术长路漫漫，我们携
VUE从入门到放弃的辛酸历程（持续更新）
城南蝈蝈
11-21 650
vue3.0——项目搭建 vue——使用引用方式创建项目 vue中的模板语法
Vue基础（一）——入门
pro1822的博客
04-25 8724
Vue基础（一）——入门
Vue预习课2：Hello World 第一个程序
05-08
Vue.js 是一款轻量级的前端JavaScript框架，以其易学易用、高性能和组件化的特点在Web开发领域受到广泛欢迎。本课程的核心是通过“Hello World”实例来引导初学者理解Vue的基本概念和设计思想。 首先，让我们从...
Vue入门之数据绑定(小结)
08-28
在本文中，我们将深入探讨Vue入门时的重要概念——数据绑定。数据绑定是Vue框架的核心功能，它使得开发者能够实现视图与数据模型之间的双向同步，极大地简化了前端开发流程。 首先，让我们理解什么是双向绑定。在...
30道Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）
最新发布
09-19
本文将对 Vue.js 面试题进行详细解释，涵盖了从入门到精通的知识点，旨在帮助读者自测 Vue 掌握程度。 1. SPA 单页面的理解 SPA（Single-Page Application）是一种 Web 应用程序，它仅在 Web 页面初始化时加载相应...
30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）.pdf
04-11
本文总结了 30 道 Vue 面试题，涵盖了从基础到高级的知识点，旨在帮助读者自测 Vue 掌握程度。 1. SPA 单页面应用的理解 SPA（Single-Page Application）是一种 Web 应用架构，仅在页面初始化时加载相应的 HTML、...
vue从入门到懵逼
08-29
主要介绍vue.js起源，特点，和其他前端框架的对比，以及如何与真实项目集成
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue快速入门
梵高的向日葵
11-05 8190
文章目录一、Vue快速入门1、第一个Vue程序2、Vue基本语法2.1、if判断2.4、事件双向绑定3、Vue组件4、Axios异步通信5、计算属性6、插槽slot7、自定义事件内容分发8、创建vue项目二、Vue实战1、项目创建2、项目开发未完结 一、Vue快速入门 1、第一个Vue程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti
Vue从入门到精通
qq_46555046的博客
06-07 1302
Vue学习入门
Vue入门到放弃之旅今日开启第一篇
rows_com的博客
05-16 741
这里写自定义目录标题寄语(废话文学) 寄语(废话文学) 首先日常完成工作后,我们开始打开B站,搜索vue.js从入门到精通教程,会出来一大堆让你眼花缭乱.然后们随便点进去看一个,激情满满的一天上午就开始了,目前来说我还是很亢奋的,斗志昂扬! 那必然选择播放了靠前先试试水,好了话不多说,开始看开始砍. ......
vue从入门到精通
Pwsifeng的博客
05-03 1万+
VUE vue框架的两大核心： 数据驱动和组件化。 第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM） 第二周：大家需要转变编程思维的习惯：组件化（封装的是页面） 一、前端开发历史 1994年可以看做前端历史的起点（但是没有前端的叫法） 1995年网景推出了JavaScript 1996年微软推出了iframe标签， 实现了异步的局部加载 1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商
Vue介绍与入门（一篇就可入门）
weixin_57504000的博客
04-26 4万+
一、Vue.js是什么？ vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 渐进式我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值