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

随机推荐

HTML 音乐
<audio preload autoplay loop id="vd"> <source src="/static/audio/hua.mp3&quo ...
U8g2库的使用
一.硬件介绍: 由于笔者这里只有0.96寸的OLED屏幕,那就讲讲最常用的0.96寸OLED屏幕吧. OLED介绍: OLED,即有机发光二极管( Organic Light Emitting Dio ...
Python基础之hello world！
仪式感很重要嘛: 精通各个语言的hello world! Python3 版本的 print('Hello world')
ArcGIS进行视域分析及地形图制作
问题说明开发商要在本区域建造观景亭,希望在观景亭上能看到优美的景色.根据提供的数据,完成以下要求. 一. 数据说明(见"题目3"文件夹) 1. DEM.tif:研究区域的数据高 ...
jdbc model 代码示例
package com.gylhaut.model; import java.util.Date; public class Goddess { @Override public String toS ...
CentOS7.5安装配置Jenkins
一. 硬件配置: 1 GB的RAM 50 GB的驱动器空间二. 系统环境: [root@Jenkins ~]# cat /etc/redhat-release CentOS Linux releas ...
Java案例——冒泡排序
排序:将一组数据按照固定的规则进行排列冒泡排序:一种排序方式,对将要排序的相邻的数据进行两两比较,将较大的放在后面,依次对所有的数据进行操作,直到所有的数据按要求完成排序冒泡排序原理: 1.如果有 ...
JavaWeb 10_Filter过滤器
一.什么是Filter? 1.Filter 过滤器它是JavaWeb的三大组件之一-.三大组件分别是: Servlet 程序.Listener 监听器.Filter 过滤器2.Filter 过滤器它是 ...
sqli-labs下载与安装
Sqli-labs 下载 Sqli-labs是一个印度程序员写的,用来学习sql注入的一个游戏教程. 博客地址为:http://dummy2dummies.blogspot.hk/, 博客当中有一些示 ...
python练习册每天一个小程序第0007题
1 # -*-coding:utf-8-*- 2 __author__ = 'Deen' 3 ''' 4 题目描述: 5 有个目录,里面是你自己写过的程序,统计一下你写过多少行代码.包括空行和注释,但 ...

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