vue的指令学习记录 vue-if | text | for | on | model …

预备

下载vue.js

vue.js官网下载地址
两个版本均下载,下载下来的为js文件。

引入vue.js

  1. <script type = "text/javascript" src="xxx/vue.js"></script>

即可使用我们的vue.js了,开始愉快的学习(秃头)吧

准备vue环境

使用的编辑器是vscode
vscode的控制台( ctrl+~ 打开)安装下面服务

  1. npm install live-server

之后控制台输入

  1. live-server

运行服务,可以在地址127.0.0.1:8080下看的html运行结果

vue基本使用

head中script标签引入vue.js
body中写一个声明必须要new一个 Vue的实例
{{}} 双大括号等于是展示该变量信息
el是必须要写的,对应 用于展示该vue对象的标签的id
data是vue的数据域
computed是用于计算的函数域
methods是存储方法的域

  1. <div id = "app">
  2. {{message}}
  3. </div>
  4. <script type = "text/javascript">
  5. var _app = new Vue({
  6. el:'#app',
  7. data:{
  8. message:"hello world!!!"
  9. }
  10. computed:{
  11. sortItems:function(){
  12. }
  13. }
  14. methods:{
  15. addScore:function(){
  16. }
  17. }
  18. })
  19. </script>

完整的helloworld代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>helloworld 实例</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <script type = "text/javascript" src="../assets/js/vue.js"></script>
  9. </head>
  10. <body>
  11. <h1>helloworld 实例</h1>
  12. <hr>
  13. <div id = "app">
  14. {{message}}
  15. </div>
  16. <a href="../index.html">back</a>
  17. <script type = "text/javascript">
  18. var app = new Vue({
  19. el:'#app',
  20. data:{
  21. message:"hello world!!!"
  22. }
  23. })
  24. </script>
  25. </body>
  26. </html>

vue-if & vue-else-if & v-else & v-show

  1. <div id = "app">
  2. <div v-if="isLogin">你好 kirito</div>
  3. <div v-else-if="isElse">elseif</div>
  4. <div v-else>请登录</div>
  5. <div v-show="isShow">It's showtime</div>
  6. </div>
  7. <script type = "text/javascript">
  8. var app = new Vue({
  9. el:"#app",
  10. data:{
  11. isLogin:false,
  12. isElse:false,
  13. isShow:false
  14. }
  15. })
  16. </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

  1. <div v-show="isShow">It's showtime</div>

isShow为true则显示该标签内容,与v-if有点相似

v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载
v-show:调整css display属性,可以使客户端操作更加流畅

v-for

意如其名,循环输出

  1. //在一个无序列表中循环输出li项,sortItems为数组,在data数据域中
  2. <ul>
  3. <li v-for="item in sortItems">
  4. {{item}}
  5. </li>
  6. </ul>

v-text & v-html

v-text会在渲染完成之后在显示该值,而不会因为渲染失败而产生令人费解的{{xxx}}
v-html则是实现在字符串中输入html的语法标签如 h2并使之生效

  1. <div id = "app">
  2. <span>{{message}}</span>=<span v-text = "message"></span><br/>
  3. <span v-html = "dodo"></span>
  4. </div>
  5. <a href="../index.html">back</a>
  6. <script type = "text/javascript">
  7. var app = new Vue({
  8. el:'#app',
  9. data:{
  10. message:"hello world!!!",
  11. dodo:'<h2>hello world!</h2>'
  12. }
  13. })
  14. </script>

v-on

on表示响应,可以是鼠标点击(click)事件,也可以是键盘按下(keydown)和弹起(keyup)事件
对应被赋予的值应该为函数名

  1. <div id = "app">
  2. 本场比赛分数:{{ scores }}
  3. <p>
  4. <button v-on:click="addScore">加分</button>
  5. <!--@等价于v-on: -->
  6. <button @click="desScore">减分</button><br/>
  7. <input type="text" v-on:keyup.enter="onEnter" v-model="scores2">
  8. //keyup.enter表示回车键弹起时调用后面的onEnter函数
  9. </p>
  10. </div>
  11. <script type = "text/javascript">
  12. var app = new Vue({
  13. el:'#app',
  14. data:{
  15. scores:0,
  16. scores2:2
  17. },
  18. methods:{
  19. addScore:function(){
  20. this.scores++;
  21. },
  22. desScore:function(){
  23. this.scores--;
  24. },
  25. onEnter:function(){
  26. this.scores = this.scores + parseInt(this.scores2);
  27. }
  28. }
  29. })
  30. </script>

on应该调用methods中的函数
v-on: 等价于 @

v-model 数据源绑定

双向绑定数据,修改输入框中数据,显示的文本会即时发生改变

  1. <p>原始文本信息: {{message}}</p>
  2. <h4>文本框</h4>
  3. <p>v-model<input type="text" v-model="message"></p>

三个属性

  • v-model.lazy 鼠标失去焦点时才更新数据源,延缓更新
  • v-model.number 当数据源是纯数字时,输入的必须也是数字否则不改变
  • v-model.trim 去掉头尾空格



还有其他应用场景

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

