Vue框架

vue初识（渐进式JavaScript框架）

定义：Vue.js是一套构建用户界面的框架，只关注视图层

Vue.js是前端的主流框架之一，和Angular2+、React.js一起，并成为前端三大主流框架！

优点：

1、使用框架，能够提高开发的效率

2、提高代码的维护性，提高效率

3、让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑

框架与库的区别：

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

库：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

MVC与MVVM的区别

MVC是后端的分层开发概念;

MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VMViewModel;

Vue.js 的代码结构

1、引入vue.js

2、写视图层，我们要展示的内容（body里的html代码）

3、实例化Vue（） var vm = new Vue （{}）

　　data：存放数据

　　el: 控制的是那块视图

　　methods：放置响应方法

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

 <div id="app">
        <div>{{title}}</div>
 //属性绑定，v-bind 加在属性前，等号后写data属性名，可以简写，直接加上冒号（:）
        <input type="text" :value="intro">
 //事件绑定 v-on:click="随便起的名"，这个名在jsmethods中添加事件响应程序
 <input type="button" @click="popOn">
    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //创建vue的实例

var vm = new Vue({

//指定vue控制界面区域，只写id 唯一

el : "#app",

//界面的数据

//之后我们在操作的时候更多的是操作数据，去影响界面宣染

//

data:{

title:"hello vue",

intro:"这是vue的介绍"

},

 methods:{
 //单击事件，给按钮绑定了一个单击事件，这是单击事件的相应程序
 popOn(){
 console.log(this.title)
 }
         },

})

</script>
</html>

插值表达式、v-cloak、v-text、v-html

插值表达式 {{}} 可以在内容前后插入一些内容

v-cloak ：当js运行完之后显示页面。

v-text：会替换掉元素里的内容

v-html：可以渲染html界面（识别html标签）

 <style>
        /* 属性选择器 */
        /* 使js加载完成之后在显示页面 */
        [v-cloak] {
            display: none;
        }
    </style>
 
</head>
 
<body>
    <div id="app">
       <h3 v-cloak>{{title}}</h3>
        <!-- v-text覆盖原本的内容 -->
        <div v-text="intro">本来的内容</div>
        <!-- 插值内容前后 -->
        <div>{{intro}}本来的内容</div>
        <div v-html="richText"></div>
    </div>
 
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //创建vue的实例
     
    var vm = new Vue({
        el: "#app",
        data: {
            title: "常用指令",
            intro: "v-text",
            richText:"<div>本来的内容</div>"
        }
    })
    //插值表达式{{}}，可以在前后插入一些内容
        // v - text：会替换掉元素里的内容
        // v

v-bind 界面元素属性值的绑定

1.括号里不加引号的都是我们data里的数据读取
2.如果想使用字符串需要加上引号
3.里面可以写表达式
4.里面也可以调用定义好的方法，拿到的是方法的返回值

使用：

<body>
    <div id="app">
        <div v-bind:name="divName">标题</div>
        <input v-bind:type="inputType" value="点击">
    </div>
    <script>
        /* v - bind
        界面元素属性值的绑定
        1.括号里不加引号的都是我们data里的数据读取
        2.如果想使用字符串需要加上引号
        3.里面可以写表达式
        4.里面也可以调用定义好的方法，拿到的是方法的返回值 */
        var vm = new Vue({
            el: "#app",
            data: {
                divName: "title",
                inputType: "button"
            }
        })
    </script>

v-on 进行事件的绑定，我们用的最多的是click事件绑定简写@

：click="dianjishijian(参数)" 可以传参数

<body>
    <div id="app">
        <h3>{{title}}</h3>
 
        <!-- v-on：事件类型 = “函数名” -->
        <button v-on:click="changeTitle1">修改</button>
        <button @click="changeTitle">修改2</button>
        <button @dblclick="dbl">双击</button>
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            title: "天亮教育"
        },
        methods: {
            changeTitle() {
                console.log("点击");
                console.log(this.title);//天亮教育
                // console.log(title1);//实参
            },
            changeTitle1() {
                console.log("修改");
            },
            dbl() {
                console.log("双击了")
            }
        }
    })
