文档章节

灵魂拷问:你是否懂得所有的Vue模板语法呢?

达达前端
 达达前端
发布于 01/01 23:57
字数 3354
阅读 13
收藏 0

file

作者 | Jeskson

掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb

Vue.js的创建者为尤雨溪,2014年,Vue.js正式发布,2015年,正式发布1.00版本。VUE.JS为渐进式的JavaScript框架,声明式渲染,组件系统,客户端路由,集中式状态管理,项目构建。

vue.js是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计可以自底向上逐层应用,vue.js的核心库只关心视图层,很容易上手,也便于和第三方库或者是既有的项目整合。

vue的优点,易用,就是可以快速上手vue,灵活,就是可以在一个库和一套完整框架之间自入伸缩,高效,文件大小20kb运行大小,提供超快的虚拟DOM。

传统开发模式的代码:

JavaScript原生代码:

<div id = "msg"> </div>

<script type="text/javascript">
 var msg = 'hello dada';
 var div = document.getElementById("msg");
 div.innerHTML = msg;
</script>

jquery代码:

<div id="msg"></div>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
 var msg = "hello da";
 $('#msg').html(msg);
</script>

Vue的基本操作,向世界问好!

<div id="app>
 <div>{{msg}}</div>
</div>

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

<script type="text/javascript">
 new Vue({
  el: '#app',
  data: {
   msg: 'hello world'
  }
 })
</script>

vue的使用过程,需要提供标签用于填充数据,引入vue.js库文件,可以使用vue的语法做功能,把vue提供的数据填充到标签里面。

el属性,元素的挂载位置,值可以是css选择器或者是dom元素

data属性,模型数据,值是一个对象

插值表达式用法

将数据填充到HTML标签中,插值表达式支持基本的计算操作

vue代码运行的原理

vue语法到原生语法,vue的语法通过vue框架编译成原生的代码。

vue的模板语法

如何理解前端渲染?

把数据填充到HTML标签中

模板和数据-》前端渲染-》静态HTML文件

前端渲染方式:原生js拼接字符串,使用前端模板引擎,使用vue特有的模板语法

原生js拼接字符串,就是将数据以字符串的方式拼接到HTML标签中。

什么是指令?什么是自定义属性,指令的本质就是自定义的属性,指令格式以v-开头

指令v-cloak

插值表达式存在一个问题,“闪动”问题,就是刷新的时候会出现闪动的效果,如何解决问题,使用v-cloak指令,解决这个问题的原理,先隐藏,替换好值之后再显示最终的值。

v-cloak,不需要表达式,用法,这个指令保持在元素上直到关联实例结束编译,和css规则如 [v-cloak] {display: none} 一起用时,这个指令可以隐藏未编译的mustache标签直到实例准备完毕。

示例:标准的属性选择器

[v-cloak] {
 display: none;
}

<div v-cloak>
 {{message}}
</div>

不会显示,直到编译结束。

v-cloak指令的用法

第一步使用提供的样式

[v-cloak] {
 display: none;
}

第二步,在插值表达式所在的标签中添加v-cloak指令

本质原理,先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后在显示最终的结果。

数据绑定的指令

v-text填充纯文本,v-html填充HTML代码,v-pre填充原始信息

v-text,string,更新元素的textContent

示例:

<span v-text="msg"></span>

<span>{{msg}}</span>

v-html,string,更新元素的innerHTML,内容按照普通HTML插入,不会作为vue模板进行编译,如果试图使用v-html组合模板,可以重新考虑是否通过使用组件来替代。

在网站上动态渲染任意HTML是很危险的,容易导致xss攻击,只在可信内容上使用v-html,永不用在用户提交的内容上。

在单文件组件里,scoped的样式不会应用在v-html内部,因为那部分HTML没有被vue的模板编译器处理,如果你希望针对v-html的内容设置带作用域的css,你可以替换为css modules或用一个额外的全局<style>元素手动设置类似bem的作用域策略。

v-html填充HTML片段,存在安全问题的,只有在本网站内部数据可以使用,第三方的数据不可以使用。

v-pre填充原始信息

什么是原始信息,就是如果是,不用编译,跳过编译过程

<div v-pre>{{msg}}</div>

会导致显示结果为: {{msg}}

指令

