vue基础语法以及父子组件如何相互传值

来源：互联网发布：java要学到什么程度编辑：程序博客网时间：2024/06/05 17:23

vue模板引擎语法，关注数据层面

Mustache语法:{{msg}} 主要是用date控制
html赋值：v-html=”“
绑定属性：v-bind:id=”“
使用表达式：{OK?”yes”:”NO”}
文本赋值：v-text=”“
指令：v-if=”“
过滤器：{{message|capitalize}}和v-bind:id=”rawId|formatId”

class和style绑定

对象语法：v-bind：class=”{active:isActive,’text-danger’:hasError}”
数组语法：

data:{activeClass:"active",errorClass:"text-danger"}

style绑定-对象语法

v-bind:style="{color:activeColor,fontSize +'px'}" //activeColor和fontSize在date里面定义变量

条件渲染

v-if
v-else
v-eles-if
v-show(和v-if的区别是v-if判断是不会加载到页面，而v-show是加载到页面只是不显示)
v-cloak

vue事件处理器

v-on:click=”greet” 或许@click=”greet”
v-on:click.stop 阻止冒泡
v-on:click.stop.prevent阻止默认事件(a标签点击失灵)
v-on:click.self 给绑定对象绑定事件，对子元素是没有效果的
v-on:click.once 只能绑定一次，例如”下一步”,只能生效一次。
v-on:keyup.enter/tab/delete/esc/space/up/down/left/right

vue组件

全局组件和局部组件
父子组件通讯-数据传递 (vue允许：父给子传递数据用到plp，不允许：不能给父传递数据–可以使用Emit来操作)

VUE主张单向数据流，那怎么做到子给父传值呢

父给子传值案例：

APP.vue(父)注册子组件Counter，并定义num值，给子组件传值<template>    <div>        <Counter num="10"></Counter>    </div></template><script>    import Counter from './components/first'    export default {        data(){            return {}        },        components: {            Counter        }    }</script>

first.vue(子)接收父传的值，使用到props接收值。<template>    <div>        <button @click="increment">+</button>        <button @click="decrement">-</button>        <p><span>{{num}}</span></p>    </div></template><script>    export default {        props: ["num"],        data () {            return {                num: 0,            }        },        methods: {            increment(){                this.num++;            },            decrement(){                this.num--;            }        }    }</script>

子给父传值案例–需要通过emit操作：

APP.vue(父)在注册子组件Counter时自定义两个事件(incre和decre),并在增加increment和decrement的方法，说道底就是，父方法创建方法让子组件调用改变<template>    <div>        <Counter v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></Counter>        <p>父:{{num}}</p>    </div></template><script>    import Counter from './components/first'    export default {        data(){            return {                //给父默认为10                num:10            }        },        components: {            Counter        },        methods:{            increment(){                this.num++;            },            decrement(){                this.num--;            }        }    }</script>

//子组件使用$emit调用父组件(注意是事件名)<template>    <div>        <button @click="increment">+</button>        <button @click="decrement">-</button>        <p><span>{{num}}</span></p>    </div></template><script>    export default {        props: ["num"],        data () {            return {                num: 0            }        },        methods: {            increment(){                this.$emit('incre');            },            decrement(){                this.$emit('decre');            }        }    }</script>

阅读全文

0 0