常用的前端框架Angular、React、Vue

其他 2019-10-10 02:28:23 阅读次数: 0

VUE

一.vue导读

1.1 vue的优点:结合其他框架点,轻量级,中文API,数据驱动,双向绑定,MVVM设计模式,组件化开发,单页面应用

1.2 vue环境的导入:

　　本地导入

 <!--方法一:下载到本地直接引如js文件-->
    <script src="js文件的导入/vue.js"></script>

　　CDN导入

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
               
</head>
<body>
    <div id="app">
        
    </div>
 <!--方法一:下载到本地直接引如js文件-->
    <script src="js文件的导入/vue.js"></script>


<!--方法二:直接导入官网vue运行环境的url 链接-->
    <!--<script src="https://cn.vuejs.org/js/vue.js"></script>-->

</body>
</html>

1.3 挂载点

01 vue 的导入.html

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

</head>
<body>
    <!--id 类的操作语法渲染-->
    <div id="app">
        1234
        {{123}}
        abc
    </div>
    <p class="xxx">
        789
        {{666}}
        abcd
    </p>
 <!--方法一:下载到本地直接引如js文件-->
    <script src="js文件的导入/vue.js"></script>
<!--方法二:直接导入官网vue运行环境的url 链接-->
    <!--<script src="https://cn.vuejs.org/js/vue.js"></script>-->
    <script>
        new Vue({
            // "el" 原本是字符串el 其实本质是一样的 vue 在渲染时会自动加引号
            // 注意:1.html与body 不能作为挂载点 2. 一个vue对象挂载点之后索引一个匹配结果,所以挂载点一般用id标识

            el:'#app'
        });

        new Vue({
            // 找到这个标签进行渲染 如果没有将原来{{666}} 进行new Vue({key:val进行挂载}) 将不会解析语法
当普通字符串
"el":'.xxx' }) </script> </body> </html>

挂载点的导入遇到的问题 

如 {{}} 中间不为空时说明不是空值 会将标签愿意展示 想要进行挂载点 必须时 {{ 空格 }} 》》》 说明取到的是空值

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue模板的导入</title>

</head>
<body>
    <div id="app">
        <!--# 这里是必须需要加空 文本值这样才是空值 -->

    </div>

</body>
<script src='js/vue.js'></script>
<script >
    new Vue({
        el:"#app"

    });
</script>
<script>
    let b=20;
    let dic={a:10,
    b};
    console.log(dic)
    // 也就是说我我们变量是键值对的形式存在 可以简写b 会将我们的定义变量 的value 值 自动添加
    // Object
    // a: 10
    // b: 20
    // __proto__: Object



</script>

<script>
    new Vue({
        el:'body'
    })
    // vue.js:634 [Vue warn]: Do not mount Vue to <html> or <body> - 
    // mount to normal elements instead.
    // 也就是说不能用html和body 进行挂载
</script>


</html>

二.实列成员-挂载点

插值表达式取值

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue模板的导入</title>

</head>
<body>
    <div id="pp">
        <!--{{}} 是插值表达式，中间出现的info是value的变量&#45;&#45;key-->
        <!--# 这里是必须需要加空 文本值这样才是空值 不能进行渲染-->
        <!--检测数据的类型的渲染 数据 列表 字符串 字典-->
        <p>{{num}}</p>
        <p>{{info}}</p>
        <p>{{dic}}</p>
        <p>{{list1}}</p>

        <p>{{result}}</p>

    </div>

</body>
<script src='js/vue.js'></script>
<script >
    let p =new Vue({
        el:"#pp",
        data:{
            num:1000,    // 数据类型
            result:true, // 布尔值
            list1:[1,2,3,4,5],
            dic:{"name":'koko',age:18},
            info:'我是字符串'

        }

    });
