Vue.js

v-bind 指令
<div v-bind:id="dynamicId"></div>

<!-- 绑定一个属性 -->
<!-- 完整的写法 -->
<img v-bind:src="imageSrc">

<!-- 绑定一个属性 -->
<!-- 缩写 -->
<img :src="imageSrc">

为什么有两个 class ?
    <div class="daily-menu-item"
        :class="{ on: type === 'recommend' }">分类1</div>
        
当  type === 'recommend'  为 true 的时候 , 使用 daily-menu-item.on 样式
                 
                   

<div ref="myId">                               
作用 : 给这div 加个引用
自动放到 refs 数组里
读取 : 命名规范
const $myId = this.$refs.myId;


 <button v-on:click="greet">Greet</button>
 
     文档里没有说 @click 这个是什么 , 应该 等于 v-on:click 吧
     
     应该是绑定在原生的 click 事件上的


@click 和 @click.native 的区别

Vue2.0官方文档 父子组件通讯 章节
父组件通过prop传递数据给子组件，
子组件触发事件给父组件
父组件想在子组件上监听自己的click的话，需要加上native修饰符
也就是说 , 父组件想在子组件上响应自己的 click 的话，需要加上native修饰符


如果点击子组件所触发的事件想要调用父组件的方法 , 就要写成  @click.native="a(id)"
a方法是父组件的         



action 是什么
为什么说又回到了 vuex


那复杂的情况呢

官方例子呢 ? 完整的那种 , 一步一步演化
说明功能

要稍微大一点 , 把所有功能都用上
甚至用上高级的功能


这是整合的例子

还可以在每个名词刚出现的时候 , 写一个最小的例子来解释
1 , 方便理解
2 , 后期查阅的时候很方便 , 不前后关联太紧密


一个都没有

v-bind 指令

<div v-bind:id="dynamicId"></div>

<!-- 绑定一个属性 -->

<!-- 完整的写法 -->

<img v-bind:src="imageSrc">

<!-- 绑定一个属性 -->

<!-- 缩写 -->

<img :src="imageSrc">

为什么有两个 class ?

    <div class="daily-menu-item"

        :class="{ on: type === 'recommend' }">分类1</div>

当  type === 'recommend'  为 true 的时候 , 使用 daily-menu-item.on 样式

<div ref="myId">                               

作用 : 给这div 加个引用

自动放到 refs 数组里

读取 : 命名规范

const $myId = this.$refs.myId;

 <button v-on:click="greet">Greet</button>

     文档里没有说 @click 这个是什么 , 应该 等于 v-on:click 吧

     应该是绑定在原生的 click 事件上的

@click 和 @click.native 的区别

Vue2.0官方文档 父子组件通讯 章节

父组件通过prop传递数据给子组件，

子组件触发事件给父组件

父组件想在子组件上监听自己的click的话，需要加上native修饰符

也就是说 , 父组件想在子组件上响应自己的 click 的话，需要加上native修饰符

如果点击子组件所触发的事件想要调用父组件的方法 , 就要写成  @click.native="a(id)"

a方法是父组件的         

action 是什么

为什么说又回到了 vuex

那复杂的情况呢

官方例子呢 ? 完整的那种 , 一步一步演化

说明功能

要稍微大一点 , 把所有功能都用上

甚至用上高级的功能

这是整合的例子

还可以在每个名词刚出现的时候 , 写一个最小的例子来解释

1 , 方便理解

2 , 后期查阅的时候很方便 , 不前后关联太紧密

一个都没有