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=" ...

随机推荐

php 23种设计模式 - 命令模式
命令模式将一个请求封装为一个对象,从而使用户可用不同的请求对客户进行参数化.对请求排队或记录请求日志,以及支持撤销的操作. 命令模式以松散耦合主题为基础,发送消息.命令和请求,或通过一组处理程序发送 ...
PhpStrom 好用的代码小地图插件
类似SublimeText的Mini Map插件 ,废话不多直接上安装打开File -> Settings -> Plugins -> 搜索CodeGlance -> in ...
go1.18泛型的简单尝试
今天golang终于发布了1.18版本,这个版本最大的一个改变就是加入了泛型.虽然没有在beta版本的时候尝试泛型,但是由于在其他语言的泛型经验,入手泛型不是件难事~ 官方示例 Tutorial: G ...
05tensorflow分布式会话
一. tensorflow分布式 1. 概念分布式Tensorflow是由高性能的gRPC框架作为底层技术来支持的.这是一个通信框架gRPC(google remote procedure ...
LGP3307题解
题意有点儿神秘,而且出题人可能有点大病( 项链由 \(n\) 颗珠子构成,相邻的珠子不能相同. 每颗珠子上有 \(3\) 个数字,这 \(3\) 个数之间没有顺序,且 \(\gcd\) 为 \(1\) ...
[链表]LeetCode 25 K组一个翻转链表
LeetCode 25 k组一个翻转链表 TITLE 示例 1: 输入:head = [1,2,3,4,5], k = 2 输出:[2,1,4,3,5] 示例 2: 输入:head = [1,2,3, ...
git使用命令行保留原分支迁移代码仓库
有些时候我们需要对git仓库中的项目进行一些迁移,如从a账号迁移到b账号下,从github平台迁移到内部的gitlab平台等.一般平台会自带 migrate 或者 import 的功能,可以很方便的进 ...
DataTemplate的用法
WPF 模板主要分为两大类:1.ControlTemplate: 控件的外观,也就是控件是什么样子.2.DataTemplate: 是数据内容的表现,一条数据显示成什么样子. (1)DataTemla ...
SpringBoot---Eclipse编辑yml文件不能自动提示的问题(Eclipse安装插件STS)
在学习了几天SpringBoot之后,刚开始跟着别人的博客使用的是IDEA,后来跟着视频学,讲师用的eclipse,便跟着用了,但是发现在编辑yml配置文件的时候,没有自动提示的功能,百度之后发现是没 ...
Vscode的使用小技巧
命令行启动code 如果你的系统是Linux系统(我使用的是Ubuntu 16.04)这样就可以直接使用 code + filename来编辑文件(就像vi + filename) 如果你的系统是Ma ...

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