数据响应式,HTML5中的响应式,数据的响应式,什么是数据绑定?v-once只会编译一次。HTML5中的变化,屏幕尺寸的变化会导致样式的变化,数据的响应式指数据的 变化导致页面中内容的变化。

file

数据绑定如何理解,就是插值表达式是将数据填充到标签中。

编译,vue的模板内容就要通过vue的编译过程,v-once只编译一次,显示内容之后不再具有响应式功能。

双向数据绑定

v-model指令的用法

<input type="text" v-model="name"/>

MVVM设计思想:把不同的功能代码放到不同的模块里面

M,model
v,VIEW
VM,view-model

模型,数据,用到的数据,视图,就是dom元素,模板,vm,两者的结合,把两者联合到一起。

file

file

file

核心思想,分而食之,事件监听,数据绑定。

事件绑定,如何处理事件,v-on指令的用法

<input type="button" v-on:click="num++"/>

<input type="button" @click="num++"/>

事件函数的调用

直接绑定函数名称

<button v-on:click="da">dada</button>

调用函数

<button v-on:click="da()">dada</button>

事件函数参数传递

普通参数和事件对象

<button v-on:click='da("da",$event)'>da</button>

阻止事件冒泡

dada: function(event) {
 event.stopPropagation();
}

事件修饰符

.stop 阻止冒泡
<a v-on:click.stop = "dada">跳转</a>

.prevent 阻止默认行为
<a v-on:click:prevent="dada">跳转</a>

事件处理

监听事件

可以用v-on指令监听dom事件,并在触发时运行一些JavaScript代码。

示例:

<div id="dada">
 <button v-on:click="counter += 1">da da</button>
 <p>dada {{counter}} </p>
</div>

var vm = new Vue({
 el: '#dada',
 data: {
  counter: 0
 }
})

内联处理器中的方法

除了直接绑定到一个方法,也可以在内联的JavaScript语句中调用方法

<div id="da">
 <button v-on:click="say('hi')">dada</button>
</div>

new Vue({
 el: '#da',
 methods: {
  say: function(message) {
   alert(message)
  }
 }
})

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

.stop

.prevent

.capture

.self

.once

.passive
// 阻止单击事件继续传播
<a v-on:click.stop = "doThis"></a>

// 提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>

// 修饰符可以串联
<a v-on:click.stop.prevent="doThis"></a>

// 只有修饰符
<form v-on:submit.prevent></form>

// 添加事件监听时使用事件捕获模式
// 即为元素自身触发的事件先在此处理,然后才交由元素进行处理
<div v-on:click.capture="doThis"></div>

// 只当在event.target是当前元素自身触发处理函数
// 即事件不是从内部元素触发的
<div v-on:click.self="doThat">..</div>

按键修饰符

// .enter 回车键
<input v-on:keyup.enter="submit">

// .delete删除键
<input v-on:keyup.deleter="handle">

使用修饰符要注意顺序,相应的代码会以同样的顺序产生。

v-on:click.prevent.self 会阻止所有的点击

v-on:click.self.prevent 只会阻止对元素自身的点击

全部的按键别名:

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

自定义按键事件修饰符

可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

// 可以使用v-on:keyup.f1

Vue.config.keyCodes.f1 = 112
<body>
 <div id="app">
  <input type="text" v-on:keyup.aaa="handle" v-model="info">
 </div>
 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript">
 Vue.config.keyCodes.aaa = 65
 var vm =  new Vue({
  el: '#app',
  data: {
   info: ''
  },
  methods: {
   handle: function(event) {
    console.log(event.keyCode)
   }
  }
 });
</script>

应用实例,简单的计算器

需求,实现简单的加法计算,分别输入数值a和数值b,点击计算按钮,结果显示在下面

<body> 
<div id="app">
<h1>计算器</h1>

<div>
<span>数值a</span>
<span>
<input type="text" v-model="a">
</span>
</div>

<div>
<span>数值b:</span>
<span>
<input type="text" v-model="b">
</span>
</div>

<div>
<button @:click="handle">计算</button>
</div>

<div>
<span>计算结果:</span>
<span></span>
</div>
</div>

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

<script type="text/javascript">
 var vm = new Vue({
  el: '#app',
  data: {
   a: '',
   b: '',
   result: ''
  },
   methods: {
    handle: function() {
     // 实现计算逻辑
     this.result = parseInt(this.a) + parseInt(this.b);
    }
   }
 });
