Vue初始

一、安装 https://cn.vuejs.org/ 官方网站

二、简单实用示例

Vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。

首先创建一个vue实例，并在创建实例的过程中传入一个对象。

该对象的第一个属性名为el，它的值是我们需要渲染的目标标签，我们通过属性查找定位这个标签。

该对象的第二个属性名为data，里面就是我们要渲染给浏览器标签的数据，

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>标题</title>
    <script src="static/vue.min.js"></script>      <!--引用vue-->

</head>
<body>

<div id="d1">
    <h1>{{greeting}}</h1>
    <h3>{{app}}</h3>
</div>
<script>
    // 普通插入文本方法
    // let d1 = document.getElementById("d1");  //获取元素
    // d1.innerText = "hello word"  // 文本添加上 hello word 文字
    
    //数据模板引擎
    // Vue插入文本方法
    new Vue(
        {
            el: "#d1",  // 获取元素
            data: {
                greeting: "hello word",   //在元素内添加使用对应的key 之后就应用上value数据
                app: "hello Vue"   //  在元素内使用 相互对应
            }
        }
    )


</script>
</body>
</html>

简单示例

三、常用指令

1.v-text

类似双大括号语法渲染数据的另一种方式是使用v-text。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>标题</title>
    <script src="static/vue.min.js"></script>      <!--引用vue-->
</head>
<body>
<div id="d1" v-text="greeting"></div>  
<!--使用指令 插入文本-->
<script>
    // 数据模板引擎
    // v-开头的指令是帮助我们渲染数据用的

    new Vue({
        el: "#d1",  // 获取元素
        data: {
            greeting: "Hello Vue",
        }
    })
</script>

</body>
</html>

v-text

2. v-html

双大括号语法无法渲染HTML标签，我们需要使用v-html。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>标题</title>
    <script src="static/vue.min.js"></script>      <!--引用vue-->
</head>
<body>
<div id="d1" v-html="greeting"></div>
<!--使用指令 插入文本-->
<script>
    // 数据模板引擎
    // v-开头的指令是帮助我们渲染数据用的

    new Vue({
        el: "#d1",  // 获取元素
        data: {
            greeting: "<h1>Hello Vue</h1>",
        }
    })
</script>

</body>
</html>

v-html

3.v-for

接下来，我们看看数组和对象使用for的渲染方式。

<div id="d1">
    <ul>
        <li v-for="i in ary">{{ i }}</li>
    </ul>
    <ul>
        <li v-for="student in students">姓名：{{student.name }},年龄：{{ student.age }},爱好：{{ student.hobby }}</li>
    </ul>
</div>
<!--使用指令 插入文本-->
<script>
    // 数据模板引擎
    // v-开头的指令是帮助我们渲染数据用的

    new Vue({
        el: "#d1",  // 获取元素
        data: {
            ary: ['我是1', '我是2', '我是3', '我是4'],
            students: [
                {
                    name: "学生1",
                    age: 22,
                    hobby: '排球'
                },
                {
                    name: "学生2",
                    age: 11,
                    hobby: '蓝球'
                },
                {
                    name: "学生3",
                    age: 32,
                    hobby: '双色球'
                },
            ],
        }
    })
</script>

v-for

4. v-if ，v-else-if ，v-else

渲染数据的时候，同样也可以使用条件判断，我们来看看。

<div id="d1">
    <div v-if="role == 'mei_nv'"><h1>欢迎光临</h1></div>
    <div v-else-if="role == 'big_mei_nv'"><h1>欢迎再次光临</h1></div>
    <div v-else><h1>再见</h1></div>

</div>
<!--使用指令 插入文本-->
<script>


    let vm = new Vue({
        el: "#d1",  // 获取元素
        data: {
            // role: "mei_nv",  // 第一次 展示 欢迎光临
            // role: "big_mei_nv",  // 第二次 展示 欢迎再次光临
            // role: "no",   // 第三次 展示 再见
        }
    })
</script>

v-if

通过上面的代码我们可以看出，v-if的作用是控制标签的显示，它通过判断添加标签，底层采用的是appendChild来实现的，下面我们来看一个同样也是控制标签显示的另一个指令v-show。

5. v-show

<div id="d1" v-show="greeting">看见我了没？</div>
<!--使用指令 插入文本-->
<script>
    // 数据模板引擎
    // v-开头的指令是帮助我们渲染数据用的

    let vm = new Vue({
        el: "#d1",  // 获取元素
        data: {
            // greeting: true,  // 在页面展示出来了
            // greeting: false  // 在页面展示不出来
            // greeting: 1, // 在页面展示不出来
            greeting: 0  // 在页面展示不出来
        }
    })
