Vue基础
2017-11-06 12:25
204 查看
模板指令 v-if v-show 控制隐藏模板
区别:v-if是不渲染这个元素 v-show是通过css的display:none和show来控制显示隐藏的
vue实时计算computed
vue的computed就是实时计算使用,vue检测到数据发生变动时就会执行对应数据有引用的函数
如何让css只在当前组件中起作用
只需要在style中写scoped
vue循环插入图片
$remove
vuejs为观察数组添加了$remove方法,用于从目标数组中查找并删除元素,内部调用了splice( ),因此,不必:
指令v-el的使用
有时候我们想像jq一样去访问一个元素,这时候就可以用v-el指令了。给元素注册一个索引,然后通过$els去访问这个元素
关于vuejs中使用事件名
在vuejs中,我们经常要绑定一些事件,有时候给DOM元素绑定,有时候给组件绑定。绑定事件在HTML中用@:click=”event”,这时event的名字不要出现大写,因为在1.x中不区分大小写,所以如果我们在HTML写@:click=”myEvent”而在js中写myEvent就出错误,所以在vuejs的1.x绑定事件时候,要尽量避免使用大写字母。在2.0中没有该限制
父组件调用子组件的方法
v-ref:xxx
this.$refs.xxx.xx调用
v-for也可以迭代对象
v-for块中,我们拥有对父级作用域的完
4000
全访问权限,v-for支持一个可选的第二个参数作为当前的索引。
但是在对象中,第一个默认为键值,第二个参数为键名,也可以加第三个参数为索引
区别:v-if是不渲染这个元素 v-show是通过css的display:none和show来控制显示隐藏的
vue实时计算computed
vue的computed就是实时计算使用,vue检测到数据发生变动时就会执行对应数据有引用的函数
如何让css只在当前组件中起作用
只需要在style中写scoped
<style scoped></style>
vue循环插入图片
<div :for="item in items"> <img :src="item.src"/> </div>
$remove
vuejs为观察数组添加了$remove方法,用于从目标数组中查找并删除元素,内部调用了splice( ),因此,不必:
var index = this.items.indexOf(item) if (index !== -1) { this.item.splice(index, 1) } // 用$remove只需要 this.items.$remove(item)
指令v-el的使用
有时候我们想像jq一样去访问一个元素,这时候就可以用v-el指令了。给元素注册一个索引,然后通过$els去访问这个元素
// 这里注意没有引号,本人老是加上。。。。 <span v-el:msg>hello</span> this.$els.msg.textContent // hello
关于vuejs中使用事件名
在vuejs中,我们经常要绑定一些事件,有时候给DOM元素绑定,有时候给组件绑定。绑定事件在HTML中用@:click=”event”,这时event的名字不要出现大写,因为在1.x中不区分大小写,所以如果我们在HTML写@:click=”myEvent”而在js中写myEvent就出错误,所以在vuejs的1.x绑定事件时候,要尽量避免使用大写字母。在2.0中没有该限制
父组件调用子组件的方法
v-ref:xxx
this.$refs.xxx.xx调用
eg: <div @click="selectedFood">测试</div> <food v-ref:food></food> methods: { selectedFood () { this.$refs.food.show() //这个show方法是food组件的 } }
v-for也可以迭代对象
v-for块中,我们拥有对父级作用域的完
4000
全访问权限,v-for支持一个可选的第二个参数作为当前的索引。
但是在对象中,第一个默认为键值,第二个参数为键名,也可以加第三个参数为索引
<div v-for="(value, key) in object"> {{ key }}: {{ value }} </div>
<div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div> 0. firstName: John 1. lastName: Doe 2. age: 30
相关文章推荐
- vue-router 2.0 常用基础知识点之router.push()
- vue.js学习笔记第一季-基础指令集(JS胖老师课程)
- Vue2.js工程实践3:基础入门
- vue.js基础
- vue.js的使用总结(1)基础篇
- Vue基础之事件处理器
- VUE2.0 全套demo讲解 基础3(计算属性)
- vue基础总结
- vue学习第3天,基础知识,条件渲染,列表渲染,事件处理,内联样式
- vue 混合 基础篇
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- vue2.0+基础知识连载(11)--- 生命周期
- Vue.js 指南-基础
- Vue+webpack项目基础配置教程
- Vue基础知识之组件及组件之间的数据传递(五)
- VUE 入门基础(1)
- Vue基础概念,学习环境等
- vue基础学习之component
- Vue.js的学习、安装、基础语法
- Vue基础(Class 与 Style 绑定)