第三阶段-day5-7_Vue

1 Vue

1.1 Vue的定义

 Vue.js------ 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合(非常容易导入第三方轮子)。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持开发复杂单页应用。

  • 渐进式:从核心到完备的全家桶(需要什么引用什么)

Vue本身语法内容并不多, 生态是很庞大的

 

https://cn.vuejs.org/index.html

可以到这里来学

  • 增量:从少到多,从一页到多页,从简单到复杂
  • 单文件组件: 一个文件描述一个组件
  • 单页应用: 经过打包生成一个单页的html文件和一些js文件

 

为什么要讲vue? 项目前端都是Vue, 国内前端框架市场基本上70%以上都是使用vue这个框架

或者, 不是用框架写的前端 ( 旧的项目jsp 模板技术  )

 

框架:   工程化的角度

所谓框架, 就是在工程化实现一个东西的时候, 构建的大的轮廓, 和提供一些基础性的设施

后来者,或者使用者, 可以在这个框架的基础上, 迅速的把要实现的目标实体快速构建出来

  • vue基本语法(简单)
    • 简洁,轻量,快速,数据驱动,模块友好,组件化

 

现在的前端是组件化的天下

 

1.2 Vue课程

分为两部分

1, 先讲vue基本语法

2, 怎么创建项目--> 在vue中开发页面--->打包项目---> 怎么部署

我们平时写的简单的java语句,是从main函数启动的,但你想,淘宝也是从main启动的么?一定不是,main函数启动运行结束之后,程序运行结束。程序挂掉了,还有对象吗?
没了。对象里面有方法,有数据,对象对我们来说是有意义的,所以必须要求对象是存活的。
如何保证对象存活?
把代码整理,打包后,实际上就是对java代码、class文件进行汇总,类似于一个压缩包一样,把这个打包后的文件放到某个地方,让某个东西帮你来运行出对象,让对象保证存活。别人就可以去访问,根据存活的对象去处理一些逻辑。这个过程叫部署。
Java需要这样做,前端其实也需要这样,以保证外部对其能正确的访问。

为了便于理解,我们首先会在html页面把vue基本语法讲清楚, 先借助html页面来实现vue
但这样是有问题的,毕竟html并不是一个专门用来写Vue的东西

Vue的标准写法是在.vue文件中来实现

 

1.3 一个Vue页面用html

安装vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

 

 

方法二引入的是一个资源文件,在cdn.jsdelivr.net这个服务器上,假如没有网,这个服务器不能打开。所以我们不这样。直接把它下载。

用浏览器访问这个网址 https://cdn.jsdelivr.net/npm/vue@2.6.11

 

 

 

 

这样的话,还是要走网络请求,但走的是本机。断网了还是能访问到。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>


<!-- 一个div 他的id 是root -->
<!-- 在vue中 {{}}: 叫插值表达式 ,
这个插值表达式之中是一个js式子,
这个式子的对应参数要去对应关联的vue对象中去取 , 一般去vue对象的data里面去取-->
<div id="root">
    {{msg}}
    {{msg + aaa}}
</div>

<script>
    // new了一个vue对象
    // 这个vue对象通过,对象的el属性, 与el属性所指向的id所对应的html代码关联起来
    // 把对象和对应html域关联起来
    // data标识vue对象的数据存储属性(除了vue对象固有的属性, 别的属性一般存在data里)
    new Vue({
        el: '#root',//el:后面是字母L,不是数字1
        data: {
            msg: 123,
            aaa: 2000
        }
    })

</script>


<!--生产:  生产环境 ,(代表实际在线上运行的代码, 可以供用户访问的程序),要稳定,不能动不动就挂了,数据要完整
    开发: 开发环境,
    测试: 测试环境

    程序开发 (提测, 回归测试..)---测试测试----运维
    -->


</body>
</html>

 

 

 

Dom解析:从上到下解析。

解析到div时,里面的{{msg}}、{{msg + aaa}}不变,还不知道是什么东西,就在页面上显示{{msg}}、{{msg + aaa}},就像普通字符一样。

