1、前端基础总结（一）

一、

1、为什么要学习Vue？

　　传统的web开发模式：前端人员根据设计稿设计出静态页面，然后将该页面交给后台人员，由后台人员往这些静态页面中加入数据交互逻辑，最后前端进行展示，由后台人员往这个后台一遍写接口，一遍写页面，还要根据不同的url去拼接页面，这样导致前后端工作分配不均，后台压力大，而且效率也低，不移维护。

　　前端后端分离开发模式：后台只关注于数据输出（提供api接口）或者业务逻辑处理，前端负责url的跳转及传参，二者独立开发，互不依赖，开发效率更快。

   <!-- 非Vue版 -->
    <div id="app1">0</div>
    <button id="btn">+1</button>
    <script>
        var app1 = document.getElementById("app1");
        var button = document.getElementById("btn");
        var test;
        button.onclick = function(){
            test = parseInt(app1.innerText) + 1;
            app1.innerText = test
        }
    </script>

    <!-- Vue版 -->
    <script src="./vue2.js"></script>
    <div id="app">
        <div>{{msg1}}</div>
        <div>{{msg2}}</div>
        <button @click="msg1 = msg1 + 1">+1</button>
        <button @click="msg2 = msg2 - 1">-1</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg1:1,
                msg2:2
            },
            methods:{

            }
        })
    </script>

 

2、jquery能否实现呢？

　　随着前端页面越来越复杂，用户对于交互性要求也越来越高，仅仅用jQuery是远远不够的。

　　解决： 尤雨溪->Vue

　　　　　 Google->AngularJS

　　　　    Facebook-> ReactJS

3、jquery: 库

4、vue：框架

5、什么是库？

　　库是一堆方法的集合，按需调用即可。

6、什么是框架？

　　框架是针对某类业务提供整套的解决方案，并且定义好了一整套的规范，开发者必须按照规范去使用

7、vue是MVVM的框架

 

8、插值表达式

　　作用：展示data中的数据，它的合法用法有

　　　　1、直接写变量

　　　　2、字符串拼接

　　　　3、数值运算

　　　　4、三元表达式

　　　　5、函数

    <script src="./vue2.js"></script>
    <div id="app">
        <div>直接写变量{{msg}}</div>
        <div>字符串拼接：{{ "名字：" + msg }}</div>
        <div>数值运算：{{ 666 + msg }}</div>
        <div>三元表达式：{{ msg >= 19 ? "已成年" : "未成年"}}</div>
        <div>{{ str.split('').reverse().join('')}}</div>
        <!-- split  reverse   join  三个用法 -->
        <div>{{str.split('')}}</div>
        <!-- reverse()方法用于颠倒数组中元素的顺序【注意：是数组，不是字符串】 -->
        <div>{{ arrTest }}</div>
        <div>{{ arrTest.reverse() }}</div>
        <!-- 注意：reverse 只修改数组本身，而不是返回结果，而且没有返回结果 -->

        <!-- join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。 【注意：是将数组转成字符串的】-->
        <div>{{ arrTest.join('--')}}</div>
        <div>{{ arrTest.join('')}}</div>

        
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:123,
                str:"abcdef",
                arrTest:[1,2,3,4,5,6]
            }
        })
    </script>

9、v-text 和 v-html 的使用

在vue中，凡是v-开头的都叫指令，指令是用来增强html功能用

 v-text作用和插值表达式一样，也是用来展示数据的, 它的使用方式是在标签的属性位置使用,而插值表达式在innerHTML位置使用 

  <script src="./vue2.js"></script>
    <div id="app">
        <div v-text="username"></div>
        <div v-text=" '你好' + username "></div>
        <div v-text=" 66 + age "></div>
        <div v-text="age >= 18 ? '成年人':'未成年'"></div>
        <div v-text="username.split('').reverse().join('')"></div>
        <div v-text="htmlStr"></div>

        <!-- 如果用到带HTML标签的要用v-html来展示，但是这样不安全，不建议使用  -->
        <div v-html="htmlStr"></div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                username: "abcdef",
                age : 20,
                arrTest: [1,2,3,4,5],
                htmlStr:'<h1>这是最大的标题</h1>'
            }
        })
    </script>

　　

10、v-bind的使用

