vue 基础常用部分总结

• vue是MVVM框架，MVVM就是我们常说的双向数据绑定，M表示model，V表示view，在MVVM的框架中，model的改变会影响视图view，view视图的改变会反过来影响model.
  vm.$data/vm.$attrs/vm.$el/vm.$emit/vm.$forceUpdate/vm.$nextTick/vm.$options/vm.$parent/vm.$props/vm.$refs/vm.$root/vm.$slots/vm.$watch等
  一、绑定数据

<template>
  <div>
    <h1>{{ message }}</h1>

    <p>绑定对象：{{ userinfo.username }}--{{ userinfo.age }}</p>

    <p>绑定html: <span v-html="h2"></span></p>

  </div>
</template>
<script>
export default {
    data() {
        return {
            message: "vue",
            userinfo: {
                username: "张三",
                age: "20",
            },
            h2: "<h2>vue 我是一个html标签</h2>"
        }
    }
}
</script>

二、绑定属性

<template>
  <div>
    <img v-bind:src="logoSrc" alt="logoSrc" />

    <br />
    <img :src="logoSrc" alt="logoSrc" />

    <br />
    <div title="vue">鼠标放上去试试1</div>

    <br />
    <div :title="title">鼠标放上去试试2</div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            logoSrc: "https://www.itying.com/themes/itying/images/logo.gif",
            title: "自定义属性值"
        }
    }
}
</script>

三、绑定动态属性

<template>
  <div>
    <a v-bind:[myHref]="'http://www.baidu.com'">跳转百度</a>
    <br />

    <a :[myHref]="myLink">跳转到myLink</a>
  </div>
</template>
<script>
export default {
    data() {
        return {
            myHref: "href",
            myLink: "http://www.itying.com"
        }
    }
}
</script>

四、循环遍历数组

<template>
  <div>
    <ul>
        <li v-for="(item, index) in list1" :key="index">
            {{ item }}--{{ index }}
        </li>
    </ul>

    <br />

    <ul>
        <li v-for="(item, index) in list2" :key="index">
            {{ item.title }}
        </li>
    </ul>

    <br />
    <br />
    <ul>
        <li v-for="(item, index) in list3" :key="index">
            {{ item.cate }}
            <ol>
                <li v-for="(i, k) in item.list" :key="k">
                    {{ i.title }}
                </li>
            </ol>
        </li>
    </ul>
  </div>
</template>
<script>
export default {
    data() {
        return {
            list1: ["张三", "李四", "王五"],
            list2: [{
                    title: "张三111",
                },
                {
                    title: "张三2222",
                },
                {
                    title: "张三3333",
                },
                {
                    title: "张三444",
                },
            ],
            list3: [{
                    cate: "国内新闻",
                    list: [{
                            title: "国内新闻11111",
                        },
                        {
                            title: "国内新闻2222",
                        },
                    ],
                },
                {
                    cate: "国际新闻",
                    list: [{
                            title: "国际新闻11111",
                        },
                        {
                            title: "国际新闻2222",
                        },
                    ],
                },
            ],
        }
    }
}
</script>

五、循环遍历对象

<template>
  <div>
    <ul>
        <li v-for="(value, attr, index) in myObject" :key="index">
            {{ attr }}---{{ value }}--{{ index }}
        </li>
    </ul>
  </div>
</template>
<script>
export default {
    data() {
        return {
            myObject: {
                title: "study Vue",
                author: "liang",
                publishedAt: "2021-05-22",
            }
        }
    }
}
</script>

六、绑定事件
// event, $event
// 事件修饰符：stop, prevent, capture, self, once, passive
// 按键修饰符：enter, tab, delete, esc, up, down, left, right
// 鼠标修饰符：left, right, middle
// 精确修饰符：exact

