ECMAScript和Vue框架学习笔记

其他 2020-04-21 23:22:33 阅读次数: 0

ECMAScript

全局变量
var x=1;
局部变量
let y=1;
静态变量
const num=1;
解构表达式

数组给变量赋值

let arr=[2,5,-10,15];
// 普通赋值
let x=arr[0],y=arr[1];
// 解构表达式赋值
let [x,y]=arr;

数组给数组赋值

// 将arr中，除去第一个元素以外剩余的元素赋值给rest数组
let [,...rest] = arr;

E对象的解析

// 将对象中的属性值赋值给变量
// 属性的位置是不固定的，所以取值的时候只能使用属性名来取
let p={name:"jack",age:21};
let {name,age}=p;

对象的解析2

// 取属性名为name的值，并且赋值变量n
let p={name:"jack",age:21};
let {name:n}=p;

对象的解析3（复合对象）

// 取对象中的对象的属性
let p={name:"jack",age:20,gril:{name:"rose",age:18}};
let {gril:{name}}=p;

对象的解析4（复制对象）

let p={name:"jack",age:20,gril:{name:"rose",age:18}};
let {...obj}=p;
函数的优化
const add = (a,b) => a + b;
对象的优化
const p ={
    name:"jack",
    age: 21,
    sayHello(){
        console.log("hello");
    }
}
函数中的解构表达式
const p ={
    name:"jack",
    age: 21
}
const hello = function({name,age}){
    console.log(name,age)
}
hello(p);

或者写成

const p ={
    name:"jack",
    age: 21
}
const hello=>({name,age})=> console.log(name,age);
hello(p);
map(对集合中的每一个元素进行处理)
// 遍历arr，将元素转换为整数赋值到arr2中
let arr=['10','5','6','-2'];
let arr2 = arr.map(s=>parseInt(s));
reduce(逐个对每个元素处理，参数为2个)
// 累加
let arr=['10','5','6','-2'];
let arr2 = arr.map(s=>parseInt(s));
arr2.reduce((a,b)=>a+b);

指定第一个的值

// 累加
let arr=['10','5','6','-2'];
let arr2 = arr.map(s=>parseInt(s));
arr2.reduce((a,b)=>a+b,0);

Vue.js

安装npm(Node.js中自带npm) （npm 全称 node package management ）

安装nrm（-g是全局安装）

npm install nrm -g

更换镜像

nrm use taobao

实践

创建一个空的工程

创建一个web Static Model

终端进入model 的目录

npm -init -y

安装vue(-save 表示本地安装，只针对当前项目安装)

npm install vue -save

demo1，Vue的简单使用，Model 到 View
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <h1>{{name}} 非常帅</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:"胡歌",
        }
    });
</script>
</body>
</html>

在控制台输入app.name=xx也可以改变其内容

在Vue的插件中改变Model 的值，View 上的值也会发生改变

demo2 从View 到 Model
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="num"><br/>
    <h1>{{name}} 非常帅</h1>
    <h1>{{num}} 位女神为其着迷</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:"胡歌",
            num: 1,
        }
    });
</script>
</body>
</html>

input 标签中v-model属性将次标签和 Model 中的num 关联起来

在输入框中输入数据，Vue 插件中Model 中的值会发生改变，Model 的值改变后View 的值也会改变

demo3 事件与Vue
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="num"><button @click="num++">+</button><br/>
    <h1>{{name}} 非常帅</h1>
    <h1>{{num}} 位女神为其着迷</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app", // el表示Vue作用的标签，标签的范围就是Vue的作用范围
        data:{ // data 对象的数据会渲染到Vue作用的标签，vue作用的标签不要使用外部定义的变量
            name:"胡歌",
            num: 1,
        }
    });
</script>
</body>
</html>

Vue 中使用 @click 定义标签点击事件，例子中每点击一次 num的值+1

demo4 Vue 中定义方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <button @click="handleClick">点我</button>
    <br>
    <input type="text" v-model="num"><button @click="num++">+</button><br/>
    <h1>{{name}} 非常帅</h1>
    <h1>{{num}} 位女神为其着迷</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:"胡歌",
            num: 1,
        },
        methods:{
            handleClick(){
                console.log("hello");
            }
        }
    });
</script>
</body>
</html>
demo5 Vue对象的created 函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <button @click="handleClick">点我</button>
    <br>
    <input type="text" v-model="num"><button @click="num++">+</button><br/>
    <h1>{{name}} 非常帅</h1>
    <h1>{{num}} 位女神为其着迷</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:"",
            num: 1,
        },
        methods:{
            handleClick(){
                console.log("hello");
            }
        },
        created(){
            // 在此出可以使用ajax请求，完成data中属性的初始化
            // setTimeout(()=>this.name="胡歌 真的",1000);
            this.name="胡歌 真的";
        }
    });
</script>
</body>
</html>

this 指代Vue 对象中，其实name不是data的属性，而是Vue的属性

created 为钩子函数，在Vue的生命周期中调用

