VUE

预习

提高开发效率的发展历程：原生JS->Jquery之类的类库->前端模板引擎->Angular.js ->Vue.js

帮助我们减少不必要的DOM操作，提高渲染效率

双向数据绑定的概念

通过框架提供的指令只关心数据的业务逻辑，不再关心DOM是如何渲染的

快速起始

cdn

vue-cli

升级vue-vli v4.5

npm i -g @vue/cli@next

新建项目会有vue3选项

vite

使用vite体验更快速

npm init vite-app <project-name>

cd <project-name>

npm install

npm run dev

MVC

app.js

项目的入口模块

一切的请求，都要先进入这里进行处理

注意：app.js并没有路由分发的功能，需要调用

router.js模块进行路由的分发处理

router.js

之类路由分发处理模块；

为了保证路由模块的只能单一，router.js只负责分发路由，不负责具体业务逻辑的处理

如果涉及到了业务逻辑处理操作；就无能为力了，只能调用controller模块进行业务逻辑处理

controller

这是业务逻辑处理曾

在这个模块中，封装了一些具体业务逻辑处理的逻辑代码，但是也是为了保证职能单一，此模块只负责处理业务，不负责处理数据的CRUD

如果涉及到数据，需要调用Model层

Model 层

职能单一，只负责操作数据库，执行对应的sql语句，进行数据的CRUD

create read update delete

View视图层

每当用户操作了界面，如果需要进行业务的处理，都会通过网络请求，去请求后端的服务器，此时，我们的这个请求，就会被后端的app.js监听到

MVVM

M

这里的M保存的是每个页面中单独的数据

VM

它是一个调度者，分割了M和V

每当V层想要获取后保存数据的时候，都要由VM做中间的处理

V

就是每个页面中的HTML结构

项目开始之前安装以下插件

translate to chinese

Debugger for Chrome

ESLint

HTML Boilerplate

JavaScript ES6 code snippets

jQuery Code Snippets

Kite AI Code AuteComplete

Live Server

Markdown Preview

markdownlint

Material Icon Theme

Path Intellisense

Quokka.js

Vetur

webpack

Window Colors

安装node.js

npm install vue -g安装vue

npm install vue-router -g安装vue-router

npm install vue-cli -g安装vue脚手架

npm install -g cnpm

cnpm install vue

cnpm install --global vue-cli

vue init webpack my-project

cnpm run dev

01.Vue的基本代码

<!DOCTYPE <!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Document</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <!-- 导入VUE包 -->
        <script src="./lib/vue.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <!-- 将来new 的Vue实例，会控制这个 元素中的所有内容 -->
        <div id="app">
            <p>{
   
   { msg }}</p>
        </div>

        <script>
            // 2.创建一个VUE的实例
            // 当我们导入包之后，再浏览器的内存中，就多了一个VUE构造函数
            var vm = new Vue({
                el: '#app',  //表示，当前我们new的这个vue实例，要控制页面的元素
                data: {//data属性中，存放的是el中要用到的数据
                    msg: '欢迎学习Vue' //通过vue提供的指令，很方便的把数据渲染到页面上，程序员不再手动操作DOM元素了
                }
            })
        </script>
    </body>
</html>

02.v-cloak v-bind v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
        /* [v-v-cloak]{
            display:none;
        } */
    </style>
</head>
<body>
    <div id="app">
        <p>{
   
   { msg }}</p>
        <p v-cloak>{
   
   { msg }}</p> <!--- 解决插值表达式闪烁的问题 --->
        <h1 v-text="msg2"></h1> <!-- 等同于插值表达式+v-cloak，默认没有闪烁的问题，v-text会覆盖占位符 -->
        <div v-html="msg3"></div> <!-- 输出内容的真正的html标签 -->
        <input id="btn" type="button" value="按钮" :title="mytitle" @mouseover="show"> 
        <!-- v-bind 是vue中提供的用于绑定属性的指令 可简写成：-->
        <!-- v-on 事件绑定机制 可简写成@-->
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg:'123',
                msg2:"你是在拉屎把",
                msg3:"<h2>你今天吃饭了嘛</h2>",
                mytitle:"这是我自己自定义的title"
            },
            methods: { //这个methonds属性中定义了当前vue实例所有可用的方法
                show : function(){
                    alert("你好，我是弹窗阿")
                }
            },  
        })

        // document.getElementById("btn").onclick = function() {
        //     console.log('123 日志')
        //     alert("你好，我是弹窗阿")
        // }
    </script>
</body>
</html>