</script>
<script>
    // 取值方式一获取data 内我们在标签内定义的所有{{infO(理解为key：添加对应得值)}}
    // 获取data的所有值 本身就是一个大字典
    // let app = 将挂载点重新赋值一个变量
    // console.log(p);

    // 取值方式二
    // console.log(p.$data.info) // 可以 通过变量$data.点击任意字符串里面的key{{中间的info}}

    // 取值方式三
    console.log(p.num)

</script>

</html>

三.实列成员-数据

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue模板的导入</title>

</head>
<body>
    <div id="pp">
        <!--{{}} 是插值表达式，中间出现的info是value的变量&#45;&#45;key-->
        <!--# 这里是必须需要加空 文本值这样才是空值 不能进行渲染-->
        <!--检测数据的类型的渲染 数据 列表 字符串 字典-->
        <p>{{num}}</p>
        <p>{{info}}</p>
        <p>{{dic}}</p>
        <p>{{list1}}</p>

        <p>{{result}}</p>

    </div>

</body>
<script src='js/vue.js'></script>
<script >
    let p =new Vue({
        el:"#pp",
        data:{
            num:1000,    // 数据类型
            result:true, // 布尔值
            list1:[1,2,3,4,5],
            dic:{"name":'koko',age:18},
            info:'我是字符串'

        }

    });
</script>
<script>
    // 获取data的所有值 本身就是一个大字典
    // let app = 将挂载点重新赋值一个变量
    // console.log(p);

    // 取值方式
    // console.log(p.$data.info) // 可以 通过变量$data.点击任意字符串里面的key{{中间的info}}

    // 取值方式三
    console.log(p.num)
    // 总结：
    // 1) 用实例成员data为vue环境提供数据，数据采用字典{}形式
    // 2) 在插值表达式{{}}中，直接书写数据的key来访问数据
    // 3) 在外部通过接受实例的变量p，访问实例成员(实例成员都用$开头)，间接访问到数据
    //      p.$data.info
    // 4) 在外部也可以通过实例变量app直接访问数据
    //      p.info
</script>

</html>
// 总结：
    // 1) 用实例成员data为vue环境提供数据，数据采用字典{}形式
    // 2) 在插值表达式{{}}中，直接书写数据的key来访问数据
    // 3) 在外部通过接受实例的变量p，访问实例成员(实例成员都用$开头)，间接访问到数据
    //      p.$data.info
    // 4) 在外部也可以通过实例变量app直接访问数据 // p.info

四.实列成员-过滤器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue模板的导入</title>

