自己建网站要花多少钱,管理咨询公司调研报告,seo推广薪资,网站开发网站页面指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。指令的职责是#xff0c;当表达式的值改变时#xff0c;将其产生的连带影响#xff0c;响应式地作用于 DOM。
常用指令预期简短介绍v-showany显示隐藏元素当表达式的值改变时将其产生的连带影响响应式地作用于 DOM。
常用指令预期简短介绍v-showany显示隐藏元素通过 display: none 的方式。v-ifany显示隐藏元素元素中不会渲染在 dom 中。v-forArray | Object | number | string | Iterable主要遍历对象或数组并返回当前项和索引。v-onFunction绑定事件监听器v-bindany动态绑定属性v-modelany在表单控件或者组件上创建双向绑定
v-show
主要作用是显示隐藏元素通过 display: none 的方式。当表达式成立时不做任何处理但是表达式不成立时则会给元素添加 display: none 属性。
templatediv classhomespan v-showage 100Hello World/span/div
/templatescript
export default {data() {return {age: 80}}
}
/scriptv-if
主要作用是显示隐藏元素和 v-show 类似但是 v-if 在条件不成立时不会在 DOM 中渲染该元素。
templatediv classhomespan v-ifage 100Hello World/span/div
/templatescript
export default {data() {return {age: 80}}
}
/scriptv-for
主要遍历对象或数组并返回当前项和索引当然也可以遍历数字以及字符串。使用 v-for 的时候必须要把 key 属性带上并且 key 是作为唯一值。其中 item 代表每一项的值index 代表每一项的索引值这两者都是可以自定义命名的。in list 代表需要遍历的变量名称。
遍历一维数组
templatediv classhomediv v-for(item, index) in list :keyindex{{ item }} -- {{ index }}/div/div
/templatescript
export default {data() {return {list: [xiaoming, xiaohong, libai]}}
}
/scriptxiaoming -- 0 xiaohong -- 1 libai -- 2 遍历对象数组
templatediv classhomediv v-for(item, index) in list :keyindex{{ item.name }} -- {{ item.age }}/div/div
/templatescript
export default {data() {return {list: [{name: xiaoming,age: 18},{name: xiaohong,age: 20},{name: libai,age: 22}]}}
}
/scriptxiaoming -- 18 xiaohong -- 20 libai -- 22 遍历对象
templatediv classhomediv v-for(item, index) in obj :keyindex{{ item }} -- {{ index }}/div/div
/templatescript
export default {data() {return {obj: {name: xiaoming,age: 18,like: running}}}
}
/scriptxiaoming -- name 18 -- age running -- like v-on
绑定事件监听器。在绑定的时候我们需要注意绑定的对象是原生 DOM 元素还是 Vue 的自定义组件。如果是原生 DOM 元素则会触发 DOM 事件如果是自定义组件则会触发组件内 emit 事件。v-on 的缩写是 这个比较常用。
原生 DOM 元素事件
dom 原生事件有很多但是都是固定的名称不能够自定义。例如 click input change 事件等等。
templatediv classhomebutton clickhandleClick提交/button/div
/templatescript
export default {methods: {handleClick() {alert(我被点击了)}}
}
/scriptVue 自定义组件
当子组件内部调用 emit(event1) 时则 handleClick 就会被触发。这里的 事件名是可以自定义的。
index.vue 父组件
templatediv classhomemy-child-components event1handleClick/my-child-components/div
/templatescript
import MyChildComponents from ./my-child-components.vueexport default {components: { MyChildComponents },methods: {handleClick() {console.log(我被触发了)}}
}
/scriptmy-child-components 子组件
templatediv classmy-child-componentsbutton clickhandleClick点我/button/div
/templatescript
export default {methods: {handleClick() {this.$emit(event1)}}
}
/scriptv-bind
动态绑定属性通常我们给一个 dom 元素添加属性时基本上都是固定不变的所以能通过 v-bind 可以变为动态的使得开发更加便捷。v-bind 和 v-on 一样也是有缩写的v-bind 的缩写是英文的冒号 : 这个也是比较常用的。当我们绑定属性时无论是静态还是动态有一个地方需要注意就是你绑定的元素是原生 DOM 元素还是 Vue 的自定义组件。如果是原生的 DOM 元素则没有什么影响但是如果是 Vue 的自定义属性则是可以在其组件内部通过 props 接收传入的属性哦。如果子组件中没有通过 props 接收父组件传入的动态属性则会作用到子组件的根原生 DOM 元素上。
Vue 自定义组件
index.vue 父组件
templatediv classhomemy-child-components :listlist/my-child-components/div
/templatescript
import MyChildComponents from ./my-child-components.vueexport default {components: { MyChildComponents },data() {return {list: [xiaoming, xiaohong, libai]}}
}
/scriptmy-child-components 子组件
templatediv classmy-child-components{{ list }}/div
/templatescript
export default {props: [list]
}
/script原生 DOM 元素动态属性
templatediv classhomediv :namename内容1/divdiv :class[age 100 ? big-age : small-age]内容2/divdiv :style{ width: width }内容2/div/div
/templatescript
export default {data() {return {age: 80,name: xiaoming,width: 100px}}
}
/scriptv-model
一般都是在原生 DOM 元素上并且是表单元素进行使用 v-model更高级的用法就是给 Vue 自定义组件使用 v-model 属性当然实现起来会复杂很多。想要在自定义组件上实现 v-model则必须先了解 v-model 的实现原理。
典型双向数据绑定例子
这个例子刚好也诠释了 MVVM 模式是什么效果。当我们修改数据层上 value 的值时视图上的 value 也会跟着变化。当我们通过视图中的 input 修改绑定的 value 时数据层上的 value 也会实时跟着改变。
templatediv classhomediv实时更新的值{{ value }}/divinput v-modelvalue typetext //div
/templatescript
export default {data() {return {value: }}
}
/script原文链接菜园前端
