Vue.js 学习

Posted 2022-11-25 @一支烟的功夫

Vue.js 学习（三）

过滤器(1.x版本，2.x版本不再适用)

1. 去抖动过滤器 debounce 参数（int）如keyup=”show | debounce 2000” 表示延迟2s钟执行函数show

2. 限制过滤器limitBy 参数1（限制几个） 参数2（从哪开始取）

3. 排序 orderBy 1表示正序，-1表示逆序

4. 数据过滤器 filterBy 参数 表示取出还有参数的数据

5. 自定义过滤器

Vue.filter(name,function(input))

监听数据变化

watch(name ,function())

其中name表示要监听的数据，function表示变化时的业务处理，默认为浅度监，只能，如需深度监视，添加参数deep:true,即可监视多层数据

组件

• 全局组件

var Cpp = Vue.extend(template:'<h2>我是h2</h2>'
); Vue.component('cpp',Cpp)

在组件里面放数据，必须使用函数形式，返回一个json对象

var Cpp = Vue.extend(data()
msg:"aaa"
,template:'<h2>我是h2</h2>'
); Vue.component('cpp',Cpp)

• 局部组件

放到某个组件内部

var vm=new Vue(
el:'#box',
data:
bSign:true
,
components: //局部组件
'aaa':Cpp

);

• 配合模板

1.template:'<h2 @click="change">标题2->msg</h2>'

2.单独放到某个地方

a). <script type="x-template" id="aaa">
<h2 @click="change">标题2->msg</h2>
</script>

b). <template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
val
</li>
</ul>
</template>

• 动态组件

<component :is="组件名称"></component>