<template>
  <div>
    <h3>{{title}}</h3>
    <button v-on:click="setTitle('111')">设置Title的值1</button>
    <br>
    <br>
    <button v-on:click="setTitle('2222')">设置Title的值2</button>
    <button v-on:click="changeClass()">改变class</button>
    <br />
    <button @click="changeClass()">改变class</button>
    <br />
    <div :class="myClass"></div>

    <button @click="run()">执行run方法实现方法调用方法</button>
    <br>
    <button data-aid="123" @click="eventFn($event)">事件对象</button>
    <br>
    <br>
    <button @click="warn('传入的参数', $event)">
        Submit
    </button>
    <br>
    <br>
    <button @click="one(),two(),changeClass()">
        点击按钮一次执行多个方法
    </button>
    <br>
    <br>
    <a href="http://www.baidu.com" target="_blank" @click="afn1($event)">跳转链接1</a>
    <br><br>
    <a href="http://www.baidu.com" target="_blank" @click.prevent="afn2()">跳转链接2</a>

    <br>
    <br>
    <input type="text" @keyup="doSearch1($event)">
    <br> <br>
    <input type="text" @keyup.enter="doSearch2()" />
  </div>
</template>
<script>
export default {
    data() {
        return {
            myClass: "red"，
            msg: "学习vue",
            title: "我是一个标题"
        }
    },
    methods: {
        getMsg() {
            alert(this.msg)
        },
        setTitle(data) {
            this.title = data;
        },
        changeClass() {
            this.myClass = "blue";
        },
        run() {
            this.changeClass()
        },
        eventFn(e) {
            console.log(e);
            e.srcElement.style.background = "red";
            //获取自定义属性
            console.log(e.srcElement.dataset.aid);

            // e.preventDefault();
            // e.stopPropagation();
        },
        warn(message, event) {
            console.log(event);
            if (event) {
                event.preventDefault()
            }
            alert(message)
        },
        one() {
            console.log("one");
        },
        two() {
            console.log("two");
        },
        afn1(e) {
            e.preventDefault();
        },
        afn2() {

        },
        doSearch1(e) {
            console.log(e)
            console.log(e.keyCode)
            if (e.keyCode == 13) {
                alert("按了回车键")
            }
        },
        doSearch2() {
            alert("按了回车键")
        },
    },
}
</script>

七、class、style绑定多个动态属性

<template>
  <div>
    <div :class="{ active: isActive, red: isRed }">div</div>

    <div class="blue" :class="{ active: isActive }">div</div>

    <br />

    <div :class="[errorClass, baseClass]">div</div>

    <br />

    <div :class="[flag ? baseClass : errorClass]">三目运算绑定class</div>
    <h2>绑定多个style</h2>

    <br>
    <div :style="'color:'+color">
        绑定style
    </div>
    <br>

    <div :style="{'color':activeColor,'fontSize':fontSize}">
        绑定多个style
    </div>
    <br>
    <div :style="styleObject">
        绑定多个style
    </div>
    <br>
    <br>

    <div :style="[baseStyles,orangeStyle]">
        绑定多个style
    </div>
    <br>
    <ul>
        <li v-for="(item,index) in list" :key="index" :class="{'aaa':index==0,'bbb':index==1}">
            {{item}}
        </li>
    </ul>
    <br>

    <ul>
        <li v-for="(item,index) in list" :key="index" :style="[index==0?styleRed:null,index==1?styleBlue:null]">
            {{item}}
        </li>
    </ul>
  </div>
</template>
<script>
export default {
    data() {
        return {
            isActive: true,
            isRed: false,
            errorClass: "error",
            baseClass: "base",
            flag: true,
            color: "red",
            activeColor: "blue",
            fontSize: "20px",
            styleObject: {
                color: 'red',
                fontSize: '43px'
            },
            baseStyles: {
                 "100px",
                height: "100px",
                fontSize: '18px'
            },
            orangeStyle: {
                background: "orange"
            },
            list: ['张三', '李四', '王五', '张三1', '李四1', '王五1'],
            styleRed: {
                color: 'red',
            },
            styleBlue: {
                color: 'blue',
            },
        }
    },
    methods: {
        changeClass() {
            this.myClass = "blue";
        },
    },
}
</script>
<style scope>
.base {
     300px;
    height: 300px;
}

.active {
    display: block;
    font-size: 30px;
    color: orange;
}

.error {
    background: orange;
    font-size: 30px;
    color: red;
}

.red {
    background: red;
     100px;
    height: 100px;
}

.blue {
    background: blue;
     100px;
    height: 100px;
}

.aaa {
    color: red;
}

.bbb {
    color: blue;
}
</style>

