style绑定
举例:
:style="{color:,fontSize:fontSize+'px'}" :style="[style1,style2]" data(){ return{ style1:{}, //作为参数 style2:{}, //作为参数 } } //其中 activeColor/fontSize 是 data 属性
class绑定
-
:class="xxx"
-
表达式是字符串:“classA”
-
表达式是对象:{classA:isA,classB:isB}
-
表达式是数组:['classA','classB']
自定义指令
首先在标签中自定义出自己的指令比如v-cui然后在script中directives中对自定义标签cui做出操作
举例:
<div id="cui"> <div v-cui></div> </div> <script> let vm = new Vue({ el: "#cui", directives: { cui(a) { a.style.border = "1px solid red"; a.style.height = "250px"; a.style.width = "250px"; var input = document.createElement("input"); input.style.background = "pink"; input.autofocus = true; a.appendChild(input); }, }, }); </script>
cui(a)参数是指当前的标签
过滤器filter
举例:
<div>{{message | myCut | myAdd}}</div> <script> Vue.config.productionTip = false let vm = new Vue({ el: '#root', data: { message: "欢迎大家的到来" }, methods: { }, filters: { myCut(val) { // console.log(val) return val.slice(0, 4) }, myAdd(val) { // console.log(val,"###") return val + "来到北京工作" } } }) </script>
组件通信
父子传值props
子父传值$emit
父组件获取子组件属性this.$refs
子组件获取父组件的属性和方法
获取父组件的方法 this.parent.methods
获取父组件属性 this.$parents.options