大家好，从今天开始，会每天分享vue学习的知识点，一起加油~

①首先，牢记三个单词 bind绑定，property属性，mount挂载

1、Vue概述

1.1 特点

尤雨溪创造，V2 与 V3流行
Vue是一套用于构建用户界面的渐进式框架
结合了angular的指令与react的组件，虚拟dom

1.2 优点

中文文档完备，生态丰富（插件多），上手简单
指令，组件，虚拟dom

2、导入与实例化

step1 引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

或者引入  

<script src="./js/vue.js"></script>  //需要在目录下放vue.js 文件

step2 模板

<!--模板 -->
<div id="app">
    <h1>{{msg}}</h1>
</div>

step3 实例化

<script>
//实例化
new Vue({
    el:"#app",
    //指定模板返回（element）
    data:{
        msg:"你好~Vue"//指定数据
}
     
})
//el 与data 都是固定写法
</script>

3、指令与模板

指令就是v开头的特殊属性，它的值预期为JavaScript单行表达式。

指令是联系模板与vue实例的桥梁。

3.1特点

可以渲染实例的值 v-text=”msg”
可以使用数学运算v-text=”2+3″
可以使用js表达式v-text=”msg.length”
如果是文本，需要加单引号v-text=” ‘我在中国。’ + msg”

4、vue的实例

var vum = new Vue({...})

//vm就是new Vue创建的实例

5、文本渲染指令

{{}}

<body>
<div id="app">
    <p>{{msg}}</p>
    <p>{{2+3}}</p>
    <h1>{{2+3}}</h1>
    <h2>{{msg.split('').reverse().join(' ')}}</h2>
    <h3>{{2+3>8?'大于':'小于'}}</h3>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
    el:"#app",
    data:{
        msg:"人生若如初见！"
}

})

</script>
</body>

v-text

<body>
    <div id="app">
        <p v-text="msg"></p>
        <h1 v-text="2+3"></h1>
        <h2 v-text="msg.split('').reverse().join(' ')"></h2>
        <h3 v-text="2+3>8?'大于':'小于'"></h3>
        <h4 v-text="'我在学前端。'+msg"></h4>
        <h5 v-text="msg.length"></h5>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "人生若如初见~"
            }
        })
        console.log(vm);  // vm是new  Vue创建一个实例
         //v-text 指令   指令是带有v-前缀的特殊属性
        // 01 渲染 vue的数据
        //02 数学运算
        //03执行js的普通方法split分割，reverse翻转数组，join连接数组为字符串
        //04三元运算（不能使用if ,for等多行命令）
</body>

v-html

<body>
    <div id="app">
        <p v-text="msg"></p>
        <p v-html="msg"></p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "人生若如<strong>初见</strong>~"
            }
        })
        console.log(vm);  // vm是new  Vue创建一个实例
    </script>
</body>

6、条件渲染指令

v-if

<body>
    <div id="app">
        <h1>武林大会</h1>
        <p v-if="score > 90">好徒儿，师妹就托付给你了~~~</p>
        <p v-else>去面壁思过三月</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                score: 35,
            }
        })
    </script>
</body>

v-else

<body>
    <div id="app">
        <h1>武林大会{{score}}</h1>
        <h2 v-if="score >= 90">独孤九剑</h2>
        <h2 v-else-if="score >= 80">葵花宝典</h2>
        <h2 v-else-if="score >= 70">三分归元气</h2>
        <h2 v-else-if="score >= 60">小师妹嫁给你</h2>
        <h2 v-else>赶出师门</h2>
        <input type="text" v-model="score">
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                score: 35
            }
        })
// 90以上  独孤九剑
//80以上，葵花宝典
//70以上，三分归元气
//60以上，小师妹嫁给你
//其他，赶出师门
    </script>

</body>

v-else-if

<body>
    <div id="app">
        <h1>武林大会{{score}}</h1>
        <h2 v-if="score >= 90">独孤九剑</h2>
        <h2 v-else-if="score >= 80">葵花宝典</h2>
        <h2 v-else-if="score >= 70">三分归元气</h2>
        <h2 v-else-if="score >= 60">小师妹嫁给你</h2>
        <h2 v-else>赶出师门</h2>
        <input type="text" v-model="score">
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                score: 35
            }
        })