一直向下解析,解析到script时,创建了一个vue对象,

把这个对象创建出来了之后,它开始找这个对象所指向的el,一个id= root的东西

就又回去看div,发现确实有id= root的东西,

接着它就发现里面有{{msg}}、{{msg + aaa}}表达式的东西,是vue语法

接着,它在vue对象的data中找,看有没有msg,有就替换掉,有没有aaa,有就替换掉。

就显示出了结果。

 

写vue,第一步,就是把vue语法导进来,很多同学经常忘

 

 

1.4 V指令

  •  V-bind
  •  V-model
  •  V-text
  •  V-html
  •  V-show
  •  V-if
  •  V-else
  •  V-else-if
  •  V-for
  •  V-on
  •  V-pre
  •  V-cloak
  •  v-once

1.5 .1 V-bind: 单向绑定

v-bind: 用来绑定数据和属性以及表达式,缩写为’:’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<!--v-bind: 单向绑定
        把vue对象中data里的值,绑定到html对应是属性上去, 赋值给对应的属性

        注意: v-bind: 可以简写成一个 :
-->

<div id="root">
    {{msg}}
    {{inputStr}}
    <div v-bind:title='aaa'>
        我是一个div
    </div>
    <div :title='aaa'>
        我是一个div
    </div>
    <input v-bind:value="inputStr">

<!--    <input value="inputStr...">-->
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            msg: 1234,
            aaa: '我是一个vue对象中的值',
            inputStr: 'inputStr...'
        }
    })
</script>


</body>
</html>

 

 

1.5.2 V-model:  双向绑定

 v-model:实现双向数据绑定

v-model: 双向绑定, 改变或者绑定,是个双向的

  1. 和v-bind作用相同, 去对应的vue对象里的data取值, 把取到的值赋值给所绑定的对象
  2. v-model绑定的参数,  当这个参数(在html中)发生改变的时候, 他会同时去修改对应vue对象中data里面所对应的值
  • 注意: 双向绑定v-model:  一般用于表单元素的value属性,所以有时候可以省略的写  v-model="***"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<!--v-model: 双向绑定, 改变或者绑定,是个双向的
 1, 和v-bind作用相同, 去对应的vue对象里的data取值, 把取到的值赋值给所绑定的对象
 2, v-model绑定的参数,  当这个参数(在html中)发生改变的时候, 他会同时去修改
    对应vue对象中data里面所对应的值

    注意: 双向绑定v-model:  一般用于表单元素的value属性
            所以有时候可以省略的写  v-model="***"
 -->


<div id="root">
    {{msg}}
    <input v-bind:value="msg">

    <input v-model:value="msg">
    <input v-model="msg">

    <select v-model="msg">
        <option value="123">123</option>
        <option value="321">321</option>
    </select>
</div>

<script>
   new Vue({
       el: '#root',
       data: {
           msg: 123
       }
   })
</script>

</body>
</html>

 

 

 

1.5.3 V-text   v-html

类似于dom操作中的 innerText   innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="root">
    <div v-text="aaa"></div>
    <div v-html="bbb"></div>
</div>

<script>
    new Vue({
        el:'#root',
        data: {
            aaa: 'aaaa',
            bbb: '<b>bbbb</b>'
        }
    })
</script>


</body>
</html>

 

 

 

 

 

 

 

1.5.4 V-on:   事件监听

v-on: 绑定事件监听器。可简写@

<!--v-on:标识vue语法的事件监听,把监听到的事件, 触发到 对应vue对象的methods里面去-->
<!-- vue中没有onclick -->

 

<!--注意1:  在vue中, 如果要在方法或者别的钩子函数里, 要访问data里的值,  
            要通过  this.参数名  来访问
            这个this 就是指代这个vue对象-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<!--v-on:标识vue语法的事件监听
        把监听到的事件, 触发到 对应vue对象的methods里面去

        可以简写: v-on: 可以简写成 @
-->
<!-- vue中没有onclick -->

<div id="root">
    {{msg}}
<!--    <button onclick="f1()">点击</button>-->
    <input v-model="aaa">
    <button v-on:click="f1">点击</button>
    <button @click="f1">点击</button>