　　作用：用于动态绑定属性

　　使用方式：v-bind:属性名="data的一个属性"

　　简写： :属性名="data的一个属性"【推荐这种写法】

　　v-bind可以动态绑定任何样式，包括自定义样式。

<style>
        .redfont{
            color:red;
        }
    </style>
    <script src="./vue2.js"></script>
    <div id="app">
        <img v-bind:src="avatar" alt="">
        <img :src="avatar" alt="">
        <a :href="'del.php?id='+id">删除</a>
         <!-- 推荐下面这种写法⭐ -->
        <a :href=" `del.php?id=${id}` ">推荐这种删除方式</a>

        <!-- v-bind可以绑定任何属性，包括自定义属性 -->
        <p :username="username">这是自定义属性</p>

        <!-- v-bind动态绑定样式  使用对象语法，对象的key作为类名，后面跟一个判断条件，如果条件为true，则具备该类名，如果条件为false，则不具备该类名 -->
        <p :class=" { redfont: username === 'abcd'} ">测试动态绑定样式</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                username:"abcd",
                age:20,
                avatar:"./avatar.jpg",
                id:222
            }
        })
    
    </script>

　　

11、v-for 的使用

　　作用：v-for可以用来遍历数组 和 对象。它可以根据data中的数组动态刷新视图。

　　1、遍历数组：

　　　　1.1 使用方式：v-for=" item in arr " item 是一个参数，表示数组中的每一项，arr也是一个参数，表示你要遍历的数组。

　　　　1.2 使用方式：v-for=" (item,index) in arr "  index表示数组项的索引。✨⭐

　　2、遍历对象

　　　　2.1 使用方式：v-for=" value in obj" value 表示对象属性的值， obj就是需要遍历的对象

　　　　2.2 使用方式： v-for="(value ,key,index) in obj"    key表示对象的键，index表示这个对象属性的索引，类似上面数组的index

 

　　注意：使用下面两种方式不能够动态刷新视图

　　　　1、使用数组的length属性去更改数组的时候不行。

　　　　2、使用索引的方式去更改数组也不行

　　解决方式：　　

　　　　1、Vue.set(arr,index,value) 方法  arr:表示需要设置的数组，index表示数组索引，value表示该索引项的新的值✨✨，

　　　　　　　　　　　　　　例如Vue.set(vm.list,0,{id:111,name:'jack'})

　　　　2、直接调用数组的splice()方法

　　注意：使用v-for渲染数组的时候，一定要记住将key属性加上去，并且要保证这个key的值是唯一并且不重复的，它的作用的就是用来唯一标识数组的每一项，，提高渲染性能的 ⭐

 <script src="./vue2.js"></script>
    <div id="app">
        <div> v-for=" item in arr"</div>
        <ul>
            <li v-for="item in list" :key="item.id">{{item.name}}</li>
        </ul>

        <div> v-for=" (item, index ) in arr"</div>
        <ul>
            <li v-for="(item,index) in list" :key="index ">名字{{item.name}}--索引值：{{index }}</li>
        </ul>


        <div> v-for=" value in obj"</div>
        <ul>
            <li v-for="value in boss" :key="value">项：{{value}}</li>
        </ul>

        <div>v-for=" (value,key,index) in obj"</div>
        <ul>
            <li v-for="(value,key,index) in boss" :key="index">名字：{{value}}--键：{{key}}--索引：{{index}}</li>
        </ul>

    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                list:[
                    { id: 11, name:'北京'},
                    { id: 22, name:'天津'},
                    { id: 33, name:'河北'}
                ],
                boss:{ name: '马云', age:50}
            }
        })
    </script>

 

12、v-model双向数据绑定

　　v-model指令用来实现双向数据绑定，这个指令只能给input\select\textarea 这些标签使用（组件也可以使用）

　　双向数据绑定就是：数据模型中的数据与视图中的数据同步变化

　　

 <script src="./vue2.js"></script>
    <div id="app">
        <input type="text" v-model="name">
        <input type="text" :value="name">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                name:"哈哈哈"
            }
        })
    </script>

 

 

13、监听DOM事件指令：v-on、事件修饰符、按键修饰符

　　v-on:事件类型="一个函数"  这个事件类型可以子弟和工艺

