vue中常用指令

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

根据菜鸟教程整理而来