聊聊：Vue中模板语法和.Sync修饰符

vue 修饰符sync的功能是：当一个子组件改变了一个 props 的值时，这个变化也会同步到父组件中所绑定。

有两组数据，一个是父组件一个是子组件，父组件有number:1000，当子组件想拥有查看权的时候，我们可以使用props传递

父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息

// 父组件
data(){
    return {
        money:1000
    }
}
// 子组件可以通过props传递这1000
props:['money']
<child :money="moeny"  />

但是当子组件使用这数据的时候，Vue会发出一个警告，我们不应该通过子组件去修改数据，这就触及到了Vue的三条规则

组件不能修改props外部数据
this.$emit可以触发事件，并传参
$event可以获取$emit的参数

这就涉及到了双向绑定，我们都知道Vue的组件都是单向绑定的，想实现双向绑定我们可以这么写

父组件

//父组件

<template>
    <div className="app">
        App.vue 我现在有 {{total}}
        <hr>
            <Child :money.sync="total"/> 
                    // 上面这句话等同于：<Child :money="total" v-on:update:money=" total = $event " />
    </div>
</template>


<script>
    import Child from "./Child.vue";
    export default {
    data() {
    return {total: 10000};
},
    components: {Child: Child}
};
</script>

子组件

//子组件

<template>
    <div class="child">
        {{money}}
        <button
        @click="$emit('update:money', money-100)">
        <span>花钱</span>
    </button>
</div>
</template>


<script>
    export default {
    props: ["money"]
};
</script>

可以看到子组件通过 @click="$emit('update:money', money-100)" 传递数据，父组件通过绑定

v-on:update:money=" total = $event " 来获取数据，但是每次这样写都是一笔大工程，

Vue就为我们提供了一个简写方法，我们只要在父组件上稍微改动一下

<Child :money.sync="total" />  ===  <Child :money="total" v-on:update:money=" total = $event " />

只要在v-bind中（money前面省略掉了v-bind）添加 .sync 修饰符，Vue就会自动帮我们监听子组件传来的参数

Vue的模板语法

Vue完整版

第一种：写在HTML里

<div id=xxx>
    {{n}}
    <button @click="add">+1</button>
</div>
 
new Vue({
    el: '#xxx',
    data:{n:0}, // data 可以改成函数
    methods:{add(){}}
})

第二种：写在选项里（注意temple里的div会替换掉div#app）

<div id=app>  </div>
 
new Vue({
    template: `
        <div>
            {{n}}
            <button @click="add">+1</button>
        </div>`,
    data: {n: 0}, // data
    methods: {
        add() {
            this.n += 1
        }
    }
}).$mount('#app')

Vue非完整版，配合xxx.vue文件

xxx.vue文件

<template>
    <div>
        {{n}}
        <button
        @click="add">
        +1
    </button>
</div>
</template>
 
<script>
    export default {
            data(){return {n:0}},// data 必须为函数，为了防止组件的复用
            methods:{add(){this.n += 1}}
           }
</script>
 
<style>这里写 CSS </style>
 
 
另一个地方引用
 
import Xxx from './xxx.vue'
// Xxx options
new Vue({
    render: h => h(Xxx)
}).$mount('#app')

模板语法：

表达式：

{{ object.a }} // 表达式

{{ n + 1 }} // 运算表达式

{{ fn(n) }} //调用函数

// 如果值为 undefined 或 null 就不显示

不常用语法：

插入HTML

data:{

x: <h1>hi</h1>

}

只展示文本

// v-pre 不会对模板进行编译

绑定属性

v-bind 可以简写成 : <img :src="x" />

除了绑定src， v-bind 也可以绑定对象

:style="{ border:'1px solid red',height:100 }" // height不用写px

绑定事件

// 可以使用 v-on 绑定

// 也可以缩写成 @click=''

条件判断

循环

// v-for(value,key) in arrays

注意：如果使用v-for，必须要绑定一个:key，否则vue会发出警告.

不建议使用- 显示，隐藏

v-show

<div v-show="true"> 我被显示了 </div>

总结：

vue模板语法的特点主要有

使用 XML 语法而不是 HTML
使用 {{ }} 插入表达式
使用 v-html v-on v-bind 等指令操作 DOM
使用v-if v-show等指令实现判断循环

指令 Directive

什么是指令？

对其他属性发出命令，就是指令，在Vue中以v-开头的都算作指令

有一些属性支持修饰符，必须 v-on

@click.stop="add" // .stop 就是修饰符 ，表示阻止事件传播/冒泡
@click.prevent="add" //表示阻止默认动作
@click.stop.prevent="add" //表示以上两种意思
 
 
@keypress.13 = "y" // 表示如果用户按下回车则会执行y函数
@keypress.enter = 'y' //alias 修改别名包括了日常的按键码:比如enter

查看修饰符alias：点击我

需要记忆的修饰符有

.stop
.prevent
.sync
.lazy
.number
.trim

posted @ 2021-02-28 15:17 蛰鸣阅读(121) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

蛰鸣

聊聊：Vue中模板语法和.Sync修饰符

公告