</div>

<script>
    // function f1() {
    //     alert(123)
    // }
    new Vue({
        el: '#root',
        data: {
            msg:123,
            aaa: ''
        },
        methods:{
           f1: function () {
               this.msg = this.aaa
           }
        }
    })

    // 耦合:
    // 解耦: 写程序, 贯穿我们整个程序生涯是始终
    //         把强关联性的东西变成弱关联

</script>


</body>
</html>

耦合就是相互交织在一起。一个东西嵌套另一个东西,嵌套得特别紧密。

两个方法很紧密,为什么不写成一个方法,要写成两个方法?东西多了,可能出现问题,不好改。写成多个,好修改。

分布式——为了避免一个服务挂掉,整个服务挂掉。

 

 

1.5.5 V-show

v-show:标签控制隐藏, (display设置none)

 

<!--注意1:  在vue中, 如果要在方法或者别的钩子函数里, 要访问data里的值,
            要通过  this.参数名  来访问
            这个this 就是指代这个vue对象
-->


<!--注意2: 在v-show的判断条件里, 可以写表达式-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>


<!--注意1:  在vue中, 如果要在方法或者别的钩子函数里, 要访问data里的值,
            要通过  this.参数名  来访问
            这个this 就是指代这个vue对象
-->

<!--注意2: 在v-show的判断条件里, 可以写表达式-->

<div id="root">

    <div v-show="bool">
        我是一个div
    </div>

    <div v-show="msg=='1234'">
        我是一个div
    </div>

    <div v-show="'123'">
        我是一个div123
    </div>

    <button @click="change1">隐藏和显示</button>

</div>
<script>
    new Vue({
        el:'#root',
        data: {
            bool: false,
            msg: '123'
        },
        methods: {
            change1: function () {
                this.bool = !this.bool
            }
        }
    })

</script>

</body>
</html>

 

 

 

 

1.5.6 V-if

v-else-if     v-else

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <div v-if="bool1">
        div1
    </div>
    <div v-else-if="bool2">
        div2
    </div>
    <div v-else>
        div3
    </div>
</div>

<script>
    new Vue({
        el: '#root',
        data: {
            bool1: true,
            bool2: false
        }
    })
</script>

</body>
</html>

 

v-if和v-show的区别:  

 v-if逻辑中,如果不满足加载条件, 那么该元素不会挂载到dom树上去.  但是v-show 无论显示与否, 都会挂载到dom树上,是不过会显示和不显示

 

 

 

 

 

1.5.7 V-for

在vu中对应的html代码中创建一个循环结构

 

<!--注意1: 循环渲染的,到底是什么?
            循环渲染的, 是v-for这个指令所在的html元素
注意2: v-for指令必须要和 :key配套出现
            并且key值唯一, 不可重复

            (aaa, index) in list"
            index代之循环遍历的下标
    注意3:  v-for 这个循环, 可以用 of/in 两种形式来循环
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<!--注意1: 循环渲染的,到底是什么?
            循环渲染的, 是v-for这个指令所在的html元素
-->

<!--注意2: v-for指令必须要和 :key配套出现
            并且key值唯一, 不可重复

            (aaa, index) in list"
            index代之循环遍历的下标
-->

<!--
    注意3:  v-for 这个循环, 可以用 of/in 两种形式来循环
-->

<div id="root">
    <div v-for="(aaa, index) of list"   :key="index">
        {{aaa}}--{{index}}
    </div>


    <div v-for="item in list2" :key="item.id">
        <img :src="item.src">
    </div>

    <button @click="f1">点击</button>

</div>
<script>
    new Vue({
        el:'#root',
        data:{
            list: ['1', '22', '333', '4444'],
            list2: [{
                id: 1,
                src: '1111.png'
            },
                {
                    id: 2,
                    src: '2222.png'
                }
            ]
        },
        methods: {
            f1: function () {
                this.list2[0].src = '1234.png'
            }
        }
    })
</script>

</body>
</html>

 

 

 

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>


