vue-day1初识

最新推荐文章于 2023-07-09 18:22:39 发布
最新推荐文章于 2023-07-09 18:22:39 发布
阅读量119 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45624614/article/details/103776930
版权

vueday1初识

1.什么是vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

它是一套前端的框架

2.什么是ECMAScript

ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范。

3.EC6和EC5的不同

3.1声明变量

  /*
        es6语法规范1： var和let的区别
        相同点：var和let都是申明变量的
        区别： let是申明块级的变量（简单理解就是在某个代码块中生效，离开该代码块就没有效果了）
        */
        var a = 20
        console.debug(a)
        let b = 20
        console.debug(b)
        /*如果写在代码块外面就会出错*/
        for(let a=0;a<10;a++){
            console.debug(a)
        }
        /*
         *es6语法规范2： const
        * const 也是用来申明变量的，被const申明的变量就是一个常量
        * */
        const a = 20;
        /*这里如果再次对a进行赋值是不行的*/
        a = 25;
        console.debug(a)

3.2结构表达式

 /*数组取法*/
    let arr = ["好","大","方"]
    /*ES5的取值方法*/
    console.debug(arr[0])
    /*ES6的取值方法*/
    let [a,b,c]= arr
    /*直接和数组里面的一一进行对应*/
    console.debug(a,b,c)

    /*结构表达式取值*/
    var p = {
        name:"三金",
        age:22,
        sex:true
    }
    /*原生的js取法*/
    function show(p) {
        console.debug(p.name,p.age,p.sex)
    }
    show(p)
    /*ES6的取法*/
    function show({name,age,sex}) {
        console.debug(name,age,sex)

    }
    /*调用函数，作为参数传递*/
    var{name,age,sex} = p
    console.debug(name,age,sex)

3.2箭头函数

 var p = {
        name:"三辆",
        age:20,
        /*函数写法一*/
        show1:function () {
            console.debug(this.name,this.age)
        },
        /*函数写法二箭头*/
        show2: ()=> {
            console.debug("箭头的this指向的是最外层，这里指向的是window")
        },
        /*函数写法三ES6才有的*/
        show3(){
            console.debug("我什么都没有")
    }
    }
    p.show1();
    p.show2();
    p.show3();

3.3promiss使用(底层的了解)

  /*vue底层是如何实现ajax异步的*/
    const p = new Promise((resolve, reject) =>{
        // 这里我们用定时任务模拟异步
        const num = Math.random();
        // 随机返回成功或失败
        if (num < 0.5) {
            resolve("成功AAA！num:" + num)
        } else {
            reject("出错了BBB！num:" + num)
        }
    })//以后上面这坨代码我们都看不到的
    // 调用promise
    p.then(function (msg) {//如果调用成功执行该function函数中的内容
        console.log(msg);
    }).catch(function (msg) {//如果调用失败执行cat代码块中的内容提供
        console.log(msg);
    })
    /**
     * 伪代码以后发送ajax的写法：
     * this.axios.get(url,param).then(res=>{
         *
         * }).catch(res=>{
         *
         * })
     */

3.4ES规范模块化

a.js作为导入

/*将b的导入到a里面来*/
import util1 from "b";
/*一次性导入多个*/
import {name,age,p} from "b";
/*导入默认的名字*/
/*这个名字是可以随便取得*/
import x from "b";
x.show1();
x.show2();

b.js作为导出

/*以后如果程序上线了，可以将这些模块导入到一个模块中，传就只传这一个模块就好了*/
/*导出方式一*/
export const util={
    sun(){

    },
    sun2(){

    }
}
/*导出方式二*/
const util={
    sun(){

    },
    sun2(){

    }
}
/*export util;*/
/*一次性导出多个*/
let name="三"
let age = 30
const p = {
    name:"捡钱",
    age:20,
    email:"222@qq.com"
}
export {name,age,p}
/*导出的时候不给名字，用默认的名字*/
export default {
    show2(){

    }
}
export default {
    show1(){

    }
}

4.hello-vue

安装vue：傻瓜式安装