03.跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id='app'>
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="stop">
        <P>{
   
   { msg }}</P>
    </div>


    <script>
        // 1.导入vue包
        // 2.创建vue实例
        // 3.获取数据
        // 4.剪切字符串，截取第一，放在后面拼接
        // 5.设置时间间隔

        var vm = new Vue({
            el:"#app",
            data: {
                msg:'浪起来，像个跑马灯一样!',
                interval_id:null
            },
            methods: {
                lang(){
                    // console.log(this.msg);
                    // var _this = this;
                    if (this.interval_id != null) {
                        return;
                    }

                    this.interval_id = setInterval(()=>{
                        //获取到头的第一个字符
                        var start = this.msg.substring(0,1);
                        //获取到后面的所有字符
                        var end = this.msg.substring(1);
                        //重新拼接得到新的字符串，并赋值给this.msg
                        this.msg = end + start;
                    },400)
                    //注意：vm实例，会监听自己身上data中所有数据的改变，
                    //只要数据一发生变化，就会自动把最新的数据，从data上同步
                    //到页面中去；【好处：程序只需要关心数据，不需要考虑如何重新渲染DOM页面】
                },

                stop(){
                    clearInterval(this.interval_id);
                    this.interval_id = null;
                }
            },
        })

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

事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
    <style>
        .inner{
            height: 150px;
            background-color:blue;
        }

        .outer{
            padding: 40px;
            background-color:burlywood;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 事件修饰符是可以串联的 -->
        <!-- 添加事件侦听器时使用事件捕获模式 使用.capture-->
        <!-- <div class="inner" @click.capture="div1Handler"> -->
            
        <!-- 使用.self 实现只有点击当前元素时候，才会触发事件处理函数 -->
        <!-- <div class="inner" @click.self="div1Handler"> -->
            <!-- 阻止冒泡 使用.stop -->
            <!-- <input type="button" value="戳他" @click.stop="btnHandler"> -->

            <!-- 阻止默认行为 使用.prevent -->
            <!-- <a href="http://www.baidu.com" @click.prevent.stop="linkClick">有问题，先去百度</a> -->

            <!-- 只执行一次 使用.once -->
            <!-- <input type="button" value="戳他" @click.once="btnHandler"> -->

        <!-- </div> -->

        <!-- .stop和.self区别 -->
        <!-- self只会阻止自己的冒泡行为 并不会阻止别人的冒泡行为 -->
        <div class="outer" @click="div2Handler">
            <div class="inner" @click.self="div1Handler">
                <input type="button" value="戳他" @click="btnHandler">
            </div>
        </div>
    </div>

    <script>
        var vm = new Vue({
             el:'#app',
             data:{

             },
             methods: {
                 div1Handler(){
                    console.log("触碰了inner");
                 },

                 btnHandler(){
                    console.log("触碰了btnHandler");
                 },

                 linkClick(){
                     console.log("触发了连接的百度");
                 },
                 div2Handler(){
                     console.log("触碰outer");
                 }
             },
        })
    </script>

</body>
</html>

v-model双向数据绑定

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

    <div id="app">
        <input  type="text" v-model="first_number">
    
        <select class="select_option" v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
    
        <input  type="text" v-model="second_number">
    
        <input type="button" value="=" @click="calc">
        
        <input  type="text" v-model="reslut_number">
    </div>
    

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                first_number:"0",
                second_number:"0",
                reslut_number:'0',
                opt:"+",
            },
            methods: {
                calc(){
                    // console.log("计算！！")
                    // switch (this.opt) {
                    //     case "+":
                    //         this.reslut_number = parseFloat(this.first_number) + parseFloat(this.second_number);
                    //         break;
                    //     case "-":
                    //         this.reslut_number = parseFloat(this.first_number) - parseFloat(this.second_number);
                    //         break;
                    //     case "*":
                    //         this.reslut_number = parseFloat(this.first_number) * parseFloat(this.second_number);
                    //         break;
                    //     case "/":
                    //         this.reslut_number = parseFloat(this.first_number) / parseFloat(this.second_number);
                    //         break;
                    //     default:
                    //         break;
                    // }
                    var codeStr = 'parseFloat(this.first_number)' + this.opt + 'parseFloat(this.second_number)'
                    this.reslut_number = eval(codeStr)
                   
                }
            },
        })
    </script>
</body>
</html>

在Vue中使用样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
    <style>
        .red{
            color: red;
        }

        .thin{
            font-weight: 200;
        }

        .italic{
            font-style: italic;
        }

        .active{
            letter-spacing: 0.5em;
        }


    </style>
