[前端学习]vue的指令学习记录 vu-if | text | for | on | model | bind | pre

最新推荐文章于 2024-04-11 03:30:25 发布

麓山枫林晚

最新推荐文章于 2024-04-11 03:30:25 发布

阅读量353

点赞数

分类专栏：前端 vue.js

本文链接：https://blog.csdn.net/qq_40685445/article/details/106087036

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue.js

1 篇文章 0 订阅

订阅专栏

vue的指令学习记录 vue-if | text | for | on | model …

预备

下载vue.js

vue.js官网下载地址
两个版本均下载，下载下来的为js文件。
在这里插入图片描述

引入vue.js

<script type = "text/javascript" src="xxx/vue.js"></script>

即可使用我们的vue.js了，开始愉快的学习（秃头）吧

准备vue环境

使用的编辑器是vscode
vscode的控制台（ ctrl+~ 打开）安装下面服务

npm install live-server

之后控制台输入

live-server

运行服务，可以在地址127.0.0.1:8080下看的html运行结果

vue基本使用

head中script标签引入vue.js
body中写一个声明必须要new一个 Vue的实例
{{}} 双大括号等于是展示该变量信息
el是必须要写的，对应用于展示该vue对象的标签的id
data是vue的数据域
computed是用于计算的函数域
methods是存储方法的域

	<div id = "app">
    	{{message}}
    </div>
    
    <script type = "text/javascript">
        var _app = new Vue({
            el:'#app',
            data:{
                message:"hello world!!!"
            }
            computed:{
	            sortItems:function(){                
	            }
            }
            methods:{
	            addScore:function(){	                
	            }
            }
        })
    </script>

完整的helloworld代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>helloworld 实例</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script type = "text/javascript" src="../assets/js/vue.js"></script>
    </head>
    <body>
        <h1>helloworld 实例</h1>
        <hr>
        <div id = "app">
            {{message}}
        </div>
        
        <a href="../index.html">back</a>
        <script type = "text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    message:"hello world!!!"
                }
            })
        </script>
    </body>
</html>

vue-if & vue-else-if & v-else & v-show

<div id = "app">
        <div v-if="isLogin">你好 kirito</div>
        <div v-else-if="isElse">elseif</div>
        <div v-else>请登录</div>
        <div v-show="isShow">It's showtime</div>
    </div>

    <script type = "text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                isLogin:false,
                isElse:false,
                isShow:false
            }
        })
    </script>

vue-if & vue-else-if & v-else

v-if: 当其值为true时，显示该标签内容
v-else-if: 与v-if 搭配，当v-if为false且本身为true时，显示该标签
v-else: 与v-if搭配，不必赋值，显示该标签内容

遵循if - else的逻辑关系

v-show

<div v-show="isShow">It's showtime</div>

isShow为true则显示该标签内容，与v-if有点相似

v-if: 判断是否加载，可以减轻服务器的压力，在需要时加载
v-show：调整css display属性，可以使客户端操作更加流畅

v-for

意如其名，循环输出

//在一个无序列表中循环输出li项，sortItems为数组，在data数据域中
<ul>
  <li v-for="item in sortItems">
       {{item}}
  </li>
</ul>

vfor

v-text & v-html

v-text会在渲染完成之后在显示该值，而不会因为渲染失败而产生令人费解的{{xxx}}
v-html则是实现在字符串中输入html的语法标签如 h2并使之生效

		<div id = "app">
            <span>{{message}}</span>=<span v-text = "message"></span><br/>
            <span v-html = "dodo"></span>
        </div>

        <a href="../index.html">back</a>
        <script type = "text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    message:"hello world!!!",
                    dodo:'<h2>hello world!</h2>'
                }
            })
        </script>

v-on

on表示响应，可以是鼠标点击(click)事件，也可以是键盘按下(keydown)和弹起(keyup)事件
对应被赋予的值应该为函数名

	<div id = "app">
            本场比赛分数:{{ scores }}
            <p>
                <button v-on:click="addScore">加分</button>
                <!--@等价于v-on:   -->
                <button @click="desScore">减分</button><br/>
                <input type="text" v-on:keyup.enter="onEnter" v-model="scores2">
                //keyup.enter表示回车键弹起时调用后面的onEnter函数
            </p>
        </div>
        
        <script type = "text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    scores:0,
                    scores2:2
                },
                methods:{
                    addScore:function(){
                        this.scores++;
                    },
                    desScore:function(){
                        this.scores--;
                    },
                    onEnter:function(){
                        this.scores = this.scores + parseInt(this.scores2);
                    }
                }
            })
        </script>

on应该调用methods中的函数
v-on: 等价于 @

v-model 数据源绑定

双向绑定数据，修改输入框中数据，显示的文本会即时发生改变

		    <p>原始文本信息： {{message}}</p>
            <h4>文本框</h4>
            <p>v-model<input type="text" v-model="message"></p>

三个属性

v-model.lazy 鼠标失去焦点时才更新数据源，延缓更新
v-model.number 当数据源是纯数字时，输入的必须也是数字否则不改变
v-model.trim 去掉头尾空格

vmodel1
vmodel2
还有其他应用场景

文本域
多选框绑定一个值
多选框绑定数组
单选框绑定

v-bind

将标签与变量绑定在一块，也可以绑定class、对象，大概html所有元素均可

 <p> <img v-bind:src="imgSrc" width="200px"></p>
 ...
 <script type = "text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    message:"hello world!!!",
                    imgSrc:"https://i0.hdslb.com/bfs/archive/acf2c0ea2d20ffc58b74c4d3870b06c4f6620313.jpg@880w_388h_1c_95q",
                    //加载不出来则需要更换图片地址
                }
            })
        </script>

v-bind: 等价于 :

v-pre&v-cloak&v-once

pre显示原样，不显示标签中的变量值
cloak渲染完成才显示
once只渲染一次，在一些需要连续点击改变值的情况下只能改变一次

		<div id = "app">
            <div v-pre> {{message}} </div>  <!-- 原样输出 -->
            <div v-cloak>渲染完成后，才显示！ </div>
            <div>{{message}}</div>
            <div><input type="text" v-model="message"></div>
            <div v-once>{{message}}</div> <!-- 只渲染一次 -->

        </div>
        
 
        <script type = "text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    message:"hello world!!!"
                }
            })
        </script>

在这里插入图片描述
加油！
为兴趣所学，为自己奋斗。

学习资源参考：b站技术胖。

麓山枫林晚

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
[前端学习]vue的指令学习记录 vu-if | text | for | on | model | bind | pre

vue的指令学习记录 vue-if | text | for | on | model …目录vue的指令学习记录 vue-if | text | for | on | model ...预备下载vue.js引入vue.js准备vue环境vue基本使用vue-if & vue-else-if & v-else & v-showvue-if & vue-else-if & v-elsev-showv-forv-text & v-htmlv-onv-mode
复制链接

扫一扫