在idea下载一个nodejs，然后就可以使用idea的控制台查看vue版本号

   <!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <!--准备dom节点-->
    <div id="app">
        {{msg}}</br>
        {{person}}</br>
        {{person.name}}</br>
        {{hellovue()}}</br>
        <span style="color: green">{{msg}}</span></br>
    </div>




</body>
<script type="text/javascript">

    var vue = new Vue({
        //挂载
        el:"#app",
        //准备数据
        data:{
            msg:"hello，vue",
            email:"2222@qq.com",
            age:20,
            person:{
                name:"明天上晚自习",
                age:22
            },
            hellovue(){
               return("说好啊")
            }
        }
    });
</script>

5.vue里面的常见指令

5.1vue-el

    <!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<div class="bpp">
    {{msg}}
</div>
<span>{{msg}}</span>

</body>
<script type="text/javascript">
    /*
        el:主要使用用来挂载指定的dom
    *   el支持挂载的选择器有： id选择器， 类型选择器   标签选择器
    *
    *   从这个列子可以看出，虽然它支持三种选择器的挂载，但是每个选择器只能挂载一个dom
    *   所以建议大家以后挂载dom的时候统一使用id挂载
    * */
    /*id选择器*/
    var vue = new Vue({
        el:"#app",
        data:{
            msg:"测试"
        }
    })
    /*类型选择器*/
    var vue = new Vue({
        el:".bpp",
        data:{
            msg:"测试"
        }
    })
    /*标签选择器*/
    var vue = new Vue({
        el:"span",
        data:{
            msg:"测试"
        }
    })
</script>

5.2vue-data

  <!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{msg}}<br/>
    {{person.name}}
</div>
</body>
<!--data数据源，主要是用来准备数据的-->
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            msg:"测试data",
            name:"测试",
            age:20,
            person:{
                name:"大哥",
                sex:true
            }
        }
    })
</script>

5.3vue methods

  <!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--方法里面没有带参数的-->
    {{hello()}}
    <!--方法里面带有参数的-->
    {{hello2(eeeeeeee)}}
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            name:"盖楼",
            sex:true
        },
        /*方法专门也在这个methods里面*/
        methods:{
           hello(){
               alert("老谭")
               return "xxxx";
           },
            hello2(msg){
               return "bbbbbbb"
            }
        }
    })
</script>

5.4vue 表达式

 <!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!--在vue里面进行加减乘除-->
<div id="app">
    <!--前面这两个不是这样固定的-->
    <!--这两种写法结果都是相同的-->
    {{num1}}+{{num2}}={{num1+num2}}<br/>
    {{num1}}*{{num2}}={{num1*num2}}<br/>
    {{num1}}/{{num2}}={{num1/num2}}<br/>
    {{num1}}-{{num2}}={{num1-num2}}<br/>
    {{num1}}-{{num2}}={{num1%num2}}<br/>
    num1+num2={{num1+num2}}<br/>
    <!--vue里面也支持三目运算-->
    <!--在vue里面只有6个为false,null,"",NAN,0,undefined,其他都为true-->
    {{sex?"男":"女"}}
</div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            num1:10,
            num2:30,
            sex:-false
        }
    })
</script>

5.5vue操作字符串

<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{str}}<br/>
        {{str.length}}<br/>
        <!--从索引第二个开始，第5个结束，左闭右开-->
        {{str.substring(2,5)}}<br/>
        <!--从第二个开始，总共截取3个长度-->
        {{str.substr(2,3)}}<br/>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            str:"itsource"
        }
    })
</script>

5.6v-text以及v-html

  <!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-text="text">
        123131
    </div>
    <div v-html="html">
        123131
    </div>
</div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            text:"<h1>我只是在测试v-text</h1>",
            html:"<h1>我只是在测试v-html</h1>"
        }
    })
</script>

5.7v-for