八、ref和双向数据绑定
// input, textarea, checkbox, radio, select
// 修饰符 lazy, number, trim

<template>
    <div>
        <h2>人员登记系统</h2>

        <!-- <div class="people_list">
            <ul>
                <li>姓 名： <input type="text" id="username" /></li>

                <li>年 龄： <input type="text" ref="age" /></li>
            </ul>

            <button @click="doSubmit()" class="submit1">获取表单的内容</button>
        </div> -->

        <div class="people_list">
            <ul>
                <li>姓 名： <input type="text" v-model="userinfo.username" /></li>

                <li>年 龄： <input type="text" v-model="userinfo.age" /></li>

                <li>性 别：
                    <input type="radio" name="sex" id="sex1" value="1" v-model="userinfo.sex"> <label for="sex1">男</label>

                    <input type="radio" name="sex" id="sex2" value="2" v-model="userinfo.sex"> <label for="sex2">女</label>

                </li>

                <li> 城 市:

                    <select v-model="userinfo.city">
                        <option v-for="(item,index) in userinfo.cityList" :key="index" :value="item">{{item}}</option>
                    </select>
                </li>
                <li> 爱 好：
                    <span v-for="(item,index) in userinfo.hobby" :key="index">
                        <input type="checkbox" :id="'ch_'+index" v-model="item.checked" />
                        <label :for="'ch_'+index">{{item.title}}</label>
                    </span>

                </li>
                <li> 备注：
                    <textarea cols="30" rows="4" v-model="userinfo.mark"></textarea>

                </li>

            </ul>

            <button @click="doSubmit()" class="submit">获取表单的内容</button>

            <br>
            <br>
            <pre>{{userinfo}}</pre>
        </div>

    </div>
</template>
<script>
export default {
    name: "Register",
    props: {},
    data() {
        return {
            username: "zhangsan",
            userinfo: {
                username: "",
                age: "",
                sex: "1",
                cityList: ["北京", "上海", "深圳"],
                city: "上海",
                hobby: [
                    {
                        title: "吃饭",
                        checked: false
                    },
                    {
                        title: "睡觉",
                        checked: false
                    },
                    {
                        title: "写代码",
                        checked: true
                    }
                ],
                mark: ""
            }
        }
    },
    methods: {
        // doSubmit1() {
        //     // 原生js
        //     var usernameObj = document.querySelector("#username")
        //     console.log(usernameObj.value)
        //     /**
        //      * 1、定义ref <iniput type="text" ref="age"
        //      * 2、this.$refs.名称
        //      */
        //     console.log(this.$refs)
        //     console.log(this.$refs.age.value)
        // }

        doSubmit() {
            console.log(this.userinfo)
        }
    }
}
</script>
<style scope>
ul {
    list-style-type: none;
}

h2 {
    text-align: center;
}

.people_list {
     400px;
    margin: 40px auto;
    padding: 40px;
    border: 1px solid #eee;
}

.people_list li {
    height: 50px;
    line-height: 50px;
}

.submit {
    float: right;
    margin-top: 10px;
}
</style>

九、JavaScript表达式、条件判断、计算属性、watch侦听
computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存
computed 和 watcher 都能实现的功能，建议使用 computed 因为更加简洁