Vue 指令

插值表达式

上述例子中的{{name}}就是插值表达式，插值表达式存在插值闪烁的问题

因此，常用v-text指令代替插值表达式

    <h1><span v-text="name"></span> 非常帅</h1>
v-text 和 v-html 的区别

v-text 原样显示文本，即使文本时html标签也会原样显示

v-html 也是显示文本，但文本是html 标签，那么将文本当成html 的一部分显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <h1><span v-text="name"></span></h1>
    <h1><span v-html="name"></span></h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:"",
            num: 1,
        },
        methods:{
            handleClick(){
                console.log("hello");
            }
        },
        created(){
            // setTimeout(()=>this.name="胡歌 真的",1000);
            this.name="<font color='#6495ed'>大家好我是胡歌</font>";
        }
    });
</script>
</body>
</html>

输出结果为：第一个将标签原样输出，第二个只输出文字

v-model

v-text 和 v-html 是单向绑定，v-model 是双向绑定。范是用户可操作的标签都可使用v-model。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <button @click="handleClick">点我</button>
    <br>
    <input type="text" v-model="num"><button @click="num++">+</button><br/>
    <h1><span v-text="name"></span> 非常帅</h1>
    <h1>{{num}} 位女神为其着迷</h1>
    <h1><span v-text="name"></span></h1>
    <h1><span v-html="name"></span></h1>

    <!-- v-model 绑定-->
    <input type="checkbox" v-model="lessons" value="Java"/>Java<br/>
    <input type="checkbox" v-model="lessons" value="Python"/>Python<br/>
    <input type="checkbox" v-model="lessons" value="IOS"/>IOS<br/>

    <h1>您已购买以下课程:{{lessons.join(",")}}</h1>



</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:"",
            num: 1,
            lessons:[],
        },
        methods:{
            handleClick(){
                console.log("hello");
            }
        },
        created(){
            // setTimeout(()=>this.name="胡歌 真的",1000);
            this.name="<font color='#6495ed'>大家好我是胡歌</font>";
        }
    });
</script>
</body>
</html>
v-on 事件绑定

v-on: 事件名=“js片段或者函数名”

@事件名="js或者函数名"

v-for 遍历集合

不带角标输出

		<ul>
            <li v-for="u in users">
  				{{u.name +","+u.age+","+u.gender}}
            </li>
        </ul>

带角标输出

        <ul>
            <li v-for="(u,i) in users">
                {{i}} {{u.name +","+u.age+","+u.gender}}
            </li>
        </ul>


            data:{
                users:[
                    {name:"柳岩",gender:"女",age:21},
                    {name: "胡歌",gender:"男",age: 30},
                    {name: "范冰冰",gender:"女",age: 24},
                    {name: "刘亦菲",gender:"女",age: 18},
                    {name: "古力娜扎",gender:"女",age: 25}
                ]
            }

对象的遍历，不带角标

        <ul>
            <li v-for="u in users[0]">
                {{u}}
            </li>
        </ul>

遍历对象，带角标

        <ul>
            <li v-for="(u,i) in users[0]">
                {{i+","+u}}
            </li>
        </ul>

遍历对象，带角标，带索引

        <ul>
            <li v-for="(v,k,i) in users[0]">
                {{i+"_"+k+","+v}}
            </li>
        </ul>

遍历数字

        <ul>
            <li v-for="i in 5">
                {{i}}
            </li>
        </ul>

:key的作用表示给元素一个唯一索引。集合被渲染到view上后，如果集合发生改变，则将重新渲染view。不加:key时，需要全部渲染一边集合，而加了:key就只渲染修改的那部分。

        <ul>
            <li v-for="(v,k,i) in users[0]" :key="i">
                {{i+"_"+k+","+v}}
            </li>
        </ul>
v-if

当条件表达式为真的时候，显示标签内的内容

        <button @click="show = !show">点击切换</button>
		<div v-if="show">
            <h1>你好</h1>
        </div>


	<script>
        const app = new Vue({
            el:"#app",
            data:{
                show: true
            }
        });
	</script>
v-show

当条件表达式为真时，显示标签内容，与v-if 的区别是，v-if 通过删除和添加标签进行内容显示和隐藏，而v-show 通过设置标签的style 进行内容的显示和隐藏

        <div v-show="show">
            <h1>你很好，我记住了</h1>
        </div>
v-for 和 v-if 一起使用

v-for 会先于v-if 执行

        <ul>
            <li v-for="i in 5" v-if="i%2 === 0">
                {{i}}
            </li>
        </ul>

v-else，v-else-if

        <ul>
            <li v-for="i in 5">
                <span v-if="i%2===0">偶数：{{i}}</span>
                <span v-else style="background-color: #cccccc">奇数：{{i}}</span>
            </li>
        </ul>

vue 修改class 属性

使用:class="变量名"或者v-bind:class="变量名"，使用Vue 修改变量的值，就可改变class 的值，但是此出不能使用插值表达式

    <style type="text/css">
        div#box{
            width: 100px;
            height: 100px;
            color: darkgray;
        }

        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>