<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--循环-->
    <ul>
        <li v-for="v in num">{{v}}</li>
    </ul>
    <!--带索引的的循环-->
    <ul>
        <li v-for="(v,i) in num">{{v}}------{{i}}</li>
    </ul>
    <!--对字符串进行循环，拿到的是每一个字符-->
    <ul>
        <li v-for="(v,i) in str">{{v}}------{{i}}</li>
    </ul>
    <!--对数组进行循环，拿到的是每一个值-->
    <ul>
        <li v-for="(v,i) in arr">{{v}}------{{i}}</li>
    </ul>
    <!--对对象进行循环，它是唯一一个有三个参数的，代表看键值对以及索引-->
    <ul>
        <span v-for="(v,k,i) in person">{{v}}------{{k}}-------{{i}}</span>
    </ul>

</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            num:10,
            str:"itsource",
            arr:["jj","大哥","二哥"],
            person:{
                name:"大哥",
                sex:20,
                sex:true
            }
        }
    })
</script>

5.8v-bind

 <!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--以前获取图片的方式-->
    <img src="image/1.jpg" width="300px" height="300px">
    <!--vue中获取图片的方式1-->
    <img v-bind:src="src" v-bind:width="width" v-bind:height="height">
    <!--vue中获取图片的方式2，简写-->
    <img :src="src" :width="width" :height="height">
    <!--使用v-bind的方式来取图片（简写方式 直接绑定对象）  方式3-->
    <img v-bind="img">
</div>
</body>
<!--可以绑定自定义的属性，如果有需要添加自定义属性也是可以绑定的-->
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            src:"image/1.jpg",
            width:"300px",
            height:"300px",
            img:{
                src:"image/1.jpg",
                width:"300px",
                height:"300px"
            }
        }

    })
</script>

5.9v-model

 <!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!--
        v-model  双向绑定
        他支持的标签：
            <input>
            <select>
            <textarea>
    -->
<div id="app">
    <input type="text" v-model="name">{{name}}<br/>
    <!--复选框-->
    <input type="checkbox" v-model="hobby" value="lq">篮球<br/>
    <input type="checkbox" v-model="hobby" value="zq">足球<br/>
    <input type="checkbox" v-model="hobby" value="qq">球球<br/>
    <input type="checkbox" v-model="hobby" value="bq">棒球 {{hobby}}<br/>
    <!--下拉框-->
    <select v-model="city">
        <option value="-1">请选择</option>
        <option value="cd">成都</option>
        <option value="bj">北京</option>
        <option value="gz">广州</option>
    </select>{{city}}<br/>
    <!--textrea-->
    <textarea v-model="descs"></textarea>{{descs}}<br/>
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            name:"双向绑定",
            hobby:["qq","bq"],
            sex:0,
            city:"cd",
            descs:"擦"
        }
    })
</script>

5.9.1v-if

<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<span v-if="age>60&&age<=100">老年</span>
    <span v-if="age>30&&age<=60">中年</span>
</div>
</body>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            age:40
        }
    })
</script>

5.9.2v-on

 <!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!--v-on: 语法格式，应该写表达式或者触发的函数-->
<div id="app">
    <input type="button" v-on:click="num++" value="按钮">{{num}}<br/>
    <input type="button" @click="show" value="另外一个按钮"><br/>
    <input type="button" @mouseover="show2" @mouseover="show3" value="进出" >
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            show(){
                alert("弹死你")
            },
            show2(){
                console.debug("进进出出")
            },
            show3(){
                console.debug("出出进进")
            }
        }
    })
</script>

5.9.3v-show

<title>Title</title>
    <!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!--v-show: 控制标签属性   是style="display: block"  还是 style="display: none"-->
<div id="app">
    <div v-show="isshow">xxxxx</div>
    <input type="button" @click="show" value="点击显示或者点击隐藏">
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            isshow:"true"
        },
        methods:{
            show(){
                this.isshow=!this.isshow
            }
        }
    })