<div id="root">
    <div v-for="(item, index) in list" :key="index" @click="delete1(index)">
        {{item}}
    </div>
    <input v-model="inputstr"><button @click="add">添加</button>
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            list: ['123', '456', '789'],
            inputstr: ''
        },
        methods: {
            add: function () {
                this.list.push(this.inputstr)
                this.inputstr = ''
            },
            delete1: function (parm) {
                this.list.splice(parm, 1)

            }
        }
    })
</script>


<!--  有时候 某些形式修改list的时候, v-for是不会重新渲染的   -->


</body>
</html>

 

 

 

 

 

 

<!--  有时候 某些形式修改list的时候, v-for是不会重新渲染的   -->

 

 

1.5.8 V-pre

 v-pre可以用来阻止预编译,有v-pre指令的标签内部的内容不会被编译,会原样输出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <div v-pre>
        {{msg}}
    </div>
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            msg: 123
        }
    })
</script>
</body>
</html>

 

 

 

 

1.5.9 v-cloak

  •  延迟显示。
  • 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 标签直到实例准备完毕
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        [v-cloak]{
            /*display: none;*/
            font-size: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div id="root">
    <div v-cloak>
        {{msg}}
    </div>
</div>
<script>

    // setTimeout  在多少毫秒秒之后,执行什么什么东西
    setTimeout('f()', 3000)

    function f() {
        new Vue({
            el:'#root',
            data:{
                msg: 4444
            }
        })
    }
</script>

</body>
</html>

 

 

 

 

如果vue对象没创建,div中v-cloak是一个自定义属性,在style标签中对这个属性做了监控:如果有这个属性,就让他隐藏掉display: none

当vue对象加载出来了,它看到里面的v-cloak,就立马把div中的v-cloak干掉,style中的属性选择器就没有对应的属性了,div中的内容就会显示出来了。

1.5.10 V-once

只加载一次(只编译一次)

  • 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <div v-once>
        {{msg}}
    </div>
    {{msg}}
    <input v-model="msg">
</div>

<script>
    new Vue({
        el: '#root',
        data: {
            msg: 123
        }
    })
</script>

</body>
</html>

 

 

 

重点

V指令, 好好练一下

 

day5作业

1, 注册页面, ----dom操作---> vue操作(dom操作不要)

2, 汇率换算------dom操作---> vue操作(dom操作不要)

把dom操作换成绑定,  数据移到vue对象的data

 demo1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <!--实现注册页面(看不清换一张,和验证码验证)-->
    <table cellspacing="10" >
        <tr>
            <td>注册邮箱:</td>
            <td><input></td>
        </tr>
        <tr>
            <td></td>
            <td>你还可以使用手机注册</td>
        </tr>
        <tr>
            <td>创建密码:</td>
            <td><input></td>
        </tr>
        <tr>
            <td>真实姓名:</td>
            <td><input></td>
        </tr>
        <tr>
            <td align="right">性别:</td>
            <td>
                <input type="radio" value="1" name="aaa">男
                <input type="radio" value="2" name="aaa">女
            </td>
        </tr>
        <tr>
            <td align="right">生日:</td>
            <td>
                <select>
                    <option>2000</option>
                    <option>2000</option>
                    <option>2000</option>
                    <option>2000</option>
                </select>年
                <select>
                    <option>00</option>
                    <option>00</option>
                    <option>00</option>
                    <option>00</option>
                </select>月
                <select>
                    <option>00</option>
                    <option>00</option>
                    <option>00</option>
                    <option>00</option>
                </select>日
            </td>
        </tr>
        <tr>
            <td align="right">我正在:</td>
            <td>
                <select>
                    <option>学习</option>
                    <option>睡觉</option>
                    <option>机器学习</option>
                    <option>00</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <!--span就是一个标签,不会影响你的内容-->
                <img  id="img1" :src="url"><span @click="changeImg" >看不清.换一张?</span>
            </td>
        </tr>
        <tr>
            <td align="right">验证码:</td>
            <td><input id="inputStr" v-model="inputStr"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <img @click="click1" src="btn_reg.gif">
            </td>
        </tr>
    </table>
</div>


<script>

    new Vue({
        el:'#root',
        data:{
            listurl:["1111.png","1234.png","2222.png","3333.png","4567.png"],
            listNum:['1111','1234','2222','3333','4567'],
            midTag:-1, //记录前一次的验证码索引
            url: "verycode.gif",
            inputStr:''

        },
        methods:{
            changeImg:function() {
                var bool = true
                //新验证码索引与前一次验证码索引值相同,则一直循环,直到值不同为止
                while(bool){
                    var tag = Math.floor(Math.random()*this.listurl.length)
                    if(tag == this.midTag){
                        //新验证码索引与前一次验证码索引值相同
                    }else{
                        //索引值不同
                        bool = false
                        this.midTag = tag
                    }
                }
                this.url = this.listurl[this.midTag]
            },

            click1:function () {
                if(this.midTag == -1){
                    if(this.inputStr == "bnksu"){
                        alert("验证码正确")
                    }else{
                        alert("验证码错误")
                    }
                    return
                }
                var str = this.listNum[this.midTag]
                if(this.inputStr == str){
                    alert("验证码正确")
                }else{
                    alert("验证码错误")
                }
            }
        }
    })

</script>

</body>
</html>

 

demo2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        select, button{
            height: 30px;
        }
        input{
            height: 20px;
        }
        .div2{
            margin-bottom: 5px ;
        }

        td{
            width: 200px;
            height: 30px;
            text-align: center;
        }

        [colspan] {
            background: red;
        }
        .div1{
            width: 610px;
            margin: 0 auto;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
<!--实现汇率换算页面(点击互换和汇率换算)-->

<div class="div1" id="root">

    <div class="div2">
        <select id="select1" v-model="select1Value">
            <option value="1">美元</option>
            <option value="2">人民币</option>
            <option value="3">欧元</option>
            <option value="4">日元</option>
            <option value="5">韩元</option>
            <option value="6">港元</option>
        </select>

        <button @click="change1">互换</button>

        <select id="select2" v-model="select2Value">
            <option value="1">美元</option>
            <option value="2">人民币</option>
            <option value="3">欧元</option>
            <option value="4">日元</option>
            <option value="5">韩元</option>
            <option value="6">港元</option>
        </select>

        数额:
        <input id="inputStr" v-model="inputStr">

        <button @click="change2"> 按汇率换算</button>

    </div>
    <table border="1px">
        <tr>
            <td colspan="3">按当前汇率换算结果</td>
        </tr>
        <tr>
            <td id="td11">{{td11}}</td>
            <td>汇率</td>
            <td id="td13">{{td13}}</td>
        </tr>
        <tr>
            <td id="td21">{{td21}}</td>
            <td id="td22">{{td22}}</td>
            <td id="td23">{{td23}}</td>
        </tr>

    </table>
</div>

<script>

    new Vue({
        el:'#root',
        data:{
            listRate :[1, 7,  0.9 , 100, 1000, 7],
            listM :['美元', '人民币', '欧元', '日元', '韩元', '港元'],
            select1Value:1,
            select2Value:1,
            inputStr:'',
            td11:'美元',
            td13:'人民币',
            td21:'100',
            td22:'7',
            td23:'700'

        },
        methods:{
            change1:function() {
                var mid = this.select1Value
                this.select1Value = this.select2Value
                this.select2Value = mid
            },

            change2:function() {
                //select2.value - 1 是因为select2的value的下标是从1开始的。
                var rate = this.listRate[this.select2Value -1] / this.listRate[this.select1Value -1]
                var money =  this.inputStr*rate

                this.td11=this.listM[this.select1Value-1]
                this.td13=this.listM[this.select2Value-1]
                this.td21= this.inputStr
                this.td22= rate
                this.td23= money
            }

        }
    })

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

 

 

day6

1.5.10 回顾

v-bind:  单向绑定, 可以去vue对象的data里面取参数, 绑定到对应的属性上

v-model:  双向绑定 ,  可以取值从Vue对象, 并且改变的话也会影响到vue对象中的值

相互关联, 相互影响

v-text:   向标签内部插入一个字符串

v-html:   向标签内部插入一个可以是字符串,也可以是携带html标签的代码段

v-on:    事件监听, 可以缩写成 @  , 监听一个方法触发到vue对象的methods里面

v-show:  隐藏和显示,                            一定会挂载到dom树上

v-if     也可以做隐藏和显示(分支结构)       不一定, 满足挂载, 不满足不挂载 

v-for:  循环渲染, 循环显示,   数组,  for循环出来的是其所在标签

一定要有个   :key=’唯一值’

In/of

v-pre:  阻止预编译

v-cloak:  延迟加载

v-once:  只加载一次

1.6 计算属性

computed: 一个属性是通过别的属性计算而来, 是个属性(虽然看起来, 看起来像个方法, 但是外在表现是个属性)

计算属性所计算的时机:  当它依赖的属性发生变化的时候, 那么它就会重新计算

不是存在于data里的一个参数, 存在computed

computed: {
    sum: function () {
        return this.num1 + this.num2
    }
},

 

用function来做

 

 

 

用computed来做

 

 

 

1.7 侦听器

watch: 监听器, 侦听一个vue对象中属性的变化, 然后触发一些操作

 

Watch:  是vue对象的一个固有属性, 里面写侦听器

 注意: 我们如果想侦听那个参数发生改变, 侦听器的方法名就是该参数

 

watch: {
    msg: function () {
        this.changetimes ++
    }
}

 

 

 

1.8 模板

Template:  模板是vue对象(此时此刻写法) 是一个以标签包裹的html代码块

模板会替换挂载的元素

  •  一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略(除非模板的内容有分发插槽 v-solt)。
new Vue({
    el:'#root',
    template: '<div>567</div>',
    data: {
        msg: 123
    }
})

 

 

1.9 组件

把一个整体的东西拆分成不同的东西, 

表现在我们前端里, 就是把一个页面拆分成不同的分块来实现

表现在我们vue里, 把一个页面, 拆分成多个vue对象来实现

在vue中更深层次的表现, 就是,把一个页面关联成一个vue对象(入口对象), 这个对象有一系列子对象(子对象通过某种途径和入口对象建立引用关系), 构建出一种类似于dom树结构, 组件树(对象树)

 

组件: 在vue中就是vue对象

 

 

 

如上图,左边是一个网页,一整个页面,首先是一个对象,一个绿色的小方块就是一个对象,通过某种途径,下面关联三个——浅灰色的vue对象,这三个vue对象分别处理这三块内容,第二个浅灰色,它下面又分了两个vue对象来处理;第三个浅灰色,它里面又分了三个深灰色vue对象来处理。

 

和dom树没有任何区别,只不过里面的dom节点,现在变成了vue对象,就是组件。

 

1.10 在html中有两种组件的写法

1.10.1 全局组件

 

 

 

1.10.2 局部组件

 

 

 

安装一下Node

 

 

 

默认安装

判断安装是否成功?

 

 

 

 

 

1.10.3 前后端分离

前端和后端分离:   工程上的分离, (分为前端项目,  分为后端项目)

对于前后端不分离的来说,  数据和前端代码的结合----服务器

 

前后端不分离的项目(前端和后端属于一个项目)

 

前后端分离的写法:   数据结合-----浏览器

 

 

1.10.4 组件间传值: 向下(父组件传给子组件)传值

Props

  • props 用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。

v-bind :  单向绑定

 

传值: 

 至少要分两步,  

第一步:递(父组件, 传递通过v-bind)   

 第二步: 接收(子组件接收, 通过 props)

 

 

 

 

 

1.10.5 组件间传值: 向上(子组件传递给父组件)

也要有两个动作:  

1: 子组件通知父组件:  emit

2: 父组件监听子组件:  自定义方法

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="root">
<!--    接收子组件抛出方法(参数没有,或者一个的写法)-->
<!--    <aaa v-for="(item, index) in list"-->
<!--         :key="index"-->
<!--         v-bind:bbb="item"-->
<!--         @ccc="delete1"-->
<!--    ></aaa>-->

    <!--传多个参数-->
    <aaa v-for="(item, index) in list"
         :key="index"
         v-bind:bbb="item"
         @ccc="delete1(arguments)"
    ></aaa>
</div>
<script>
    Vue.component('aaa', {
        props: ['bbb'], // 不能修改
        template: '<div><div @click="click1">{{bbb}}</div></div>',
        methods: {
            click1: function () {
                // this.$emit('ccc', 1) // 传递一个参数
                this.$emit('ccc', 1, 2)
            }
        }
    })
    new Vue({
        el:'#root',
        data: {
            list: [ '1' , '2', '3', '4']
        },
        methods: {
            delete1: function (arguments) {
                console.log('父')
                console.log(arguments)
            }
        }
    })
</script>

</body>
</html>

点击删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="root">
<!--    接收子组件抛出方法(参数没有,或者一个的写法)-->
    <aaa v-for="(item, index) in list"
         :key="index"
         v-bind:bbb="item"
         v-bind:index="index"
         @ccc="delete1"
    ></aaa>
</div>
<script>
    Vue.component('aaa', {
        props: ['bbb', 'index'], // 不能修改
        template: '<div><div @click="click1">{{bbb}}--{{index}}</div></div>',
        methods: {
            click1: function () {
                this.$emit('ccc', this.index) // 传递一个参数
            }
        }
    })
    new Vue({
        el:'#root',
        data: {
            list: [ '1' , '2', '3', '4']
        },
        methods: {
            delete1: function (parm) {
                this.list.splice(parm, 1)
                console.log(parm)
            }
        }
    })
</script>

</body>
</html>

 

 Vue生命周期

从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。

生命周期函数

  • beforeCreate
  • Created
  • beforeMount
  • Mounted
  • beforeUpdtae
  • Updated
  • beforeDestroy
  • destoryed

Vue的生命周期方法,是vue对象固有的

 

创建------挂载------改变-----销毁

 

beforeCreate:function () {
    console.log("控制台打印:beforeCreate")
},
created:function () {
    console.log("控制台打印:created")
},
beforeMount:function () {
    //页面还未被渲染
    console.log(this.$el),
    console.log("控制台打印:beforeMount")
},
mounted:function () {
    //页面渲染完成
    console.log(this.$el),
    console.log("控制台打印:mounted")
},
beforeDestroy:function () {
    console.log("控制台打印:beforeDestory")
},
destroyed:function () {
    console.log("控制台打印:destroyed")
},
beforeUpdate:function () {
    console.log("控制台打印:beforeUpdate")
},
updated:function () {
    console.log("控制台打印:updated")
}。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>


<div id="root">
    {{msg}}
    <input v-model="msg">

</div>
<script>

    var root = new Vue({
        el:"#root",
        data: {
            msg: 123
        },
        beforeCreate:function () {
            console.log("控制台打印:beforeCreate")
        },
        created:function () {
            console.log("控制台打印:created")
        },
        beforeMount:function () {
            //页面还未被渲染
            console.log(this.$el),
                console.log("控制台打印:beforeMount")
        },
        mounted:function () {
            //页面渲染完成
            console.log(this.$el),
                console.log("控制台打印:mounted")
        },
        beforeUpdate:function () {
            console.log("控制台打印:beforeUpdate")
        },
        updated:function () {
            console.log("控制台打印:updated")
        },
        beforeDestroy:function () {
            console.log("控制台打印:beforeDestory")
        },
        destroyed:function () {
            console.log("控制台打印:destroyed")
        }
    })
</script>

</body>
</html>

Destory方法,要借助浏览器展示,(是浏览器的方法)。

 

删除了root对象后,再update root,就不更新了。因为root对象已经被删除了。

 

还有三个没讲(不常用到)

 

2前端

2.1各种端的概念

前端, 

移动web,  webapp:   

pc端 , 

小程序:  

一个人:  前端的壁垒在哪

另一个人:  你谈什么壁垒, 你都被小程序打到家门口

Pwa:  让前端替代所有端

 

要替代一切可以显示的东西, 网页, app, 浏览器

暂时没有成功,  

 

假如成功?  

Wxml  wxss  js  

 

H5 , 

大前端: (WEB统一):    前端统一所有端

 

游戏:  游戏引擎

app开发:  原生开发(贴近于底层语言开发,  安卓:java.  苹果: object-c    ),    

非原生开发:  vue 

 

2.3当下前端的核心

三个基础( html  css   js), 三个框架

3三大框架

3.1什么是框架 ?

一些基础性,准备性的东西

3.2什么是前端框架?

框架是一个半成品,

已经对基础的代码进行了封装并提供相应的API,

开发者在使用框架时直接调用封装好的api可以省去很多代码编写,从而提高工作效率和开发速度..

比如前端框架封装的一些功能:  html文档操作,漂亮的各种控件(按钮,表单等等),可以帮助快速的构建网站.

3.3三个框架

前端现在基本上围绕着三大前端框架

3.3.1Vue

前端框架

尤雨溪  写的,上海人。在美国上大学,google工作,他写的Vue.

 

3.3.2React

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

3.3.3Angular

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中

Angualr 基于 TypeScript 和 react、vue 相比, Angular 更适合中大型企业级项目。

 

3.4三个框架的对比

 

 

 

如果是JavaScript爱好者,使用React,因为它完全与JavaScript有关。

如果更喜欢灵活性,使用React。

如果喜欢在TypeScript中编码,选择Angular。

如果喜欢面向对象的编程,使用Angular。

如果喜欢干净的代码,使用Vue。

Vue提供最简单的学习曲线,是初学者的理想选择。(学习曲线比较平稳)

如果要在应用程序中分离关注点,使用Vue。

Vue非常适合小型团队和小型项目。如果应用程序很大并且具有重要的未来扩展计划,选择React或Angular。(不是很赞同)

 

Vue最容易: 学习曲线最平滑

React: 次之

Angular: 最难

Vue vue.js

4其它

4.1学习vue和开发vue前端项目我们要用到的

4.1.1 node 和npm

类比:(  js->node   ,    java->虚拟机  )

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。

 

Npm:  包管理工具

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题

允许用户从NPM服务器下载别人编写的第三方包到本地使用。

允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。

 

 

4.1.2 webpack

作用:  打包前端项目

 

webpack可以看做是模块打包机:

它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(TypeScript等),并将其转换和打包为合适的格式供浏览器使用.

简单的说就是打包,压缩各种静态资源的工具

目的à(性能优化,减少浏览器向服务器的请求次数,节约服务器的带宽资源)

 

4.1.3 ESLint

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具

 

一些正规的公司,强制性用eslint,规范前端(每个语言都会经历  刚开始非常乱---慢慢规范起来的过程。前端现在处于非常乱的时期)

 

4.2前端里程碑和其它重要技术

jQuery: JavaScript框架(对js进行很多封装的东西)

提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计

TypeScript: 类似JavaScript

Js的超集

Microsoft 开发和维护的一种面向对象的编程语言。它是JavaScript的超集

 

 

Flutter:谷歌的移动UI框架

可以快速在iOS和Android上构建高质量的(不是纯原生)原生用户界面。

React Native:移动应用开发框架

Facebook的跨平台移动应用开发框架,框架 React 在原生移动应用平台的衍生产物

WEEX:移动应用开发框架

阿里项目,目前 Vue.js 和 Rax(阿里内部一个项目) 这两个前端框架被广泛应用于 Weex 页面开发

 

原生开发

Iosà Objective-C

Android->java

 

UI框架(组件)和UI

 

Ui: 工作职位, (艺术)

UI框架: 实际上是前端程序员,根据经验整理的一些具用共性的样式,图标  (java----第三方bao)

 

学前端路线

先把html、css、js三个基础的搞熟,多写点,再学框架。

有时间再学vue, 再看es6、webpack,再搞搞flutter(移动开发),如果不想搞移动开发,可以搞搞小程序。

posted @ 2022-05-04 02:26  dust--  阅读(73)  评论(0)    收藏  举报