　　简写为：  @事件类型="一个函数"

    <script src="./vue2.js"></script>
    <div id="app">
        <h1>{{name}}</h1>

        <button v-on:click="changeName">点击事件改变值</button>
        <button @click="changeName">简写点击改变值</button>

        <button @click="changeNameByArg('今天天气不错')">传参来改变name值</button>

        <!-- 如果要想传事件对象，只能用$event，并且不能加引号 -->
        <button @click="getEvent($event)">点击获取事件对象</button>

        <br>
        <!-- 事件修饰符：用来增强事件功能，常用的有  .stop :阻止冒泡；.prevent:阻止默认行为 -->
        <a href="https://www.baidu.com">跳到百度</a>
        <a href="https://www.baidu.com" @click.prevent="print">阻止默认跳转，并打印一句话</a>

        <br>
        <!-- 按键修饰符 -->
        <input type="text" v-model="name" @keyDown.13="submit">
        <input type="text" v-model="name" @keyDown.enter="submit">

    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                name:"隔壁老王"
            },
            methods:{
                changeName(){
                    console.log(this)
                    this.name = "哈哈哈，被迫改变了"
                },
                changeNameByArg(newName){
                    this.name = newName
                },
                getEvent(e){
                    console.log(e)
                },
                print(){
                    console.log("阻止你默认跳转")
                },
                submit(e){
                    console.log('你提交了表单')
                    console.log(e.keyCode)
                }
            }
        })
    </script>

 

 

14、v-if 和 v-show 展示指令

　　v-if 和 v-show 都能够用来控制元素的显示与隐藏

　　v-if 是通过操作dom元素来控制元素的显示与隐藏，而V-show 是通过控制样式display:none来控制元素的显示和隐藏的

　　

　　使用场景：

　　　　1. 如果页面中涉及到异步数据渲染的话，就用V-if

　　　　2. 如果页面中涉及到大龄dom元素的显示和隐藏的话，就用v-show

    <script src="./vue2.js"></script>
    <div id="app">
        <h1> v-if </h1>
        <p v-if="age>18">已成年</p>
        <p v-if="age<18">未成年</p>

        <h1> v-show </h1>
        <p v-show="age > 18">已成年</p>
        <p v-show="age < 18">未成年</p>

        <h1> 异步数据 </h1>
        <p v-if="isVisible">异步数据回来，我就就显示</p>
        <button @click="getData">点击改变</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                age:20,
                isVisible: false
            },
            methods:{
                getData(){
                    setTimeout(() => {
                        this.isVisible = true
                    }, 2000);
                }
            }
        })
    </script>

 

 

15、v-if 和  v-else-if  的使用

 <script src="./vue2.js"></script>
    <div id="app">
        <h1>异步数据</h1>
        <p v-if="isVisible">异步数据回来了，我就显示</p>
        <p v-else>异步数据没有回来 </p>
        <button @click="getData">点击显示</button>

        <h1>v-else-if</h1>
        <p v-if=" age >=60 ">老年人</p>
        <p v-else-if="age >= 50 && age < 60">中年人</p>
        <p v-else-if=" age > 18 && age < 50">青年人</p>
        <p v-else>青少年</p>
        <button @click="changeAge">改变年龄</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                age : 19,
                isVisible: false
            },
            methods:{
                getData(){
                    setTimeout(() => {
                        this.isVisible = true
                    }, 1000);
                },
                changeAge(){
                    setTimeout(() => {
                        this.age = 65
                    }, 1000);
                }
            }
        })
    </script>

 

16、v-cloak指令

　　作用Lv-cloak指令可以用于解决表达式闪烁问题

　　

 <style>
        /*2.  利用属性选择器选中,设置display 为none */
        [v-cloak]{
            display: none;
        }
    </style>
    <script src="./vue2.js"></script>
    <div id="app">
        <!-- 1. 首先找到你插值表达式闪烁的变迁，给它加上v-cloak指令 -->
        <h3 v-cloak>{{name}}</h3>
    </div>
    <script>
        // 3. 当Vue实例编译完成后，就会将标签上的v-cloak移除掉
        var vm = new Vue({
            el:"#app",
            data:{
                name:"hello world"
            }
        })
    </script>