8-22vue-day1

最新推荐文章于 2025-04-24 17:46:29 发布

忘掉过去丿

最新推荐文章于 2025-04-24 17:46:29 发布

阅读量8.3k

点赞数

文章标签： vue入门

本文链接：https://blog.youkuaiyun.com/lianzhangsiqi/article/details/100025145

版权

本文档是Vue入门课程的第一天内容，涵盖了ES6的重要语法如let和const、解构、箭头函数及Promise。还介绍了NPM在JavaScript中的作用，以及Vue作为渐进式MVVM框架的基础概念，包括MVVM架构、Vue的基本使用、生命周期、表达式、指令，特别是for和bind的结合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、课程介绍
NodeJS&npm（了解）
ES6重要语法（掌握）
Vue介绍（了解）
Vue安装（了解）
MVVM架构详解（了解）
Vue入门（掌握）
Vue表达式（掌握）

ES6重要语法（掌握）

let与const

 <script>
   /* let a = 123;
    let a = 456;
    console.debug(a)*/


    //const定义常量,定义的东西不能修改
        const val ="这不能修改"
        console.debug(val)
    </script>

解构表达式 -> 数组，对象

<script>
        /*重点在对象和数组*/

       /* let [a,b,c] =["34","45","56"]
        console.debug(a,b,c)*/

       //对象
        let {name,age} = {name:"老公鸡",age:20}
        console.debug(name,age)
    </script>

箭头函数

  <script>
        const person ={name: "老鸡",age:30}
        let a ={

            say:()=>{
                console.debug("今天依然要加油哦")
            },
            say1(){
            console.debug("必须加油")
             }

        }
        a.say()
        a.say1()
    </script>

Promise替代Ajax的方案(以后用axios)

 <script>
    var promise = new Promise(function (resolve, reject) {
        //延时设置
        setTimeout(function () {
            //定义一个随机数
            let num = Math.random()
                if (num>0.5){
                    //执行成功
                    resolve("充值成功,继续使用")
                }else {
                    reject("充值失败,无法使用")
                }
            
        },2000)

    })
    promise.then(function (msg) {
        console.debug(msg)

    }).catch(function (msg) {
        console.debug(msg)
    })

    </script>

NPM安装:(js界的maven)

**先安装nodejs(内置npm)
初始化命令
 npm init 初始化，会在项目中创建一个package.json文件 (相当于建了一个maven的pom.xml文件)
 npm init -y初始化(跳转确定信息)  (死记下来)
安装vue的命令：npm install/i vue  (死记下来)
查看某个模块：npm list vue
列表模块(查看所有模块)：npm ls
卸载模块：npm uninstall vue
更新模块：npm update vue**

Vue:渐进式的MVVM/MVC框架

MVVM:Model,View,ViewModel【内置了一个监听器，完成双向绑定】
基本使用

<!--//引入vue支持-->
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
        <!--准备Vue的容器-->
        <div id="xxx">
            {{msg}}
        </div>

        <script>
            //vue找到它的容器
            new Vue({
                el:"#xxx",
                data:{
                    msg:"好热啊想去游泳!"
                }
            })
        </script>
</body>

el和data表示什么

<!--//引入vue支持-->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
        <!--准备容器 -->
        <div id="ai">
            {{msg}}  === {{age}} <br />
            {{hobbys}} == {{hobbys[1]}} <br />
            {{pig}} {{pig.name}}
        </div>


        <script>
            new Vue({
                //el:挂载官方用id也可以class,标签
                el:"#ai",
                //表示数据,这个数据可以在vue的挂载容器去获取
                data:{
                    msg:"老母猪",
                    age:9,
                    hobbys:["嫖娼","坚决嫖娼","必须嫖娼"],
                    pig:{
                        id:1,
                        name:"花猪"
                    }
                }
            })
        </script>

vue生命周期

 <!--在表达式中也可以直接调用 -->
            <div id="xx">
                {{msg}}
            </div>

            <script>
                var v = new Vue({
                    el:"#xx",

                    data:{
                        msg:"过去"

                    },

                    //钩子方法:vue内部执行完后执行
                    created(){
                        this.msg = "现在";
                    },
                    //挂载完成后执行
                    mounted(){
                        alert("向往未来,缅怀过去")
                        this.msg = "未来";
                    }
                })
            </script>

MVVM

<div id="a">
                {{user}} <br />
                <!--
                    MVVM:Model,View,ViewModel【内置了一个监听器，完成双向绑定】
                    model和view一方改变另一方也改变
                -->
                姓名:<input type="text" v-model="user" >
            </div>

            <script>
                var v = new Vue({
                    el:"#a",
                    data:{
                        user:"随意啦"
                    }
                })

            </script>

vue表达式

<!--注意,vue表达式和js一样-->
                <div id="xx">
                    {{msg}} <br />
                    {{num2-num1}} <br />
                    {{msg.length}} <br />
                    <!--三目运算-->
                    {{sex?"男":"女"}}
                </div>
                <script>
                    new Vue({
                        el:"#xx",
                        data:{
                            msg:"洗澡澡",
                            num1:222,
                            num2:333,
                            sex:true
                        }
                    })
                </script>

vue命令

<div id="bb">
            <!-- 计算成html -->
            <div v-html="msg"></div>
            <!-- 不会计算html-->
            <div v-text="msg"></div>
        </div>

        <script>
            new Vue({
                el:"#bb",
                data:{
                    msg:"<h1>香港是中国的</h1>"
                }
            })
        </script>

vue指令for和bind和联合使用(重点掌握)
for:

 <div id="a">
        <!--
               ul无序列表：遍历数组
               item:每次遍历的值  index:遍历的下标
           -->
        <ul>
            <li v-for="(item,index) in pig">
                {{index+1}} - {{item}}
            </li>
        </ul>

        <!--
            遍历对象val:代表遍历的值name:属性名index:位置
        -->
        <div v-for="(val, name, index) in man">{{name}}：{{val}}</div>
        <!--遍历字符串-->
        <div v-for="v in msg">{{v}}</div>
        <!--遍历数字-->
        <div v-for="i in num">{{i}}</div>
        </div>
        <script>
            new Vue({
                el:"#a",
                data:{
                    pig:["猪猪","花猪","老母猪","野猪"],
                    msg:"你说你爱我为什么不等我",
                    num:5,
                    man:{
                        name:"至尊宝",
                        age:30,
                    }
                }
            })
        </script>

bind:

 <div id="xx">
            <!--
                bind:用于绑定相应的属性
                    <img src="img/sj.jpg" width="200">
                    <img v-bind:src="imgUrl" v-bind:width="width" />
            -->
            <!--bind的简写形式-->
            <img :src="imgurl" :width="width" :height="height" />
            <!--一次把对象的属性全部绑定过来 -->
            <img v-bind="imgAttr">
        </div>

        <script>
            new Vue({
                el:"#xx",
                data:{
                    imgurl:"img/1.jpg",
                    width:350,
                    height:600,
                    imgAttr:{
                        src:"img/1.jpg",
                        width:180,
                        height:280
                    }
                }
            })
        </script>

 <div id="xx">
            <select>
                <option v-for="v in  womans" :value="v.id">{{v.name}}</option>
            </select>
        </div>

        <script>
            new Vue({
                el:"#xx",
                data:{
                    womans:[
                        {id:1,name:"波多野结衣"},
                        {id:2,name:"大桥未久"},
                        {id:3,name:"佐佐名木兮"}
                    ]
                }
            })
        </script>