v-bind

将标签与变量绑定在一块,也可以绑定class、对象,大概html所有元素均可

  1. <p> <img v-bind:src="imgSrc" width="200px"></p>
  2. ...
  3. <script type = "text/javascript">
  4. var app = new Vue({
  5. el:'#app',
  6. data:{
  7. message:"hello world!!!",
  8. imgSrc:"https://i0.hdslb.com/bfs/archive/acf2c0ea2d20ffc58b74c4d3870b06c4f6620313.jpg@880w_388h_1c_95q",
  9. //加载不出来则需要更换图片地址
  10. }
  11. })
  12. </script>

v-bind: 等价于 :

v-pre&v-cloak&v-once

pre显示原样,不显示标签中的变量值
cloak渲染完成才显示
once只渲染一次,在一些需要连续点击改变值的情况下只能改变一次

  1. <div id = "app">
  2. <div v-pre> {{message}} </div> <!-- 原样输出 -->
  3. <div v-cloak>渲染完成后,才显示! </div>
  4. <div>{{message}}</div>
  5. <div><input type="text" v-model="message"></div>
  6. <div v-once>{{message}}</div> <!-- 只渲染一次 -->
  7. </div>
  8. <script type = "text/javascript">
  9. var app = new Vue({
  10. el:'#app',
  11. data:{
  12. message:"hello world!!!"
  13. }
  14. })
  15. </script>


加油!
为兴趣所学,为自己奋斗。

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

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

  1. Vue 基础指令学习

    学习Vue的一些总结,第一次写博客,文笔实在是很差 不过我会不断写的. <template> <!--只能有一个根节点 --> <div> <pre> ...

  2. 从零开始学习Vue.js,学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  3. Vue.js 第1章 Vue常用指令学习

    今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...

  4. vue基础指令学习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 【vuejs深入一】深入学习vue指令,自定义指令解决开发痛点

    写在前面  一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 最近博主我沉淀了几个月,或者说懒了几个月.然而大佬的指点总是一针见血,能够让人看到方向.所以我现在有觉得,一个好的 ...

  6. 深入学习vue指令,自定义指令解决开发痛点

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code v-model指令 vue.js的定义是一个mvvm框架,将它发挥到极致能够极大的提升 ...

  7. vue学习指南:第二篇(详细Vue基础) - Vue的指令

    一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...

  8. vue学习(二)Vue常用指令

    2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...

  9. VUE 学习笔记 一 指令

    1.声明式渲染 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性 <div id='app'> <span v-bind:title=" ...

随机推荐

  1. laravel框架简易增删(改)查

    // 设置路由//展示表单页面Route::get('/week/add','weekController@add');//添加Route::post('/week/insert','weekCont ...

  2. LGP6694题解

    第一眼似乎很困难,实际上非常简单( 好吧这题我做了一个小时( 首先期望具有线性性,我们转化为计算点对对答案的贡献. 发现相对位置一样的点对对答案的贡献是一样的.我们把相对位置一样的点对铃出来,乘了之后 ...

  3. Python 基于 selenium 实现不同商城的商品价格差异分析系统

    1. 前言 selenium 原本是一款自动化测试工具,因其出色的页面数据解析和用户行为模拟能力而常用于爬虫程序中,致使爬虫程序的爬取过程更简单.快捷. 爬虫程序与其它类型程序相比较,本质一样,为数据 ...

  4. Springboot项目 配置数据库连接属性后,启动项目报错

    Springboot项目 配置数据库连接属性后,启动项目报错,错误如下: 错误原因分析: 1.连接信息配置错误 当使用properties为配置文件时,如图所示,上面的 spring.datasour ...

  5. 使用flask进行mock接口

    在测试日常过程中,我们经常会遇到因为环境问题,或者是因为上下游,前后端开发进度不一,提测时间不一等情况.这时候我们可以通过mock的方式去完成一些操作.今天给大家分享一个通过flask去mock接口, ...

  6. CentOS7 MySql数据库安装配置(单实例)

    一. 安装mysql-server 官网下载安装 # wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm # ...

  7. [SPDK/NVMe存储技术分析]015 - 理解内存注册(Memory Registration)

    使用RDMA, 必然关系到内存区域(Memory Region)的注册问题.在本文中,我们将以mlx5 HCA卡为例回答如下几个问题: 为什么需要注册内存区域? 注册内存区域有嘛好处? 注册内存区域的 ...

  8. Mycat+MySql 主从复制-读写分离 看这一篇就够了

    ​ 通过mycat和mysql的主从复制配合搭建数据库的读写分离,可以实现mysql的高可用性,下面我们来搭建mysql的读写分离. 1.一主一从 1.在node01上修改/etc/my.cnf的文件 ...

  9. loj3161「NOI2019」I 君的探险(随机化,整体二分)

    loj3161「NOI2019」I 君的探险(随机化,整体二分) loj Luogu 题解时间 对于 $ N \le 500 $ 的点,毫无疑问可以直接 $ O(n^2) $ 暴力询问解决. 考虑看起 ...

  10. 安装docker-compose 报错解决