初识Vue.js（五）
5.1 基本指令
v-clock不需要表达式，它会在Vue实例结束编译时从绑定的HTMl元素上移除，经常和CSS的display:node;配合使用。
在一般情况下，v-clock是一个解决初始化man导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。
v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只能被渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。例如
<body><div id="app"><span v-once>{{message}}span><div v-once><span>{{message}}span>div>div><script src="https://unpkg.com/vue/dist/vue.js">script><script>var app=new Vue({el:'#app',data:{message:'这是一段文本'}})script>body>
5.2 条件渲染指令
5.2.1 v-if、v-else-if、v-else
与JavaScript的条件语句相似，Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，例如：
<body><div id="app"><p v-if="status===1">当status为1时显示该行p><p v-else-if="status===2">当status为2时显示该行p><p v-else>否则显示该行p>div><script src="https://unpkg.com/vue/dist/vue.js">script><script>var app=new Vue({el:'#app',data:{status:1}})script>body>
v-else-if 要紧跟v-if，v-else要紧跟v-else-if或v-if，当前元素、组件以及所有子节点将被渲染，为假时将被移除。如果一次判断的是多个元素，可以在Vue.js内置的元素上使用条件指令，最终渲染的结果不会该元素。
5.2.3 v-show
v-show的用法与v-if基本上一致，只不过v-show是改变元素的CSS属性display。当v-show的表达式的值为false时，元素会隐藏。
例如：
<body><div id="app"><p v-show="status===1">显示p>div><script src="https://unpkg.com/vue/dist/vue.js">script><script>var app=new Vue({el:'#app',data:{status:2}})script>body>
查看DOM结构会看到元素上加载了内联样式display：none；
显示
5.2.3 v-if 与v-show的选择
v-if和v-show有同样的功能，不过v-if才是真正的条件渲染，它会根据表达式适当的销毁或重建元素以及绑定的事件或子组件，若表达式初始值为false，则一开始元素、组件并不会渲染，只有当条件第一次变为真时才开始编译。
而v-show只是简单的css属性切换，无论条件真与否，都会被编译，相比之下，v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show适用于频繁切换条件。
5.3 列表渲染指令v-for
当需要将一个数组遍历或枚举一个对象循环显示的时候，就会用到列表渲染指令v-for。它的表达式需要结合in来使用，类似item in items的形式。
- {{book.name}}
在表达式中，books是数据，book是当前数组元素的别名，循环出的每个列表内的元素都可以访问到对应的当前book。列表渲染也支持of来代替in作为分隔符，它更接近JavaScript迭代器的语法：
{{book.name}}
v-for的表达式支持一个可选参数作为当前项的索引，也可以用在内置标签<**template>**上，将多个元素进行渲染。除了数组外，对象的属性也是可以遍历的，遍历对象属性的时候，有两个可选参数，分别是键名和索引
- {{index}-{{key}}:{value}}
v-for还可以迭代整数
{{n}}
5.3.2 数组更新
Vue的核心是数据与视图的双向绑定，当我们修改数组的时候，Vue会检测到数据变化，所以v-for渲染的视图会立即更新。Vue包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新。
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- resverse()
使用以上方法会改变这些方法调用的原始数组，有些方法不会改变原数组，而是生成一个新的数组.
filter(),concat(),slice()，在使用这些非变异方法的时候，可以用新数组来替换原数组。
Vue在检测到数组变化时，并不是直接重新渲染真个列表，而是最大化的复用DOM元素，替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心性能问题。
需要注意的是，以下变动的数组中，Vue是检测不到的，也不会触发视图更新。
- 通过索引直接设置项，比如app.books[3]={…}
- 修改数组长度，比如app.length=1.
5.3.3 过滤与排序
- 过滤器就是可以对我们的数据进行添油加醋然后再显示
- 过滤器有全局过滤器和组件内的过滤器
- 全局过滤器Vue.filter(‘过滤器名’,过滤方式fn );
- 组件内的过滤器 filters:{ ‘过滤器名’,过滤方式fn }
- {{ msg | 过滤器名}}
- 最终都是在过滤方式fn里面return产出最终你需要的数据
vue中的this是vue封装好给我们使用的，跟平常方法里面的this是不同的
注意：过滤器中方法的引号不能省略。
过滤器
我输入的：我输出的：{{ instring }}{{ instring | reversal('翻转输出：')}}
当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组。
例如
<body><div id="app"><ul><template v-for="book in filterBooks"><li>书名：{{book.name}}li><li>作者：{{book.author}}li>template>ul> div><script src="https://unpkg.com/vue/dist/vue.js">script>
<script>new Vue({el: '#app',data: {books: [{name:'《Vue.js实战》',author:'尤雨溪'},{name:'《Java实战》',author:'许致远'},{name:'《C#实战》',author:'许晨'}]},computed:{filterBooks:function(){return this.books.filter(function(book){return book.name.match(/Java/); });}}})
script>body>
在Vue.js 2.x中废弃了1.x中内置的limitBy、filterBy和orderBy过滤器，统一使用计算属性来实现。
5.4 方法与事件
5.4.1 基本用法
我们已经引入了Vue事件处理的概念V-on，在事件绑定上，类似原生的JavaScript的OnClick写法，也是在HTML上进行监听的。例如，我们写监听一个按钮的点击事件，设置一个计数器，每次都加1：
<body><div id="app">点击次数：{{counter}}<button @click="counter++">+1button>div><script src="https://unpkg.com/vue/dist/vue.js">script>
<script>new Vue({el: '#app',data: {counter:0}})
script>body>
@click的表达式可以直接使用JavaScript语句，也可以是一个在Vue实例中methods选项内的函数名字，比如对上例进行扩展，再增加一个按钮，点击一次，计数器加10；
<body><div id="app">点击次数：{{counter}}<button @click="handleAdd()">+1button><button @click="handleAdd(10)">+10button>div><script src="https://unpkg.com/vue/dist/vue.js">script>
<script>new Vue({el: '#app',data: {counter:0},methods:{handleAdd:function(count){count=count||1;this.counter+=count;}}})
script>body>
这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违背分离的原理，实则正好相反，因为通过HTML就能知道调用的是那个方法，将逻辑与DOM解耦，便于维护。最重要的是，当ViewModel销毁时，所有的事件处理器会自动删除，无需自己清理。
Vue提供了一个特殊变量$event,用于访问原生DOM事件。
5.4.2 修饰符
Vue支持以下修饰符
- stop
- prevent
- capture
- self
- once
在表单元素上监听键盘事件时，还可以使用键盘修饰符，比如调用某个键时才调用某个方法。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！