VUE语法指令

# vuedemo

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```


# Vue的目录结构
    src:源码目录
    babel.config

# {{ message }}消息提示
    <div>{{ message }}</div>

    export default {
        data(){
            return{
            message:"我是一个消息"
            }
        }
    }

# v-html 标签
    <div v-html="header"></div>
    
    export default {
        data(){
            return{
            header:"<h3>我是一个标题消息</h3>"
            }
        }
    }

# :href="iwen" 链接
    <a v-bind:href="iwen">iwen</a>
    <a :href="iwen">iwen</a>

# 运算
    <p>{{ 1+5 }}</p>

# 判断显示内容 
    <p>{{ flag ? '如果true显示，孙悟空' : '如果false,显示猪八戒'  }}</p>

    export default {
        data(){
            return{
            flag:true
            }
        }
    }

# 判断文字反转
    <div>判断文字反转：{{ message.split("").reverse().join("") }}</div>

    export default {
        data(){
            return{
            header:"<h3>我是一个标题消息</h3>"
            }
        }
    }

# 判断 true 显示XXX， false 显示另外内容
#   demo01  v-if
    <div>
      <p v-if="seen">判断true显示：现在你看到我了</p>
      <p v-else>判断false显示：看到我了</p>
    </div>

    export default {
        data(){
            return{
            seen:"true
            }
        }
    }

#   demo02  v-show
    <div class="ye">
      <div>
      <p v-show="flag">标题：《溪云》</p>
      </div>
      <template v-if="flag">
        <p>锦江近西烟水绿，</p>
        <p>新雨山头荔枝熟。</p>
        <p>万里桥边多酒家，</p>
        <p>游人爱向谁家宿。</p>
      </template>
      <template v-else>
        <p>舒卷意何穷，</p>
        <p>萦流复带空。</p>
        <p>有形不累物，</p>
        <p>无迹去随风。</p>
        <p>莫怪长相逐，</p>
        <p>飘然与我同。</p>
      </template>
    </div>

    export default {
        data(){
            return{
            seen:"true
            }
        }
    }

# 列表渲染
1. v-for 数组
    <div>
      <ul>
        <li v-for="(item,index) in names" :key="index">{{ item }}</li>
      </ul>
    </div>

    export default {
        data(){
            return{
            names: ["范冰冰","张馨予","安亦然","高圆圆"]
            }
        }
    }

2. v-for 数组
    <ul id="example-1">
        <li v-for="item in items" :key="item.message">
            {{ item.message }}
        </li>
    </ul>

    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    })

3. v-for 对象
    <div>
      <p v-for="(item,name,index) in user" :key="index">{{ name }} : {{ item }}</p>
    </div>

    var example1 = new Vue({
        el: '#example-1',
        data: {
            user:{
                name: "iwen",
                age: 20,
                address: '上海',
            }
        }
    })

# 事件处理
1. 事件添加
    <div>
      <button v-on:click="clickHandle">按钮</button>
    </div>

    var example1 = new Vue({
        el: '#example-1',
        data: {
            user:{
                name: "iwen",
                age: 20,
                address: '上海',
            }
        },
        methods:{
            clickHandle(){
            console.log("点击事件");
            alert("点击事件")
            }
        }
    })

2.事件改变状态
    <div>
      <p>{{ count }}</p>
      <button v-on:click="clickHandle">按钮</button>
    </div>

    var example1 = new Vue({
        el: '#example-1',
        data: {
            user:{
                name: "iwen",
                age: 20,
                address: '上海',
            },
            count: 0
        },
        methods:{
            clickHandle(){
                this.count++
            }
        }
    })

3.事件处理方法 Event对象
    <div>
      <p>{{ count }}</p>
      <button v-on:click="clickHandle">按钮</button>
    </div>

    var example1 = new Vue({
        el: '#example-1',
        data: {
            user:{
                name: "iwen",
                age: 20,
                address: '上海',
            },
            count: 0
        },
        methods:{
            clickHandle(e){
                console.log(e);
                this.count++
            }
        }
    })

4.事件传递参数（内敛处理器中的方法）
    <div>
      <ul>
        <p>{{ name }} <input value="name" ></p>
        <li v-on:click="cliciLiHandle(item,$event)" v-for="(item,index) in names" :key="index">{{ item }}</li>
      </ul>
    </div>

    var example1 = new Vue({
        el: '#example-1',
        data: {
            user:{
                name: "iwen",
                age: 20,
                address: '上海',
            },
            count: 0
        },
        methods:{
            cliciLiHandle(value){
                console.log(value);
                this.name = value;
            }
        }
    })

5.事件修饰符
    在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
    .stop
    .prevent
    .capture
    .self
    .once
    .passive

6.对象的更新检测
    this.$set(this.user,"addrese","上海中心"),

# 计算属性值
    computed: {
                getMessage(){
                    return this.messageAS.split("").reverse().join("");
                }
            }

    this.tableData = this.tableData.concat(currentData);
        methodMessage(){
            return this.messageAS.split("").reverse(),join("");
        }

# 绑定 HTML Class
1.对象语法
    <div>
        <p :class="{ 'text': isText, 'size':isText }">hello ，我是一个样式形式</p>
        <button @click="updateClassHandle">修改样式</button>
    </div>

2.数组语法
    <p :class="['text','size',isActive]">先走的人</p>

3.数组和对象嵌套使用
    必须是数组嵌套对象，不能反转

# 绑定内联样式
    <div :style="{color:'#f0f',fontSize:size}">冯一航：花轿里的人</div>

# 表单输入绑定
1.文本
    <div>
        <input type="text" v-model="msg">
        <p>{{ msg }}</p>
    </div>

2.多行文本
    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message }}</p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>

3.复选框
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>

4.多复选框
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>

    new Vue({
        el: '...',
        data: {
            checkedNames: []
        }
    })

# 组件
1.组件的创建
    组件后缀是.vue结尾（单文件组件）
    组件组成：HTML部分 + JS部分 + CSS部分
    template：必须存在唯一的根元素

2.组件的引入
    1.导入： import MyComponent from "./components/MyComponent"
    2.注入： 
        components: {
            MyComponent
        }
    3.引用：<MyComponent />

3.样式：
    scoped:样式只在当前组件中生效

4.组件的复用
    每一次组件，就会有一个个的新实力被创建

5.data 必须是一个函数
    一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

6.组件的组织
7.通过 Prop 向子组件传递数据（组件传参）
    数组和字符串：默认值必须是工厂模式（函数）（返回）
8.自定义事件

9.插槽
    vue 实现了一套内容分发的API
    <SoltComponent>
      <h3>插槽标题</h3>
    </SoltComponent>
    <slot></slot>

    --编译作用域
    --后备内容（默认值）
    --具名插槽
    <template>
    <div>
        <slot name="header">默认值</slot>
        插槽内容
        <slot name="footer">默认值</slot>
    </div>
    </template>

    <SoltComponent>
        <template v-slot:header="slotProps">
          <h3>{{ title }}- {{ slotProps.msg }}</h3>
        </template>
        <template v-slot:footer>
          <h3>底部</h3>
        </template>
    </SoltComponent>


# 动态组件 & 异步组件
    - 动态组件
        ... HTML
        <keep-alive>
            <component :is="currentComponent"></component>
        </keep-alive>

        props:
            include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
            exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
            max - 数字。最多可以缓存多少组件实例。

    - 异步组件
        const ComponentB = () => import("./components/compose/ComponentB")


# 处理边界情况
    - 访问跟实例：$root
    - 访问父级实例：$parent

# Vue 实例
1.动画
    <template>
        <div>
            <p>======动画切换效果演示======</p>
            <button @click="flag = !flag">切换</button>
            <transition name="fade">
                <p v-if="flag">动画切换</p>
            </transition>
        </div>
    </template>

    export default {
        data(){
            return{
                flag:true
            }
        }
    }

    .fade-enter, .fade-leave-to{
        opacity: 0;
    }

    .fade-enter-to, .fade-leave{
        opacity: 1
    }

    .fade-leave-active, .fade-enter-active{
        transition: all 2s
    }