</head>
<body>
    
    <div id="app">
        <!-- 这是一个原始class样式 -->
        <!-- <h1 class='thin red'>i m here!</h1> -->

        <!-- 第一种使用方式，直接传递一个数组 注意：这里的class需要使用 v-bind做数据绑定 -->
        <!-- <h1 :class="['red', 'thin' , 'active']">我是个好人</h1> -->
        
        <!-- 在数组中使用三元表达式或使用对象 -->
        <!-- <h1 :class="[{'red':flag}, 'thin']">这是一个很大很大的书法！！！</h1> -->
        
        <!-- 在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以
        属性的值是一个标识符 -->
        <!-- <h1 :class='{"red":flag , "thin":is_flag}'>i m here!</h1> -->
        <!-- <h1 :class='{red:true , thin:is_flag}'>i m here!</h1> -->
        <h1 :class="class_Obj">i m here!</h1>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true,
                is_flag:true,
                class_Obj:{ red:true , thin:true}
            },
            methods: {
                
            },
        })
    </script>

</body>
</html>

在Vue使用内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>这里是AKA 阿飞！</h1>
        <!-- 原始style -->
        <h1 style="background-color:rgba(16, 202, 146, 0.589); font-weight:400">这里是AKA 阿飞！</h1>
        
        <!-- 对象属性 -->
        <h1 :style="{'background-color':'rgba(16, 202, 146, 0.589)', 'font-weight':'400'}">这里是AKA 阿飞！</h1>
        
        <!-- 使用对象简化 -->
        <h1 :style="styleObj">这里是AKA 阿飞！</h1>

        <!-- 多个对象使用数组 -->
        <h1 :style="[styleObj, styleObj2]">这里是AKA 阿飞！</h1>
    
    </div>
   
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                styleObj:{"background-color":"burlywood", "font-weight":"100"},
                styleObj2:{"font-size":'80px', "font-style":"italic"}
            },
            methods: {
                
            },
        })
        
    </script>
</body>


</html>

Vue v-for迭代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-for="(item, index) in list">---索引是{
   
   {index}} 数值是{
   
   {item}}</p>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list:[1, 2, 3, 4, 5]
            },
            methods: {
                
            },
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-for="item in list">我的id是{
   
   {item.id}}  我的名字是{
   
   {item.name}}</p>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                list:[
                    {id: 1, name: 'zs1'},
                    {id: 2, name: 'zs2'},
                    {id: 3, name: 'zs3'},
                    {id: 4, name: 'zs4'}
                ]
            },
            methods: {
                
            },
        })
    </script>
</body>
</html>

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

    <div id="app">
        <p v-for="(val, key, i) in user">索引是{
   
   {i}}   ---值是：{
   
   {val}} ---键是：{
   
   {key}}</p>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                user:{
                    id:1,
                    name:"托尼·斯达克",
                    gender:"男"
                }
            },
            methods: {
                
            },
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-for="count in 10">这是第{
   
   {count}}此循环！</p>
    </div>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{},
            methods: {
                
            },
        })
    </script>
</body>
</html>

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

    <div id="app">
        <!-- </div>id:</div>
        <input type="text" v-model="id">

        </div>name:</div>
        <input type="text" v-model="name">

        <input type="button" value="添加" @click="push1"> -->

        <div>
            <label>id:
                <input type="text" v-model="id">
            </label>
            <label>name:
                <input type="text" v-model="name">
            </label>
            <input type="button" value="添加" @click="push1">
        </div>
        
        <!-- 注意：v-for 循环的时候，key属性只能使用number获取string -->
        <!-- 注意：key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值 -->
        <p v-for="item in list" :key="item.id">
            <input type="checkbox">
            {
   
   {item.id}} ----- {
   
   {item.name}}
        </p>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                id:"",
                name:'',
                list:[
                    {id: 1, name: "曹操"},
                    {id: 2, name: "刘备"},
                    {id: 3, name: "关羽"},
                    {id: 4, name: "张飞"},
                    {id: 5, name: "诸葛亮"}
                ]
            },
            methods: {
                push1(){
                    // this.list.push({id:this.id, name: this.name})//尾部添加
                    this.list.unshift({id:this.id, name: this.name}) //头部添加
                }
            },
        })
    </script>
</body>
</html>

v-if和v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="flag=!flag">toggle</button>
        <h3 v-if="flag">我是个大西瓜！</h3>
        <h3 v-show="flag">我是个大西瓜！</h3>
    </div>


    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flag:true
            },
            methods: {
                
            },
        })
    </script>
</body>
</html>

python全栈第三十一天 vue基础

VUE

预习

MVC