</head>
<body>
    <div id="app">
        <!--# 这里是必须需要加空 文本值这样才是空值 -->
       <!--插值表达式可以做简单的运算-->
        <p>{{num+108.99}}</p>
        <!--<p>{{msg.split('')}}</p>-->
        <!--# 可以获取去字符串切分为列表的形式 【2】 获取2索引的数据-->
        <p>{{msg.split('')[2] }</p>
        <p>{{num|f1}}</p>

        <!--<p>{{10,20,30,40 | f2}}</p> 全部-->

        <!--<p>{{10,20 | f2(30,50)}}</p> 通过f2(30,50)进行传值-->

        <!--<p>{{10| f2(1,2,3)}}</p> 将余下的值通f2(进行传值)-->
        
        <!--<p>{{10 | f2()}}</p> NaN 没有结果返回一个NaN-->

    </div>

</body>
<script src='js/vue.js'></script>
<script >
   let p = new Vue({
        el:"#app",
       data:{num:1000, // 可以直接在页面进行渲染1108.99
        msg:'hahahah ',  // [ "h", "a", "p", "p", "y" ]


       },
       // filters：过滤的是一个大字典f1》》》key:对应的是函数进行传参}
       filters:{
            f1:function (num) {
                return num**3 //结果 100000
            },

           // 全部
           f2:function (a,b,c,d) {
                return a+b+c+d //结果 100
           }


       }

    });
</script>
<script>
 // 通过外部渲染
 //    console.log(p.num) // 不能通过这种方式 因为获取的是原值num

</script>

</html>
</html>

语法：zaiVue内
filsters:{

过滤的函数f1:function(){

return num**3}

}

五.文本指令

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue模板的导入</title>

</head>
<body>
    <div id="app">
        <!--# 这里是必须需要加空 文本值这样才是空值 -->
        <!--属性的设置-->
        <!--(2)v-指令名='常量'，常量采用的基本语法，数据和布尔值可以直接显示 字符串需要特殊‘str’-->
        <!--<p>{{info}}</p>-->
    <p v-text="123"></p>
    <p v-text="true"></p>
        <!--字符串的解析必须加一个字符串符号好 不然就得去data：{dab:'abd'}-->
    <p v-text="'abd'"></p>


     <!--哈哈我是data提供的数据 字符串需要特殊‘str’&ndash;&gt;-->
    <p v-text="'哈哈'+info"></p>

        <!--// 设置标签样式属性-->
        <p v-html="`<b style='color:red'>好的很棒哦</b>`"></p>
        <!--` 反引号 可以放多个值`-->
        <p v-text="`<b>nice</b>`"></p>
    </div>

</body>
<script src='js/vue.js'></script>
<script >
    let p = new Vue({
        el:"#app",
        data:{
            info:'我是data提供的数据'
        }


    });
</script>
<script>
    // console.log(p)
    // js 多行字符串 可以反引号``
    let s1 = `
    我是第一行
    我是第二行
    我是结束行
    `;
    console.log(s1);
    let name='koko';
    let age=18;
    let s2 =`
     name:${name}
     age:${age}
   `;
    console.log(s2)
    //文本指令.html?_ijt=j…k8r7h8klfb52b5je:49 
    //    我是第一行
    //    我是第二行
    //    我是结束行
    
    // 文本指令.html?_ijt=j…k8r7h8klfb52b5je:56 
    //     name:koko
    //     age:18
</script>

</html>

六.事件指令

点击事件进行加减

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue模板的导入</title>
    <style>
        .low-num:hover{
            color:red;
        }
        .low-num{
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div id="app">
        <!--# 这里是必须需要加空 文本值这样才是空值 -->
       <p class="low-num" v-on:click="lowNum">
           <span>点击减一：</span>
           <span>{{num}}</span>
       </p>
        <!--<p v-on:dbclick="dbAction">双击</p>-->


    </div>

</body>
<script src='js/vue.js'></script>
<script >
    new Vue({
        el:"#app",
        data:{num:100},
        // 上面是操作属性 这里是操作函数及方法
        methods:{
            lowNum:function () {
                // alert(this.num);
                // 在vue内部的方法中，使用变量
                this.num -=1;
            }
        }

    });
</script>

</html>

Mouse的事件传值

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            /*页面文本不允许选择*/
            user-select: none;
        }
        .low-num {
            cursor: pointer;
        }
        .low-num:hover {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 事件指令：v-on:事件名="事件函数名"   -->
        <p class="low-num" v-on:click="lowNum">
            <span>点击减一：</span>
            <span>{{ num }}</span>
        </p>

        <p v-on:dblclick="dblAction">双击</p>

        <!-- v-on:事件名="事件函数" 可以简写为 @事件名="事件函数"  -->
        <p @mouseover="overAction()">悬浮</p>
        <p @mouseover="overAction(10)">悬浮1</p>
        <p @mouseover="overAction(10, 20)">悬浮2</p>
        <p @mouseover="overAct ion(10, 20, $event)">悬浮3</p>

        <!-- 事件传参：
         @事件='方法'  默认传入事件对象 $event
         @事件='方法()'  不传递任何参数
         @事件='方法(参数...)'  只传递自定义参数
         @事件='方法($event, 参数...)'  自定义传参时传递事件对象
         -->
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            num: 99
        },
        methods: {
            lowNum: function () {
                // 在vue实例内部的方法中，使用变量
                // alert(this.num)
                this.num -= 1;
            },
            dblAction (ev) {
                // alert('双击事件');
                console.log(ev)
            },
            overAction(a, b, c) {
                console.log(a, b, c)
            }
        }
    })