</script>

v-show

与v-if不同的是，v-show通过样式的display控制标签的显示。

6.v-if 和v-show对比

v-if和v-show的性能比较
我们简单比较一下二者的区别：

实现方式：v-if底层采用的是appendChild来实现的，v-show通过样式的display控制标签的显示，正因为实现方式上面有差异，导致了他们的加载速度方面产生了差异；

加载性能：v-if加载速度更快，v-show加载速度慢

切换开销：v-if切换开销大，v-show切换开销小

v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-show 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。

对比

7. v-bind

绑定属性，不多说了，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>标题</title>
    <script src="static/vue.min.js"></script>      <!--引用vue-->

    <style>
        .active {
             500px;
            height: 500px;
            background-color: blue;
        }
    </style>

</head>
<body>
<div id="d1">

    <a v-bind:href="baidu">跳转百度</a>    <!--绑定一个连接给按标签的连接-->

    <div v-bind:class="[isActive]"></div>
    <!--给添加一个类  类名就是对应的数据  -->
</div>

<script>
    // 数据模板引擎
    // v-开头的指令是帮助我们渲染数据用的

    let vm = new Vue({
        el: "#d1",  // 获取元素
        data: {
            baidu: "https://www.baidu.com/",
            isActive: "active"
        }
    })
</script>

</body>
</html>

v-bind

8. v-on

另一个非常重要的指令是v-on，使用v-on我们可以在标签上面绑定事件，注意我们新建的vue实例app01中多了一个属性，methods，在methods中，是我们具体事件的实现方式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>标题</title>
    <script src="static/vue.min.js"></script>      <!--引用vue-->

    <style>
        .active {
            color: green;
        }
    </style>

</head>
<body>
<div id="d1">
    <h1 v-bind:class="{active:isActive}">点击下边这个按钮查看颜色</h1>
    <button v-on:click="changeColor">点击切换颜色</button>
    <!--点击执行changeColor对应的函数-->
</div>

<script>
    // 数据模板引擎
    // v-开头的指令是帮助我们渲染数据用的

    let vm = new Vue({
        el: "#d1",  // 获取元素
        data: {
            isActive: false  // true 就变绿色字体  false就是黑色

            },
        methods:{
                changeColor: function () {
                    this.isActive = !this.isActive  // 点击让他变成非真或者非假
                }
        }
    })
</script>

</body>
</html>

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
    <style>
    </style>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app01">
        <!--方式一-->
        <a v-bind:href='link'
           v-bind:class="{active: isActive}"
           v-on:click="myClick"
           v-on:mouseenter="mouseEnter"
           @mouseleave="mouseLeave">去百度</a>
        <!--方式二-->
        <button v-on="{click: myClick,
                       mouseenter: mouseEnter,
                       mouseleave: mouseLeave}">
            点我今晚吃鸡~~~
        </button>
    </div>

    <script>
        // 绑定属性，简写冒号：
        let app01 = new Vue({
            el: "#app01",
            data: {
                // urls: {
                //     url: "https://www.baidu.com",
                //     name: "百度"
                // },
                link: "https://www.baidu.com",
                isActive: false
            },
            methods: {
                myClick: function () {
                    // this.isActive = true;
                    console.log("大吉大利，今晚吃鸡~~~")
                },
                mouseEnter: function () {
                    console.log("鼠标来了~~~");
                },
                mouseLeave: function () {
                    console.log("鼠标走了~~~");
                }
            }
        })
    </script>

</body>
</html>

v-on test

9.v-model

上面演示的是通过vue实例将数据渲染进模板，并且在控制台，我们修改数据之后，修改后的数据能够及时（官方称之为响应式）的渲染到模板层，那么，如果有这样的需求，比如有一个input标签，当用户修改渲染的原始数据后，打印修改后的数据，简单说，我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改，同时我们还需要监听用户行为，如果用户在标签上面修改了数据（之前的修改，指的是通过vue实例app01进行的数据修改），我们需要获取到数据，针对这个需求，我们可以使用v-mode指令。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>标题</title>
    <script src="static/vue.min.js"></script>      <!--引用vue-->

</head>
<body>
<div id="d1">
    
    <!--都用上指令v-model（响应式渲染）-->
    <input type="text" v-model="name">

    <input type="checkbox" value="男" v-model="sex">
    <input type="checkbox" value="女" v-model="sex">

    <select v-model="num">
        <option>1选择1</option>
        <option>2选择2</option>
        <option>3选择3</option>
    </select>

    <hr>
    <!--把数据空值写到页面上-->
    {{name}}
    {{sex}}
    {{num}}
    <!--通过填写上边的数据 ，实施展示出来-->

</div>

