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

冷不防 2023-03-13 09:24 15阅读 0赞

# 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-show
     *   *  vue-if & vue-else-if & v-else
         *  v-show
     *  v-for
     *  v-text & v-html
     *  v-on
     *  v-model 数据源绑定
     *  v-bind
     *  v-pre&v-cloak&v-once

## 预备 ##

### 下载vue.js ###

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

### 引入vue.js ###

即可使用我们的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>
                    
                    <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][]  
还有其他应用场景

*  文本域
 *  多选框绑定一个值
 *  多选框绑定数组
 *  单选框绑定  
    ![vmodel3][]

## 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>

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

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

[Link 1]: https://cn.vuejs.org/v2/guide/installation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1NDQ1_size_16_color_FFFFFF_t_70]: /images/20230312/7c8ccf54e11f43e59950635981da341c.png
[vfor]: /images/20230312/75642c8bbcdd4a2198f83ca84db0c503.png
[vmodel1]: https://img-blog.csdnimg.cn/20200512232801470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1NDQ1,size_16,color_FFFFFF,t_70
[vmodel2]: https://img-blog.csdnimg.cn/20200512232818568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1NDQ1,size_16,color_FFFFFF,t_70
[vmodel3]: https://img-blog.csdnimg.cn/20200512233035987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1NDQ1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1NDQ1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200512233940642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1NDQ1,size_16,color_FFFFFF,t_70