</script>

属性绑定

vue如何动态处理属性呢?

// v-bind指令
<a v-bind:href="url">跳转</a>

// 缩写方式
<a :href="url">跳转</a>

考察v-model指令的本质

<body>
<div id="app">
<input type="text" v-bind:value="msg" v-on:input="handle">
</div>

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

var vm = new Vue({
 el:'#app',
 data: {
  msg: 'dada',
 },
 methods: {
  handle: function(event) {
   this.msg = event.target.value;
  }
 }
})

优化:

<input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">

样式绑定

class样式处理

对象语法

<div v-bind:class="{ active: isActive }"></div>

数组语法

<div v-bind:class="{activeClass, errorClass}"></div>

数组绑定样式的语法:

<div v-bind:class="[activeClass, errorClass]'>dada</div>

var vm = new Vue({
 el: '#app',
 data: {
  activeClass: 'active',
  errorClass: 'error'
 },
 methods: {
  handle: function(){
   this.activeClass= '',
   this.errorClass= '',
  }
 }
});

对象绑定和数组绑定可以结合使用,class绑定的值可以简化操作。

v-bind:class="[activeClass, errorClass, {test: isTest}]"
// 数组的简化
arrClasses: ['active', 'erro'],

// 对象的简化
objClass: {
 active: true,
 error: true
}

style样式处理

// 对象语法
<div v-bind:style=" { color: activeColor, fontSize: fontsize }"></div>

// 数组语法
<div v-bind:style="[baseStyle, overridingStyles]"></div>

分支循环结构

v-if
v-else
v-else-if
v-show

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>

也可以用 v-else 添加一个“else 块”:

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

v-if和v-show的区别

v-if控制元素是否渲染到页面

v-show控制元素是否显示,已经渲染到了页面

循环结构

// v-for遍历数组
<li v-for="item in list">{{item}}</li>

<li v-for="(item, index) in list">{{item}}+","+{{index}}</li>

<li :key="item.id" v-for="(item,index) in list">{{item}}</li>

key的作用:帮助vue区分不同的元素,从而提高性能

v-if和v-for的使用

// v-for遍历对象
<div v-for="(value, key, index) in object"></div>

// v-if和v-for
<div v-if="value==12" v-for="(value,key,index) in object"></div>

for...in...循环不建议遍历数组,只遍历对象

实例:

Vue实现Tab选项卡

主要思路:

点击不同 tab

获取 tab 选项卡下标并为其动态绑定一个class(选中状态时的样式)

点击时使 tab 对应的内容下标与 tab 选项卡下标保持一致

使用 v-show / v-if 指令控制内容显示与隐藏

<div class="parts">
    <span @click="func('A');" v-bind:class="{'active':(active=='A') }">A</span>
    <span  @click="func('B');" v-bind:class="{'active':(active=='B') }">B</span>
    <span  @click="func('C');" v-bind:class="{'active':(active=='C') }">C</span>
</div>

<div class="block block1" v-if="block=='A'">
    A block
</div>
<div class="block block1" v-if="block=='B'">
    B block
</div>
<div class="block block1" v-if="block=='C'">
    C block
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            active:'A',
            block:'A'
        },
        filter:{
 
        },
        watch:{
 
        },
        methods: {
            func:function(c){
                this.active=C;
                this.block=C;
            }
        }
    });
</script>
<template id="tp1">
    <div id="nav">
        <ul>
            <li v-for="item in array" @click="choose(item)" :class='content===item?"pink":"blue"'>{{item}}</li>
        </ul>
        <div id="div">{{content}}</div>
    </div>
</template>
<script>
    //创建一个组件
    var component=Vue.extend({
       template:"#tp1",
        data:function () {
            return{
              content:"北京",
              array:["北京","上海","杭州","广州","深圳"]
           }
        },
        methods:{
           choose:function (item) {
            this.content=item;
           }
        }
    });
    //注册一个组件
    Vue.component("test",component);
    new Vue({
        el:"#app",
        data:{
            name:"选项卡组件案例"
        }
    });
