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

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站技术胖。

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

智能推荐

Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)

Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架。只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。特点易用：在有 HTML CSS JavaScript 的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以...

01-vue(v-text,插值语法,v-html,v-model,v-on,v-bind,vue中的this,事件按键修饰符)

01- vue是什么: 02- vue的基本使用: 03-v-text指令: ps:打印效果： 04-插值语法: ps:打印效果： 05-v-html指令: ps:打印效果： 06-v-model指令: ps:打印效果： 07-v-model指令-单选框: ps:打印效果： 08 v-model指令-多选框: ps:打印效果： 09 v-model指令-下拉菜单: ps:打印效果： 10 v-on...

2018andoid混淆打包遇到Execution failed for task ':app:transformClassesAndResourcesWithProguardForRelease'.

在正式打包中，加上了然后打包过程中，build中就报出了 Execution failed for task ‘:app:transformClassesAndResourcesWithProguardForRelease’. 然后就goodle了一下,最简单有效的回复，就是在 proguard-rules.pro 文件中加入 -ignorewarnings 但是在我这可...

element 表格评分表（合并单元格，单选框按钮选分，计算表格总分）

element 表格评分表（合并单元格，单选框按钮选分）图片: html: css: js:...

matlab与python的交互

一、从matlab调用python 1、先给出官方链接进入链接后点示例，内容更丰富一些。《Python 库 — 示例》 2、简单说一下环境配置（下面的图片内容来自https://blog.csdn.net/jnulzl/article/details/51170859） 3、添加python环境变量以加载模块如果是将当前文件夹加入到python搜索路径，modpath='';即可。...