<div id="app">
    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>
    <div id="box" :class="color">
        我是盒子
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            color:"red"
        }
    });
</script>
class 属性也可以使用对象，在style 里面也可以使用
<div id="app">
    <button @click="isRed=!isRed">切换颜色</button>
<!--    <button @click="color='blue'">蓝色</button>-->
    <div id="box" :class="{red:isRed,blue:!isRed}">
        我是盒子
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            // color:"red"
            isRed: true
        }
    });
</script>
计算属性

使用Vue 的computed，在里面加上一个方法，方法就是一个计算属性，只计算一次，之后方法名成为属性名，方法的返回值成为属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        div#box{
            width: 100px;
            height: 100px;
            color: darkgray;
        }

        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <h1>
            您的生日为：{{birth}}
        </h1>
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            birthday:1429032123201
        },
        computed:{
            birth(){
                const date = new Date(this.birthday);
                return date.getFullYear()+"年"+date.getMonth()+"月"+date.getDay()+"日";
            }
        }
    });
</script>

</body>
</html>

监控watch

demo1，浅度监控，监控变量

    <input type="text" v-model="num">

使用Vue的watch 监控变量改变，再watch 中写一个方法，第一个参数是新值，第二个参数是旧址，在函数中可以写监控到变化后所做的事情

<script>
    const app = new Vue({
        el:"#app",
        data:{
            num:1,
        },

        watch:{
            num(val,oldVal){
                console.log(val,oldVal);
            }
        }
    });
</script>

demo2，深度监控，监控对象中的属性值发生改变 ，当person的对象属性值发生改变后，执行handler函数，handler的参数为改变的值，handler里面可以写上监控到属性改变后所做的事

<script>
    const app = new Vue({
        el:"#app",
        data:{
            person:{
                name:"jack",
                age:21
            }
        },
        watch:{
            person: {
                deep:true,
                handler(val){
                    console.log(val.age);
                }
            }
        }
    });
</script>
Vue 组件（全局组件）

使用Vue.component 定义一个组件component 是个函数，第一个参数是id，为string类型，第二个参数是一个对象，对象中定义了一个模板template，data的形式是函数的形式，函数的返回值是真实的数据。data为函数的目的是，当组件被多次使用时，如果data是一个属性，那么组件将共用这些属性了，data是一个函数的话，每个组件之间的数据不会共享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="app">
    <div>
        <counter></counter>
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    Vue.component("counter",{
        template:'<button @click="count++">你点了我{{count}}次，我记住你了</button>',
        data(){
            return {count:0}
        }
    });

    const app = new Vue({
        el:"#app",
        data:{
        }
    });
</script>

</body>
</html>
Vue组件（局部组件）

将组件定义为一个对象，然后通过Vue的components 属性，将自定义的组件加入Vue 实例中，这样的自定义组件只能在Vue实例的作用范围内使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="app">
    <div>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 全局组件
    // Vue.component("counter",{
    //     template:'<button @click="count++">你点了我{{count}}次，我记住你了</button>',
    //     data(){
    //         return {count:0}
    //     }
    // });


    const counter = {
            template:'<button @click="count++">你点了我{{count}}次，我记住你了</button>',
            data(){
                return {count:0}
            }
        };

    const app = new Vue({
        el:"#app",
        data:{
        },
        components:{
            counter:counter
        }
    });
</script>

</body>
</html>

Vue事件冒泡

触发子标签事件后，子标签会报告给父标签，触发父标签的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <div style="background-color: antiquewhite; width: 100px;height: 100px;" @click="print('div')">
        <button @click="print('button')">点我试试</button>
    </div>


</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
        },
        methods:{
            print(msg){
                console.log(msg);
            }
        }

    });
</script>
</body>
</html>

点击div ，控制台提示div，点击button，控制台提示button、div

停止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    
    <div style="background-color: antiquewhite; width: 100px;height: 100px;" @click.stop="print('div')">
        <button @click.stop="print('button')">点我试试</button>
    </div>
    
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{

        },
        methods:{
            print(msg){
                console.log(msg);
            }
        }
    });
</script>
</body>
</html>

使用@事件名.stop="js片段或者函数名"，该事件就不会发生事件冒泡了

事件修饰符

  • .stop 停止事件冒泡
  • .prevent 阻止默认事件发生
  • .capture使用事件捕获模式
  • .self 只有元素自身触发事件才执行（冒泡或者捕获的都行）
  • .once 只执行一次
demo 阻止默认事件发生
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">

    <a href="http://www.baidu.com" @click.prevent="print('百度')">百度一下</a>

</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
        },
        methods:{
            print(msg){
                console.log(msg);
            }
        },
    });
</script>
</body>
</html>

点击百度一下，不会触发默认的跳转事件，而是在控制台输出百度。

NeedCompanion
发布了25 篇原创文章 · 获赞 0 · 访问量 1275
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_42059368/article/details/105381815
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022