html代码中指令
m代指vue中设置的值
f代指vue中设置的方法
s代指字符
指令 | 描述 | 备注 |
---|---|---|
{{}} | 文本插入 | 支持正则表达式,逻辑判断,数学 |
v-html | 输出html代码 | |
v-bind: 缩写为: | 根据bind后面条件(:逻辑判断+添加)设置html属性的值 | v-bind:${html属性}="{‘s’ ${标识符(:或+)} m}" |
v-if v-else v-else-if | 逻辑 | 逻辑判断 |
v-for | 循环 | for还可以使用v-for="(value, key, index) in object" v-for=“n in 10” 1-10 |
v-show | 显示 | 为true则显示,false不显示 |
v-model | 双向绑定 | 用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。 |
v-on: 缩写为@ | 监听事件 | |
| | 过滤器,可以串联(m|f|f),过滤器也可以接受参数 | 需要在vue的filers属性中定义${capitalize }过滤格式 filters: { capitalize: function (value) { if (!value) return ‘’ value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } |
js中new Vue({})中的指令
tagName:组件或指令名称
options:配置
指令 | 描述 | 备注 |
---|---|---|
el | 绑定html标签ID | |
data | 参数 | |
computed | 计算属性 | 使用时跟普通vue的data参数一样(跟methods差不多,只是有缓存) |
methods | 方法属性 | 使用时跟普通vue的data参数一样(跟computed差不多,只是无缓存,每次调用时都调用方法) |
watch | 监听属性 | vm.$watch(‘kilometers’, function (newValue, oldValue) // 这个回调将在 vm.kilometers 改变后调用 |
components: { tagName, options } | 局部组件 | 将只在父模板可用 |
directives:{tagName, options} | 局部指令 | // 注册一个局部的自定义指令 v-focus |
js中new Vue({})外使用
父属性_子属性
tagName:组件或指令名称
options:配置
指令 | 描述 | 备注 |
---|---|---|
Vue.component(tagName, options) | 注册组件 | |
component_Prop | 子组件用来接受父组件传递过来的数据的一个自定义属性 | component中options的属性 |
component_$on(eventName) | 监听事件 | 用于html页面上,绑定自定义组件事件 |
component_$emit(eventName) | 触发事件 | 用于制定触发自定义事件名称 |
Vue.directive(tagName, options) | 自定义指令 | |
mixins | 与new Vue({})中的属性混入 | var myMixin = { created: function () { this.startmixin() }, methods: { startmixin: function () { document.write(“欢迎来到混入实例”); } } }; |
var vm=new Vue({
el: '#vue_det',
data: {
name: "kittlen",
}
})
vm.key:获取vue中定义的值
vm.name
vm.$key:获取vue中定义的属性的值
vm.$data