</script>

事件修饰符：

1.stop阻止冒泡
2.prevent阻止默认事件
3.capture添加事件侦听器时使用事件捕获模式
4.self只当事件在该元素本身（比如不是子元素）触发时触发回调
5.once事件只触发一次

//阻止事件冒泡
        .box {
             100px;
            height: 100px;
            background-color: red;
        }
        .box1 {
             50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div id="app">
        <div class="box" @click="clickBox">
            <div class="box1" @click.stop="clickInner"></div>
        </div>
    </div>
</body>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
 
        },
        methods: {
            clickBox() {
                console.log("点击了外盒子");
            },
            clickInner(){
                console.log("点击的内盒子");
            }
        }
    })
</script>
//阻止默认事件
<body>
    <div id="app">
        <a href="#" @click.prevent ="aclick">跳转</a>
    </div>
     
</body>
 <script>
     var vm = new Vue({
         el:"#app",
         data:{
 
         },
         methods:{
             aclick(){
                 console("跳转")
             }
         }
     })
 </script>
//捕获模式
 <body>
        <div id="app">
            <div class="box" @click.capture="clickBox">
                <div class="box1" @click.capture="clickInner">
                    <div class="box2" @click = "clickInner2"></div>
                </div>
            </div>
        </div>
    <!-- 捕获从外向里 -->
</body>
<script>
        const vm = new Vue({
                el: "#app",
                data: {
 
                },
                methods: {
                    clickBox() {
                        console.log("点击了外盒子");
                    },
                    clickInner() {
                        console.log("点击的内盒子");
                    },
                    clickInner2() {
                        console.log("点击了最内的盒子");
                    }
                }
           
 
//只当事件在该元素本身（比如不是子元素）触发时触发回调
 
<body>
    <div id="app">
        <div class="box" @click.self="clickBox">
            <div class="box1" @click.self="clickInner">
                <div class="box2" @click.self="clickInner2($event)"></div>
            </div>
        </div>
    </div>
    <!-- 捕获从外向里 -->
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
 
        },
        methods: {
            clickBox() {
                console.log("点击了外盒子");
            },
            clickInner() {
                // console.log(e.target)
                console.log("点击的内盒子");
            },
            clickInner2(e) {
                console.log(e.target)
                console.log("点击了最内的盒子");
            }
        }
    })
</script>
//事件只触发一次
<body>
    <div id="app">
        <button @click.once="boxclick">点击</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{},
        methods: {
            boxclick(){
                console.log("点击");
            }
        }
    })

v-model数据双向绑定

作用：数据双向绑定

注意：绑定的是表单控件

<body>
    <div id="app">
        <!-- 作用：数据双向绑定
        注意：绑定的是表单控件 -->
        <input type="text" v-model="num1">
        <button @click = "btn">点击</button>
    </div>
</body>
<script>
    var vm = new Vue ({
        el:"#app",
        data:{
            num1:1
        },
        methods:{
            btn(){
                console.log(this.num1)
            }
        }
    })
</script>

V-for

1.便利数组，参数(item,index)inlist
2.便利对象，参数(value,key,index)inlist
3.便利数字，numin10(1~10)

<body>
    <div id="app">
        {{title}}
        <ul>
            <!-- i为索引 item为内容 -->
            <input type="text" v-model="item1">
            <button @click="search">检索</button>
            <li v-for="(item,i) in list" @click="show(item.name)" >id：{{item.id}}   ----值：{{item.name}}</li>
             
        </ul>
        <ul>
            <li v-for="(item,i) in list1">id：{{item.id}} ----值：{{item.name}} </li>
        </ul>
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            title: "hello",
            obj: {
                age: 10
            },
            list: [{
                id: 1,
                name: "李白"
            },
            {
                id: 2,
                name: "杜甫"
            },
                {
                id: 3,
                name: "孟浩然"
            }],
            list1:[],
            item1: null
        },
        methods:{
            show(name){
                alert(name);
            },
            search(){
               this.list1 = this.list.filter(item=>{
                    return item.name == this.item1;
                })
            }
        }
    })
</script>