<script>
    // 数据模板引擎
    // v-开头的指令是帮助我们渲染数据用的

    let vm = new Vue({
        el: "#d1",  // 获取元素
        data: {
           name:"",
           sex:[],
           num:[],

        }
    })
</script>

</body>
</html>

v-model

10. 计算和装饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app01">
        <table border="1">
            <thead>
                <tr>
                    <th>学科</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Python基础</td>
                    <td><input type="text" v-model.number="python"/></td>
                    <!--装饰符   number-->
                </tr>
                <tr>
                    <td>前端</td>
                    <td><input type="text" v-model.trim="web"/></td>
                    <!--装饰符  trim-->
                </tr>
                <tr>
                    <td>Django</td>
                    <td><input type="text" v-model.lazy="django"/></td>
                    <!-- 装饰符   lazy-->
                </tr>
                <tr>
                    <td>总分</td>
                    <td>{{ python + web + django }}</td>
                </tr>
                <tr>
                    <td>平均分</td>
                    <td>{{ avgScore }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        // 计算属性放在缓存当中，只有数据修改时才重新计算
        let app01 = new Vue({
            el: "#app01",
            data: {
                python: 75,
                web: 98,
                django: 88
            },
            computed: {
                // 计算属性需用到computed
                sumScore: function () {
                    return this.python + this.web + this.django;
                },
                avgScore: function () {
                    return this.sumScore/3;
                }
            }
        })
    </script>

</body>
</html>

计算属性和装饰符

11.watch 侦听

    <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th>学科</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Python</td>
                    <td><input type="text" v-model="python"/></td>
                </tr>
                <tr>
                    <td>Vue</td>
                    <td><input type="text" v-model="vue"/></td>
                </tr>
                <tr>
                    <td>Go</td>
                    <td><input type="text" v-model="go"/></td>
                </tr>
                <tr>
                    <td>总成绩</td>
                    <td>{{ sumScore }}</td>
                </tr>
            </tbody>
        </table>
        <hr>
        {{ python }}
        {{ vue }}
        {{ go }}
        {{ sumScore }}
    </div>

    <script>
        // v-model  响应式
        let vm = new Vue({
            el: "#app",
            data: {  //对象 即 数据
                python: 88,
                vue: 100,
                go: 65
            },
            computed: {  // 使用计算的时候用computed
                sumScore: function () {
                    console.log(1);
                    return this.python + this.vue + this.go;
                },
            },
            watch: {  //侦听
                python: function () {
                    alert(this.python);
                    // 修改python分数时候就会弹窗（实时侦听）
                }
            }
        })
    </script>

侦听

12.获取DOM元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="./static/vue.min.js"></script>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>

    <div id="app">
        <div ref="myRef">Peiqi</div>
        <!--写上ref="myRef" vue 对应会对一个属性-->
        <button v-on:click="changeColor">点击让佩奇变绿</button>
    </div>

    <script>
        // 数据模板引擎
        // v-开头的指令是帮助我们渲染数据用的
        let vm = new Vue({
            el: "#app",
            data: {
                isActive: 'active',
            },
            methods: {
                // 点击按钮 或执行 methods下的  函数 changecolor 函数
                changeColor: function () {
                    // this 就是这个vue实例
                    console.log(this);
                    this.$refs.myRef.className = this.isActive;
                    //会多一个直接用 $refs调用myRef属性
                    // 让 class的name等于 vue实例中的isActive
                }
            }
        })
    </script>

</body>
</html>

获取DOM元素

13.自定义指令

自定义指令的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
- name: 指令名，不包括 v- 前缀。
- value: 指令的绑定值，
- oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression: 绑定值的字符串形式。
- arg: 传给指令的参数。
- modifiers: 一个包含修饰符的对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            border:solid 1px green;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="box1" v-pos.right.bottom="fix"></div>
    <button v-on:click="position">点击定位</button>
</div>
<script>
    // 自定义指令“pos”
    Vue.directive("pos",function (el,bindding) {

        console.log(el);  // el 绑定指令的元素    <div class="box1"></div>
        console.log(bindding); //  bindding 是一个对象{即}

        let modifiers = bindding.modifiers; // bindding.modifiers 自定义指令修饰符  {right: true, bottom: true}
        if (bindding.value){               // bindding.value 自定义指令的值
            el.style.position = 'fixed';
            for (let key in modifiers){
                el.style[key] = 0;
            }
        }else {
            el.style.position = 'static'
        }
    });

    const app = new Vue({
        el:'#box',
        data:{
            fix:false
        },
        methods:{
            position:function () {
                this.fix = !this.fix
            }
        }

    })
</script>
</body>
</html>

自定义指令