<template>
    <div>
        <h3>1、Vue3.x模板中使用JavaScript表达式</h3>

        <div>
            {{ a + 3 }}
            <br />
            {{ a * 3 }}
            <br />
            {{ a - 3 }}
            <br />
            {{ flag ? "this is true" : "this is false" }}
            <br />
            {{ flag ? name1 : name2 }}
            <br />
            {{ message.split("").reverse().join("") }}
        </div>

        <h3>2、 v-if v-else v-else-if v-show</h3>

        <div>
            <div v-if="flag == true">this is true</div>
            <br>

            <span v-if="flag == true">this is true</span>
            <span v-else>this is false</span>

            <br>

            <span v-if="Math.random()>0.5">
                大于0.5
            </span>
            <span v-else>
                小于0.5
            </span>

            <br>
            <div v-if="type=='A'">A</div>
            <div v-else-if="type=='B'">B</div>
            <div v-else-if="type=='C'">C</div>
            <div v-else>Not A/B/C</div>

            <br>
            <template v-if="flag">
                <hr>
                <span>这是一个sapn</span>
                <div>这是一个div</div>
                <hr>
            </template>
        </div>

        <h3>4、 计算属性</h3>

        <div>
            {{reverseMsg}}
            <br>
            <button @click="setMsg()">改变msg的值</button>

            <br>
            <hr>
            <input type="text" v-model="keyword" placeholder="请输入关键词" />
            <ul>
                <li v-for="(item,index) in searchData" :key="index">{{item}}</li>
            </ul>
        </div>

        <h3>5、 watch监听数据变化</h3>

        <div>
            <input type="text" v-model="firstName" placeholder="firstName">
            <br>
            <input type="text" v-model="lastName" placeholder="lastName">
            <br>
            {{fullName}}

            <br>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            a: 12,
            flag: false,
            message: "三国演义",
            name1: "张三",
            name2: "李四",
            type: "N",
            listData: ["apple", "banana", "orange", "pear"],
            keyword: "",
            firstName: "",
            lastName: "",
            fullName: ""
        }
    },
    methods: {
        setMsg() {
            this.message = "大家好"
        }
    },
    computed: {
        reverseMsg() {
            return this.message.split("").reverse().join("")
        },
        searchData() {
            var tempArr = []
            this.listData.forEach((value) => {
                if (value.indexOf(this.keyword) !== -1 && this.keyword !== "") {
                    tempArr.push(value)
                }
            })
            console.log(tempArr)
            return tempArr
        }
        // fullName() {
        //     return this.firstName + " " + this.lastName
        // }
    },
    watch: {
        firstName: function (value) {
            this.fullName = value + " " + this.lastName
        },
        lastName: function (value) {
            this.fullName = this.firstName + " " + value
        }
    }
}
</script>

<style scope>
</style>

十、插槽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>study</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // slot 插槽
  // slot 中使用的数据，作用域的问题
  // 父模版里调用的数据属性，使用的都是父模版里的数据
  // 子模版里调用的数据属性，使用的都是子模版里的数据
  // 具名插槽
  const app = Vue.createApp({
    template: `
      <layout>
        <template v-slot:header>
          <div>header</div>
        </template>
        <template v-slot:footer>
          <div>footer</div>
        </template>
      </layout>
    `
  });

  app.component('layout', {
    template: `
      <div>
        <slot name="header"></slot>
        <div>content</div>
        <slot name="footer"></slot>
      </div>
    `
    // 或 <slot #header></slot>
  });

  const vm = app.mount('#root');
</script>
</html>

作用域插槽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>study</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // 作用域插槽
  const app = Vue.createApp({
    template: `
      <list v-slot="{item}">
        <div>{{item}}</div>
      </list>
    `
  });

  app.component('list', {
    data() {return {list: [1, 2, 3]}},
    template: `
      <div>
        <slot v-for="item in list" :item="item" />
      </div>
    `
  });

  const vm = app.mount('#root');
</script>
</html>

十一、异步组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>study</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // 动态组件: 根据数据的变化，结合 compoent 这个标签，来随时动态切换组件的现实
  // 异步组件: 是异步执行某些组件的逻辑，这叫做异步组件

  const app = Vue.createApp({
    template: `
      <div>
        <common-item />
        <async-common-item />
      </div>
    `
  });

  app.component('common-item', {
    template: `<div>hello world</div>`
  });

  app.component('async-common-item', Vue.defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          template: `<div>this is an async component</div>`
        })
      }, 4000)
    })
  }))

  const vm = app.mount('#root');
</script>
</html>

十二、其它

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>study</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // v-once 让某个元素标签只渲染一次
  // ref 实际上是获取 Dom 节点 / 组件引用 的一个语法
  // provide / inject
  const app = Vue.createApp({
    data() {
      return { count: 1}
    },
    provide() {
      return {
        count: this.count,
      }
    },
    template: `
      <div>
        <child :count="count" />
        <button @click="count += 1">Add</button>
      </div>
    `
  });

  app.component('child', {
    template: `<child-child />`
  });

  app.component('child-child', {
    inject: ['count'],
    template: `<div>{{count}}</div>`
  });

  const vm = app.mount('#root');
</script>
</html>

十三、

持续更新中......