Vue的内部指令(1),web前端开发新技术【附源码】_编程技术生

 v-repeof 

v-for指令基于源数据重复渲染元素。我们也可以使用$index来呈现对应数组索引。

使用v-for将得到一个特殊的作用域,类似于AngularJs的隔离作用域,我们需要明确指定props属性传递数据,否则在组件内将获取不到数据。对于组件内的<p>标签,我们可以使用<slot>

当数组数据出现变动时如何检测呢?Vue.js包装了被观察数租的变异方法,它们能触发视图更新。被包装的方法有:

1.push()

2.pop()

3.shift()

4.unshift()

5.splice()

6.sort()

7.reverse()

v-text指令可以更新元素的textContent。在内部,{{Mustache}}插值也被编译为textNode的一个v-text指令。

v-html指令可以更新元素的innerHTML。内容按普通HTML插入——数据绑定被忽略。如果想复用模板片段,则应当使用partials。

v-on指令用于绑定事件监听器。事件类型由参数指定;表达式可以是一个方法的名字或一个内联语句;如果没有修饰符,也可以省略。使用在普通元素上时,只能监听原生DOM事件;使用在自定义元素组件上时,也可以监听子组件触发的自定义事件。在监听原生DOM事件时,如果只定义一个参数,DOM event为事件的唯一参数;如果在内联语句处理器中访问原生DOM事件,则可以用特殊变量$event把它传入方法。

v-on后面不仅可以跟参数,还可以增加修饰符:

    .stop —— 调用event.stopPropagation()。      .prevent —— 调用event.preventDefault()。      .capture —— 添加事件侦听器时使用capture模式。      .self —— 只当事件是从侦听器绑定的元素本身触发时才触发回调。      .{keyCode | keyAlias} —— 只在指定按键触发回调。Vue.js提供的键值有:[esc:27、tab:9、enter:13、space:32、'delete':[8,46]、up:38、left:37、right:39、down:40]。

v-bind指令用于响应更新HTML特性,将一个或多个attribute,或者一个组件prop动态绑定到表达式。在绑定prop时,prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。修饰符为:.sync ——双向绑定,只能用于prop绑定。

.once ——单次绑定,只能用于prop绑定。  .camel ——将绑定的特性名字转换回驼峰命名。只能用于普通HTML特性的绑定,通常用于绑定用驼峰命名的SVG特性,比如viewBox。

v-ref在父组件上注册一个子组件的索引,便于直接访问。不需要表达式,必须提供参数id。可以通过父组件的$refs对象访问子组件。

当v-ref和v-for一起使用时,注册的值将是一个数组,包含所有的子组件,对应于绑定数组;如果v-for使用在一个对象上,注册的值将是一个对象,包含所有的子组件,对应于绑定对象。

v-el为DOM元素注册一个索引,方便通过所属实例的$els访问这个元素。可以用v-el:some-el设置this.$els.someEl。

v-pre编译时跳过当前元素和他的子元素。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。

v-clook指令保持在元素上直到关联实例结束编译。AngularJS也提供了相同的功能。当和CSS规则如[v-cloak]{display:none}一起使用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕,否则在渲染页面时,有可能用户会先看到Mustache标签,然后看到编译后的数据。用法如下:

最后

推荐一些系统学习的途径和方法。

Vue的内部指令(1),web前端开发新技术【附源码】_编程技术生

每个Web开发人员必备,很权威很齐全的Web开发文档。作为学习辞典使用,可以查询到每个概念、方法、属性的详细解释,注意使用英文关键字搜索。里面的一些 HTML,CSS,HTTP 技术教程也相当不错。

CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS:

Vue的内部指令(1),web前端开发新技术【附源码】_编程技术生

Vue的内部指令(1),web前端开发新技术【附源码】_编程技术生

本站由小牛团队全力维护,小牛十年了,大家已经步入中年 。本站源码全部经过团队成员测试并调试,价格可能比其它网站略贵几元钱,不解释!
小牛资源 » Vue的内部指令(1),web前端开发新技术【附源码】_编程技术生

发表评论

全站资源亲测可用,价格略高几元,不解释

立即查看 了解详情