// 90以上  独孤九剑
//80以上，葵花宝典
//70以上，三分归元气
//60以上，小师妹嫁给你
//其他，赶出师门
    </script>

</body>

v-show

<body>
    <div id="app">
        <h1> v-show 和 v-if 区别</h1>
        <p v-if="flag">你好 我是v-if</p>
        <p v-show="flag">hello 我是v-show</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                flag: false,  //隐藏
                // flag: true,   //会显示

            }
        })

    </script>

</body>

特点：

隐藏元素以css方式

频繁切换用v-show

少量切换用v-if

【面试题】 v-if 与 v-show 区别

1.都是用来控制显示与隐藏

2.v-if是通过dom操作实现隐藏，v-show通过css方式隐藏

3.频繁切换用v-show ,少量切换用v-if

7、遍历指令

v-for

<body>
    <div id="app">
        <h1> v-for</h1>
        <p v-for="item in list">{{item}}</p>
        <ul>
            <li v-for="(item,index) in list">{{index+1}}--{{item}}</li>
        </ul>
        <p v-for="item in list" v-key="item">{{item}}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: ["Vue", "React", "Angular"]
            }
        })
// v-key 指令 vue在渲染列表的时候更加优化，v-key的值必须是唯一的
// 不建议用随机或者index
    </script>

</body>

v-for代码运行结果

v-for特殊用法

<body>
    <div id="app">
        <h1> v-for</h1>
        <!-- 遍历数字 -->
        <p v-for="item in 10">{{item}}</p>
        <!-- 遍历对象 -->
        <p v-for="item in obj">{{item}}</p>
        <h3 v-for="(item,key) in obj" :v-key="key">{{key}}:{{item}}</h3>
        <!-- 遍历字符串 -->
        <h1 v-for="item in str">{{item}}</h1>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                str: "人生若如 初见~~",
                obj: {
                    name: "xian",
                    sex: "nan",
                    fensi: "tibbxli"
                },
            }
        })
// v-key 指令 vue在渲染列表的时候更加优化，v-key的值必须是唯一的
// 不建议用随机或者index
    </script>

</body>

v-for特殊用法运行结果

v-bind:key

值必须是唯一
为了让Vue更好的优化渲染列表

8、属性绑定

v-bind

使用v-bind 指令给html标签动态的绑定属性
:title 是 v-bind:title的简写
:id是v-bind:id 的简写
:key是v-bind:key的简写

<body>
    <div id="app">
        <h1>属性绑定</h1>
        <h1 v-bind:title="str" v-bind:id="s1"> attribute</h1>
        <button :title="str1" :id="s2" :key="'A'">按钮</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                str: "我爱china",
                str1: "这是个简写",
                s1: "myid",
                s2: "myBtnid"
            }
        })
// v-bind 指令
//：title 指令的参数
//str 指令的值
    </script>

</body>

v-bind运行结果

9、事件绑定

v-on

可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。
v-on:click=” ” 的简写是 @click=” ”

<body>
    <div id="app">
        <h1>事件绑定</h1>
        <button v-on:click="num--">{{num}}</button>
        <!-- v-on简写 -->
        <button @click="num+=2">{{num}}</button>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                num: 1
            }
        })
    </script>

</body>

10、案例选项卡

css样式

<style>
        .box {
            width: 350px;
            height: 350px;
            border: 1px solid tomato;
        }

        .active {
            color: tomato;
            font-weight: 900;
        }
</style>

js 和 html

<body>
    <div id="app">
        <h1>选项卡</h1>
        <!-- @click 是 v-on:click 的简写 -->
        <!-- :class 是 v-bind:class 的简写 -->
        <button v-on:click="num=1" :class="num==1?'active':''">Vue</button>
        <button @click="num=2" :class="num==2?'active':''">React</button>
        <button @click="num=3" :class="num==3?'active':''">angular</button>
        <div class="box" v-show="num==1">
            Vue的文章列表
        </div>
        <div class="box" v-show="num==2">
            React的文章列表
        </div>
        <div class="box" v-show="num==3">
            angular的文章列表
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <script>
        new Vue({
            el: "#app",
            data: {
                num: 1
            }
        })
    </script>
</body>

今天的分享就到这里了~