</script>
你这秃驴又和老衲抢师太
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-day1
qq_59932636的博客
01-21 839
指令语法中例子1v-bind： v-bind href=“ url” 这里url是new中的data传过来的，加上v-bind代表 这个href是指令，就不会显示值为url，而是去找url中内容。//输出函数vue（）的实例化对象v，在实例化v中有个--proto--有个mount（挂载），就是会把修 改。在{{}}里面可以写js表达式，可以有运算等语句 {{a+b}}，或者三元表达符。data bind:会把model中的数据，经过绑定，在页面中显示。
vue-print-nb 兼容低版本浏览器
11-28
在开发过程中，我们经常需要处理各种打印需求，这正是 `vue-print-nb` 插件的作用所在。`vue-print-nb` 是一个针对 Vue.js 应用程序设计的打印插件，它允许开发者方便地实现页面或组件的打印功能。标题提到的“vue-...
ES6与ES5的区别
半城烟沙丶的博客
05-26 411
块级作用域 ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助function的作用域来解决应用外部变量的问题。 ES6中，加入了let，let有if和for的块级作用域。 注意事项 var声明变量时，作用域是整个函数； let声明变量时，作用域是块级作用域（大括号内的都是一个块级，比如if和for） const主要作用是将某个变量修饰为常量，不可以再次被赋值。 箭头函数 箭头函数与普通函数的区别 1）箭头函数没有this，函数体内的this对象，就是定义时所在的对
ES6与ES5区别
keep789的博客
09-28 7605
ES6与ES5相比，新增了很多东西,如： 一、新增箭头函数 箭头函数解决的问题 简化了写法。箭头函数适用于函数体只有一行的情况；当有多行时，可用普通函数增加可读性。  少打代码，结构清晰 明确了this。传统JS的this是在运行的时候确定的，而不是在定义的时候确定的；而箭头函数的this是在定义时就确定的，不能被改变，也不能被call,apply,bind这些方法修改。       明确运...
前端Vue入门-day01-初识vue与vue指令
来自计科大一萌新的编程记录本
07-09 843
学习目标：1.认识vue 2.学会使用常见的vue指令
vue-ydui使用文档
01-11
1. **安装**：可以通过npm或yarn来安装Vue-YDUI，例如`npm install vue-ydui`或`yarn add vue-ydui`。 2. **引入组件**：在Vue实例中注册Vue-YDUI，并按需引入组件，例如`import { Button } from 'vue-ydui/dist/...
vue-element-admin中文版本
07-20
1. **Vue CLI**：Vue-element-admin 基于 Vue CLI（Vue 的命令行工具）构建，它提供了一套自动化的工作流，用于快速初始化项目，包括自动配置打包、热更新、单元测试等。 2. **Vue Router**：Vue 的官方路由管理器...
vue-okr-tree:http
03-19
更新时间2020/12/02修复初步修改数据不渲染问题对应版本：vue-okr-tree@1.0.5 更新时间2020/12/05修改部分展示bug对应版本：vue-okr-tree@1.0.6 更新时间2021/01/13增加updateKeyChildren方法：vue-okr-tree@1.0.7 ...
vue-json-excel
05-07
入门获取包装： npm install vue-json-excel 在您的vue应用入口点注册JsonExcel： import Vue from "vue" ;import JsonExcel from "vue-json-excel" ;Vue . component ( "downloadExcel" , JsonExcel ) ; 在您的模板...
南昌航空大学考研17个学院，59个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
07-15
南昌航空大学考研17个学院，59个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
齐齐哈尔医学院考研，57个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
最新发布
07-15
齐齐哈尔医学院考研，57个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
龙年吉祥开门红PPT模板，适用于年度总结，工作总结
07-15
【作品名称】：龙年吉祥开门红PPT模板，适用于年度总结，工作总结 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
SQLServer内存使用分析方法.doc
07-15
数据库
Oracle数据库设计中SQL语句优化研究.doc
07-15
数据库
空军工程大学考研6个学院，62个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
07-15
空军工程大学考研6个学院，62个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
2024辽宁省数学建模简介及应用实例及实例分析.txt
07-15
2024辽宁省数学建模2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt2024辽宁省数学建模简介及应用实例及实例分析.txt202
软件测试经典面试题.pdf
07-15
测试 软件测试经典面试题.pdf
SQL习题及答案.docx
07-15
数据库
vue-office报错vue-demi
04-30
1. 确保你的项目中已经安装了vue-demi。可以通过运行以下命令来安装： ``` npm install vue-demi ``` 或者 ``` yarn add vue-demi ``` 2. 确保你的项目中正确导入了vue-demi。在需要使用Composition API的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值