Vue

 一、Vue了解

#1、什么是Vue
    可以独立完成前后端分离式web项目的JavaScript框架

#2、why
    三大主流框架之一：Angular React Vue
    先进的前端设计模式：MVVM
    可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

#3、特点
    单页面的web应用
    数据驱动
    数据的双向绑定
    虚拟的DOM

简单使用

# 1.下载：https://vuejs.org/js/vue.min.js
# 2.导入vue.js
# 3.在自定义的script标签中创建vue对象
# 4.用vue对象来控制页面内容

<div id="app">   
    {{ }}
</div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app'       #一般使用id，因其具有唯一标识性，
    })
</script>

二、Vue实例

1、el:实例

new Vue({
    el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

2、data：数据

<div id='app'>
    {{ msg }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '数据',
        }
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data为插件表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->

3、实例的methods

#v-on来为事件绑定方法，事件用 :事件名 标注
#语法：v-on:事件名 = "事件变量"
# 事件变量：由vue实例的methods提供
#例如
    <div v-on:click="btnClick" v-bind:class="my_cls"> {{msg}}</div>
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .btn{
            width:200px;
            height:300px;
            background: red;
        }
        .btn1{
            width: 500px;
            height: 1000px;
            background:bisque;
        }
    </style>
</head>

<body>
<div id="app">
    <!--<button v-on:click="btnClick" v-bind:class="my_cls"></button>-->
    <div v-on:click="btnClick" v-bind:class="my_cls"> {{msg}}</div>
</div>
</body>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'abcd',
            my_cls:'btn'
        },
        methods:{
            btnClick:function () {
                if (this.my_cls == 'btn'){
                    this.my_cls = 'btn1'
                    
                }else{
                    this.my_cls = 'btn'
                }
            }
        }
    })
</script>
</html>
例子，点击触发背景颜色变化

 4、computed:计算

# computed功能：将function封装给一个变量，通过该变量就可以得到该function的值
使用场景，例如，输入姓氏和名称，对其拼接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .span{color:red;}
    </style>
</head>
<body>
</body>
<div id="app">

    <p>姓：<input type="text" placeholder="姓" v-model="first_name"></p>
    <p>名：<input type="text" placeholder="名" v-model="last_name"></p>
    <!--<p>姓名:<span class="span">{{first_name+last_name}}</span></p>-->
    <p>姓名:<span class="span" v-on:click="Click">{{name}}</span></p>
</div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            first_name:'',
            last_name:'',
            name:'点击我才能触发'
        },
        methods:{
            Click:function () {
                this.name=this.first_name+this.last_name
            }
    }
    })
</script>
</html>
methods版本，必须点击才可获得名称
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .span{color:red;}
    </style>
</head>
<body>

</body>
<div id="app">

    <p>姓：<input type="text"  v-model="first_name"></p>
    <p>名：<input type="text"  v-model="last_name"></p>

    <p>姓名:<span class="span">{{name()}}</span></p>
</div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            first_name:'',
            last_name:'',
        },
        methods:{
            name:function () {
                return this.first_name+this.last_name
            }
    }
    })
</script>


</html>
methods版本，自动获得，无需点击
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .span{color:red;}
    </style>
</head>
<body>

</body>
<div id="app">

    <p>姓：<input type="text"  v-model="first_name"></p>
    <p>名：<input type="text"  v-model="last_name"></p>

    <p>姓名:<span class="span">{{name}}</span></p>
</div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            first_name:'',
            last_name:'',
        },
        computed:{
            name:function () {
                // if (this.first_name=='' && this.last_name==''){return '默认姓名'}
                return this.first_name+this.last_name
            }
    }
    })
</script>
</html>
computed

 5、监听

# watch是用来监听变量的，当监听的变量的值一旦发生变化，就会触发监听的函数
# 应用场景：多个变量(first_name、last_name)依赖于一个变量(name)
```

```html
<div id="app">
    <p>
        姓名：<input type="text" placeholder="姓名" v-model="name">
    </p>
    <p>姓: {{ first_name }}</p>
    <p>名: {{ last_name }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: "",
            first_name: "姓",
            last_name: "名",
        },
        watch: {
            name: function () {
                // eg: name = “张三”
                this.first_name = this.name[0];  // 张
                this.last_name = this.name[1];  // 三
            }
        }
    });
</script>
View Code

6、delimiters：分隔符

<div id='app'>
    ${ msg }
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        delimiters: ['${', '}']
    })
</script>
View Code

三、生命周期钩子

  • 表示一个vue实例从创建到销毁的过程，将这个过程的一些节点赋予对应的钩子函数
  • 钩子函数：满足特点条件被回调的方法 
