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>

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 去掉头尾空格

还有其他应用场景

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

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

[前端学习]vue的指令学习记录 vu-if | text | for | on | model | bind | pre的更多相关文章

Vue 基础指令学习
学习Vue的一些总结,第一次写博客,文笔实在是很差不过我会不断写的. <template>  <div> <pre> ...
从零开始学习Vue.js，学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点官网:http://cn ...
Vue.js 第1章 Vue常用指令学习
今日目标能够写出第一个vue应用程序能够接受为什么需要学vue 能够使用指令能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要可以提高开发效率实现vu ...
vue基础指令学习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
【vuejs深入一】深入学习vue指令，自定义指令解决开发痛点
写在前面一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 最近博主我沉淀了几个月,或者说懒了几个月.然而大佬的指点总是一针见血,能够让人看到方向.所以我现在有觉得,一个好的 ...
深入学习vue指令，自定义指令解决开发痛点
每天学习一点点编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code v-model指令 vue.js的定义是一个mvvm框架,将它发挥到极致能够极大的提升 ...
vue学习指南：第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
vue学习（二）Vue常用指令
2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...
VUE 学习笔记一指令
1.声明式渲染 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性 <div id='app'> <span v-bind:title=" ...

随机推荐

小程序 laravel 实现秒杀
参考博客: https://blog.csdn.net/m0_56487875/article/details/118603439 小程序登录: https://www.cnblogs.com/xia ...
sql server数据库如何存储数组，int[]float[]double[]数组存储到数据库方法
原文地址:https://www.zhaimaojun.top/Note/5475296 将数组存储到数据库的方法 (本人平时同csharp编写代码,所以本文中代码都是csharp代码,有些地方jav ...
3、myql的逻辑架构和sql的执行流程
msyql逻辑架构逻辑架构的解析逻辑架构图如下(序号代表的是:服务器处理客户端请求的流程) 1.1connectors connectors是指使用不同语言的客户端与mysql server服务器 ...
itertools.chain()and itertools.product()操作+pandas.DataFrame.transform
VuePress 博客之 SEO 优化（六）站长工具
前言在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇接着 ...
内置方法 __new__ __del__
1.__new__ 构造方法实例化对象是先执行__new__方法,但是类中没有__new__方法,所以先到父类object类中的new方法,开辟一个属于对象的空间,然后再执行init方法设计模式: ...
Windows服务器上搭建Windows2003+IIS+ASP.NET+MSSQL网站
一.安装IIS服务 1. 选择"开始"→"所有程序"→"管理工具"→"管理您的服务器"菜单命令,启动"添加或删 ...
bzoj4032/luoguP4112 [HEOI2015]最短不公共子串(后缀自动机+序列自动机上dp)
bzoj4032/luoguP4112 [HEOI2015]最短不公共子串(后缀自动机+序列自动机上dp) bzoj Luogu 题解时间给两个小写字母串 $ A $ , $ B $ ,请你计算: ...
《HelloGitHub》第 72 期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...
kafka 的高可用机制是什么？
这个问题比较系统,回答出 kafka 的系统特点,leader 和 follower 的关系,消息读写的顺序即可.

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