</script>

</html>

七.属性指令

自定义属性

只要有p1 值得都可以被渲染

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue模板的导入</title>
    <style>
        [index]{
            color: orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--# 这里是必须需要加空 文本值这样才是空值 -->
       <!--属性指令语法-->
        (01)语法：v-bind:属性名="变量"
        <p id="p1" class="p1" style="" title="" index="">属性指令1</p>
        <p id="p2" v-bind:class="p1" style="" title=""  index="">属性指令2</p>
        <!--<p v-bind:index="p1">自定义属性也可以被vue绑定1</p>-->
        <!--v-bind:index='p1' >>> 简写-->
        <p :index ='p1'>自定义属性也可以被vue绑定2简写</p>
        <p></p>
    </div>

</body>
<script src='js/vue.js'></script>
<script >
    new Vue({
        el:"#app",
        data:{
            p1:'q1'
        }

    });
</script>

</html>

样式属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue模板的导入</title>
    <style>
        [index]{
            color: orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--# 这里是必须需要加空 文本值这样才是空值 -->
       <!--属性指令语法-->
        (01)语法：v-bind:属性名="变量"
        <p id="p1" class="p1" style="" title="" index="">属性指令1</p>
        <p id="p2" v-bind:class="p1" style="" title=""  index="">属性指令2</p>
        <!--<p v-bind:index="p1">自定义属性也可以被vue绑定1</p>-->
        <!--v-bind:index='p1' >>> 简写-->
        <!--<p :index ='p1'>自定义属性也可以被vue绑定2简写</p>-->


       自带style 属性

        <p :style='myStyle'>样式绑定1 通过data</p>
        <p :style="{backgroundColor:s1,color:s2,'border-radius': '50%'}">样式绑定2</p>
    </div>

</body>
<script src='js/vue.js'></script>
<script >
    new Vue({
        el:"#app",
        data:{
            p1:'q1',
            myStyle:{
            backgroundColor:'pink',
            color:'deeppink',
            'border-radius':'50%'
        },
            s1:'red',
            s2:'yellow',


        },

    });
</script>

</html>

类属性

点击事件切换类

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue模板的导入</title>
    <style>
        [index]{
            color: orange;
        }


        .aaa{
            background-color: blue;
        }
        .bbb{
            color: springgreen;
        }
        .ccc{
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--# 这里是必须需要加空 文本值这样才是空值 -->
       <!--属性指令语法-->
        (01)语法：v-bind:属性名="变量"
        <p id="p1" class="p1" style="" title="" index="">属性指令1</p>
        <p id="p2" v-bind:class="p1" style="" title=""  index="">属性指令2</p>
        <!--<p v-bind:index="p1">自定义属性也可以被vue绑定1</p>-->
        <!--v-bind:index='p1' >>> 简写-->
        <!--<p :index ='p1'>自定义属性也可以被vue绑定2简写</p>-->


       自带style 属性

        <p :style='myStyle'>样式绑定1 通过data</p>
        <p :style="{backgroundColor:s1,color:s2,'border-radius': '50%'}">样式绑定2</p>


        <p :class="c1">类样式绑定1</p>
        <p :class="{xxx:yyy}">样式绑定2</p>

                <!--案例：点击切换类名是否起作用-->
        <p v-on:click="clickA" :class="{ttt:yyy}">点击事件</p>
    </div>

</body>
<script src='js/vue.js'></script>
<script >
    new Vue({
        el:"#app",
        data:{
            p1:'q1',
            myStyle:{
            backgroundColor:'pink',
            color:'deeppink',
            'border-radius':'50%'
        },
            s1:'red',
            s2:'yellow',


            // l类属性绑定
            c1:'aaa bbb ccc',
            yyy:true, // 判断


        },
        methods:{
            clickA(){
                this.yyy=!this.yyy;
            }
        }

    });
</script>

</html>

八.动态修改文本样式案列

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue模板的导入</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: orange;

        }
        .center{
            text-align: center;
            line-height:200px;

        }
        .rcenter{
            text-align:right;
            line-height: 200px;
        }
        .right {
            text-align: right;
        }
        .top{
            line-height:21px;
        }
        .bottom{
            line-height:calc(400px - 21px);
        }

    </style>

</head>
<body>
    <div id="app">
        <!--# 这里是必须需要加空 文本值这样才是空值 -->
        <!--需求 文本上下左右的布局 属性绑定和点击绑定-->
        <div class="box" :class="[c1,{right:r,top:t,bottom:b}]" @mouseover="a1" @mousedown="a2" @mouseup="a3" @mouseout="a4">{{msg}}</div>

    </div>

</body>
<script src='js/vue.js'></script>
<script >
    new Vue({
        el:"#app",
        // 绑定函数
        methods:{
            a1(){
                this.msg ='被悬浮';
                // 正中
                this.c1='center';
                this.r=0;
                this.t=0;
                this.b=0;
            },
            a2(){
                this.msg='被按下';
               // 右上
                this.r=1;
                this.t=1;
                this.b=0;
            },
             a3(){
                // 右中
                this.msg='被抬起';
                this.c1='rcenter';
                this.r=0;
                this.t=0;
                this.b=0;
            },
            a4(){
                // 右下
                this.msg='被移开';

                this.r=1;
                this.t=0;
                this.b=1;
            },

        },
        data:{
            msg:'',
            c1:'',
            r:0,
            t:0,
            b:0,
        }

    })
</script>

</html>

九.表单指令

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue模板的导入</title>

</head>
<body>
    <div id="app">
        <!--# 这里是必须需要加空 文本值这样才是空值 -->
        <form action="">
            <!--(1)对表单标签value进行绑定操作变量是， 不能进行实时监测绑定变量-->
            <input type="text" class="ip1" :value="info">
            <input type="text" class="ip2" :value="info">
            <p class="p1">{{info}}</p>
            <hr>


            <!--(2) 表单标签得值有 v-model='变量' 来绑定控制、操做的还是value 但是拥有爱华hi变量得检测-->
            <input type="text" class="ip1" v-model="info">
            <input type="text" class="ip2" v-model="info">
            <p class="p1">{{info}}</p>



            <!--(3)v-model 操作单独复选框 -确认框-->
            是否同意：<input type="checkbox" name="agree" v-model="isAgree">

            <!--将下面实力化data得值 渲染-->
            <p>{{isAgree}}</p>

            <hr>
            <!--(3)单选框-->
            性别取向：
            男：<input type="radio" name="sex" value="male" v-model="mysex">
            女：<input type="radio" name="sex" value="female" v-model="mysex">
            其他：<input type="radio" name="sex" value="others" v-model="mysex">
            <p>{{mysex}}</p>

            (4) 复选框
            男：<input type="checkbox" name="hobbies" value="male" v-model="myHobbies">
            女：<input type="checkbox" name="hobbies" value="female" v-model="myHobbies">
           其他：<input type="checkbox" name="hobbies" value="others" v-model="myHobbies">
            <p>{{myHobbies}}</p>
        </form>


    </div>

</body>
<script src='js/vue.js'></script>
<script >
    new Vue({
        el:"#app",
        data:{
            info:'666',
            isAgree:0,
            mysex:'ohters',
            myHobbies:['male','others']
        }

    });
</script>

</html>

v-model='变量'   new Vue({

data:{// 传输数据 键值对

myHobbies:'values', ... key（变量）：value (既是表单中得value)}})

总结知识点 自己的理解

猜你喜欢

转载自www.cnblogs.com/mofujin/p/11637089.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022