new Vue({
    el: "#app",
    data: {
        msg: "message"
    },
    beforeCreate () {
        console.log("实例刚刚创建");
        console.log(this.msg
                    
    },
    created () {
        console.log("实例创建成功, data, methods已拥有");
        console.log(this.msg);
    },
    mounted () {
        console.log("页面已被vue实例渲染, data, methods已更新");
    }
    // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
})

四、Vue指令

1、文本相关指令

<body>
    <div id="app">
        <!-- 1) 插值表达式 -->
        <p>{{ msg }}</p>
        <p>{{ 1 + 2 * 3 + '条' + msg }}</p>
        <!-- 2) v-text -->
        <p v-text="msg"></p>
        <p v-text="'msg'"></p>
        <!-- 3) v-html：能解析html代码语法 -->
        <p v-text="html_msg"></p>
        <p v-html="html_msg"></p>
        <!-- 4) v-once：结合插值表达式来使用，变量值一旦被初始化赋值后就不会再改变 -->
        <input type="text" v-model="val">
        <p>{{ val }}</p>
        <p v-text="val"></p>
        <p v-html="val"></p>
        <p v-once>{{ val }}</p>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '你是p',
            html_msg: '<b>html语法代码是否解析</b>',
            val: '000'
        }
    })
</script>

属性指令

# 1.v-bind:属性名="变量"
# 2.简写=>  :属性名="变量"
# 3.:class="变量" | :class="{类名:is_able}" | :class="[类1变量, ..., 类n变量,]"
<head>
    <meta charset="UTF-8">
    <title>属性指令</title>
    <style>
        .cls_a {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
        .cls_b {
            text-align: center;
            line-height: 200px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <!-- 属性指令：v-bind -->
    <div id="app">
        <!-- 1) 自定义属性绑定变量 -->
        <p v-bind:abc="a"></p>

        <!-- 2) title属性 -->
        <p title="鼠标悬浮的文本提示">这是一个p段落</p>
        <p v-bind:title="my_title">这是一个p段落</p>

        <!-- 3) class属性 -->
        <!-- 重点：v-bind: 可以简写为 : -->
        <!-- my_class可以被任意赋值 -->
        <p :class="my_class">这是一个p段落</p>

        <!--{类名:类是否起作用, ...}  类是否起作用 写的是变量，变量的值为true或false-->
        <!--应用场景：通过一个变量真假控制一个类名是否起作用-->
        <p :class="{x:1, y:0, z:is_able}">这是一个p段落</p>

        <!--[类名1, ..., 类名n]: 多类名，每一个类名既可以是字符串常量也可以是变量-->
        <p :class="[o, p, q, 'oqp']">这是一个p段落</p>

        <!--多类名综合使用-->
        <p :class="[o, p, q, 'oqp', {k: true}, {h: false}]">这是一个p段落</p>


        <!-- 4) style属性 -->
        <p :style="my_style">这是一个p段落</p>
        <p :style="{color: 'red', backgroundColor: yellow}">这是一个p段落</p>
        
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            a: 'A',
            my_title: '鼠标悬浮的文本提示',
            my_class: 'cls_a cls_b',
            is_able: true,
            o: 'O',
            p: 'P',
            q: 'Q',
            my_style: {
                color: 'red',
                // 'font-size': '30px'
                fontSize: '30px'
            },
            yellow: 'greenyellow'
        }
    })
</script>

 

事件指令

# 指令：v-on:事件名="方法变量"
# 简写：@事件名="方法变量"
# 简写：@事件名="方法变量()"  => 不是方法的调用，而是用于传参
# 简写：@事件名="方法变量('普通参数', $event)"  => $event是事件参数，可以通过它得到鼠标点击的相关信息
<body>
    <!-- 指令：v-on:事件名="变量" -->
    <!-- 简写：@事件名="变量" -->
    <div id="app">
        <p v-on:click="fn1" :style="{color: m_c}">{{ msg }}</p>
        <p @mouseover="fn2" @mouseleave="fn3" @mousedown="fn4" @mouseup="fn5">{{ msg }}</p>


        <!--事件需要参数时-->
        <!-- 注意：事件绑定 方法名() 等价 方法名，不能调用方法，而是作为传参的标志 -->
        <p @click="func('abc')">{{ msg }}</p>

        <!--类别django传参的应用场景，可以标识具体点击的是哪个li-->
        <!--{% for %}-->
        <!--<li @click="func({{forloop.index}})"></li>-->
        <!--{% end for%}-->


        <!--传入事件对象-->
        <p @click="func1($event)">{{ msg }}</p>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '你是p',
            m_c: 'red'
        },
        methods: {
            func1: function (ev) {
                console.log(ev);
                // 数据点击页面的点击点
                console.log(ev.clientX);
                console.log(ev.clientY);
            },
            func: function (txt) {
                this.msg = txt
            },
            fn1: function () {
                if (this.m_c == 'red') {
                    this.m_c = 'blue'
                } else {
                    this.m_c = 'red'
                }
            },
            fn2: function () {
                this.msg = '鼠标悬浮了'
            },
            fn3: function () {
                this.msg = '鼠标离开了'
            },
            fn4: function () {
                this.msg = '鼠标按下了'
            },
            fn5: function () {
                this.msg = '鼠标抬起了'
            }
        }
    })