</script>
<template>
    <div>
      <div id="tab">
        <div class="tab-tit">
          
          <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
          <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
          <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
          <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
        </div>
        <div class="tab-con">
          
          <div v-show="curId===0">
            html<br/>
          </div>
          <div v-show="curId===1">
            css
          </div>
          <div v-show="curId===2">
            javascript
          </div>
          <div v-show="curId===3">
            vue
          </div>
        </div>
      </div>
    </div>
</template>

在博客平台里,未来的路还很长,也希望自己以后的文章大家能多多支持,多多批评指正,我们一起进步,一起走花路。

非常感谢读者能看到这里,如果这个文章写得还不错,觉得「达达」我有点东西的话,觉得我能够坚持的学习,觉得此人可以交朋友的话, 求点赞👍 求关注❤️ 求分享👥 对暖男我来说真的

非常有用!!!

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info:

【作者】:Jeskson 【原创公众号】:达达前端小酒馆。 【福利】:公众号回复 “资料” 送自学资料大礼包(进群分享,想要啥就说哈,看我有没有)! 【转载说明】:转载请说明出处,谢谢合作!~

大前端开发,定位前端开发技术栈博客,PHP后台知识点,web全栈技术领域,数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持,承蒙厚爱!!!


若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的CSDN!

这是一个有质量,有态度的博客

前端技术栈

© 著作权归作者所有

达达前端
粉丝 4
博文 226
码字总数 368531
作品 0
广州
程序员
私信 提问
加载中

评论(0)

# 从零开始,采用Vue的思想,开发一个自己的JS框架(一)

前言 本系列文章将记录我尝试着去开发一个JS框架过程,毕竟也已经用了有一段时间的Vue和React,借鉴一下他们的思想(以Vue为主),试试看能否从头开始撸出一个完整的框架,也算是对Vue的一种...

梦想翻身的咸鱼
2019/07/26
0
0
Runtime Only和Runtime + Compiler

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版 当使用 vue-loader 或 vueify 的时...

神奇的小胖子
2019/10/11
0
0
为什么选择MpVue进行小程序的开发

前言 mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程...

狗尾草的博客
2018/08/01
0
0
Vue核心50讲 | 第六回:Vue 模板语法第一式 — 插值

书接上文,上一回咱们讲到了 Vue 的黑魔法 —— 模板语法,但是咱们只是解释了什么是模板语法。关于 Vue 的模板语法要怎么使用,具体又包含哪些内容,咱们现在是一概不知。那么接下来,就让咱...

全栈小白_KingJ
2019/06/05
0
0
深入Vue - 源码目录及构建过程分析

摘要: Vue源码阅读第一步。 原文:深入vue - 源码目录及构建过程分析 公众号:前端小苑 Fundebug经授权转载,版权归原作者所有。 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在...

Fundebug
2019/02/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

定时器Timer和TimerTask

为什么要使用定时器呢? 比如说一个web应用,如果这个应用规模很大,那它的日志数据是不是很多。如果一直存下来服务器的存储量怕是不行吧,需要隔一段时间删除,那么就需要一个线程每隔一段时...

南柯好萌
19分钟前
5
0
深圳创服机构创成汇投融资对接指南

深圳创服机构创成汇投融资对接指南 一线城市一直是许多创业者创业热土,深圳也不例外,作为发达城市,科技是深圳的标志,也是许多科技创业者向往之地,科技创业者在创业前期面临许多难题,其...

cchlin
32分钟前
7
0
egg学习笔记第六天:使用中间件屏蔽可疑用户

站点有时候想屏蔽一些特定频繁抓取服务器数据的用户,可以放在中间件中去做,用户在指定Ip数组内,则屏蔽,如果不在,则匹配路由规则执行controller。 中间件的概念: 匹配路由前,匹配路由完...

一生懸命吧
37分钟前
34
0
005-其他技巧

css精灵图(css雪碧)sprites 减少服务器接收和发送请求的次数,提高页面加载速度 原理:将网页中的一些小背景图整合到一张大图中 使用background-position移动背景图位置-x/y坐标 字体图标ico...

沉默的懒猫
42分钟前
15
0
YouTube视频下载:Airy for mac

想在YouTube下载视频?借助适用于Mac的AIry YouTube下载程序,您可以获得一个简单而高效的下载程序,可以在瞬间处理来自YouTube的任何曲目或播放列表。只需找到您要下载的视频,选择格式和分...

MacW软件分享
51分钟前
38
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部