</script>
View Code

表单指令

<body>
    <div id="app">
        <!-- 指令：v-model="变量" -->
        <form action="" method="get">
            <!-- 1) 数据的双向绑定 -->
            <input type="text" v-model="msg" name="usr">
            <input type="password" v-model="msg" name="pwd">
            <!-- 2) 单选框: value必须设置初值，v-model变量值要与单选框的value值统一 -->
            <p>
                男:<input type="radio" name="sex" value="male" v-model="sex_val">
                女:<input type="radio" name="sex" value="female" v-model="sex_val">
            </p>
            <!--3)单一复选框-->
            <p>
                <!-- v-model绑定的变量值与true-value|false-value统一 -->
                <!-- true-value|false-value默认值为 true | false -->
                是否同意条款:<input type="checkbox" name="agree" v-model="agree_val"
                              true-value="同意" false-value="不同意">
            </p>
            <!-- 4) 多复选框 -->
            <!-- v-model绑定的变量是存放多复选框value的数组(列表) -->
            <p>
                爱好:
                <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
                <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
                <input type="checkbox" value="不挑" name="cless" v-model='more_val' />
            </p>

            <button type="submit">提交</button>
        </form>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '',
            sex_val: 'female',  // 默认value="female"的单选框被选中
            agree_val: '不同意',
            more_val: ['喜好男的', '喜好女的']
        }
    })
</script>
View Code

条件指令

<head>
    <meta charset="UTF-8">
    <title>文本指令</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: darkgray;
        }
        .pg1 { background-color: red; }
        .pg2 { background-color: yellow; }
        .pg3 { background-color: blue; }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-if与v-show的变量值都是bool，控制着显隐 -->
        <!-- v-if隐藏时标签不被渲染，v-show隐藏时标签渲染，用display:none来隐藏 -->
        <!-- 特殊属性key是vue在内存中建立缓存的标志, 来优化渲染的效率 -->
        <p v-if="is_if" key="my_if">v-if的显示与隐藏</p>
        <p v-show="is_show" key="my_show">v-show的显示与隐藏</p>


        <p>
            <button @click="btn_click('pg1')">红</button>
            <button @click="btn_click('pg2')">黄</button>
            <button @click="btn_click('pg3')">蓝</button>
            <div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div>
            <div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div>
            <div class="box pg3" v-else key="pg3"></div>
        </p>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            is_if: true,
            is_show: true,
            pg: 'pg1'
        },
        methods: {
            btn_click: function (pg_num) {
                this.pg = pg_num
            }
        }
    })
</script>
View Code

循环指令

<head>
    <meta charset="UTF-8">
    <title>文本指令</title>
    <style>
        p {
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>{{ array[1] }}</p>
        <p>{{ person['age'] }}</p>
        <div>循环array</div>
        <p v-for="v in array">{{ v }}</p>

        <div>带索引循环array</div>
        <p v-for="(v, i) in array">{{ v }}索引是{{ i }}</p>

        <div>循环dict</div>
        <p v-for="v in person">{{ v }}</p>

        <div>带key循环dict</div>
        <p v-for="(v, k) in person">{{ v }}键是{{ k }}</p>

        <div>带key带索引循环dict</div>
        <p v-for="(v, k, i) in person">{{ v }}键是{{ k }}索引是{{ i }}</p>

        <ul v-for="person in persons">
            <!--{{ person }}-->
            <li v-for="(v, k) in person">{{ k }}: {{ v }}</li>
        </ul>

    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            array: ['iso', 'android', 'winPhone'],
            person: {'name': 'Jobs', 'age': 88, 'gender': '男'},
            persons: [
                {'name': 'Jason', 'age': 58},
                {'name': 'Jerry', 'age': 68},
                {'name': 'Owen', 'age': 17},
            ]
        }
    })
</script>
View Code

前端array的操作

<script>
    arr = [1, 2, 3, 4, 5];
    console.log(arr);
    // 从index开始往后操作length长度，替换为args
    // arr.splice(index, length, args);
    // arr.splice(2, 3, 9, 9);  // [1, 2, 9, 9]  替换
    // arr.splice(2, 3);  // [1, 2]  删除
    arr.splice(2, 0, 8);  // [1, 2, 8, 3, 4, 5]  插入
    console.log(arr);
</script>
<body>
    <div id="app">
        <input type="text" v-model="txt">
        <button @click="send_msg">留言</button>
        <ul>
            <li v-for="(msg, i) in msg_arr" @click="delete_msg(i)">{{ msg }}</li>
        </ul>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            txt: '',
            // msg_arr: ['初始留言1', '初始留言2']
            msg_arr: []
        },
        methods: {
            send_msg: function () {
                // this.txt
                // this.msg_arr
                if (this.txt) {
                    this.msg_arr.push(this.txt);
                    this.txt = ''
                }
            },
            delete_msg: function (index) {
                this.msg_arr.splice(index, 1)
            }
        }
    })
</script>
留言案例
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/pdun/p/10855155.html