VUE快速入门笔记

xixixiLucky

于 2024-07-24 17:32:04 发布

阅读量367

点赞数 10

文章标签： vue.js 笔记前端

本文链接：https://blog.csdn.net/hetupyou/article/details/140668871

版权

VUE2快速入门笔记

什么是VUE?

Vue是一套前端框架，免除原生JS中的DOM操作，简化书写（需要在VUE框架上进行装修）

框架：半成品软件，一套可重用、通用的软件基础代码模型

MVVM(model-View -ViewModel)数据双向绑定，将编程的关注点放在数据上

Model:数据模型，包含很多业务数据以及数据的处理方法

View:视图层，只负责数据的展示

ViewModel:Model和View数据通信的桥梁（VUE框架提供的功能）

渐进式JavaScript框架：既可以根据已有的项目使用，也可以完全创建新项目使用

VUE快速入门

1)新建html页面，引入vue.js文件(在官网下载)

vue.js文件下载

根据vue版本（我这里是vue2）选择具体教程->开发版本->开始下载

<!--将vue.js引入到html-->    
<script src="js/vue.js"></script>

2）JS代码中创建Vue核心对象，定义数据模型

<script>
    /* 02创建vue的核心对象 */
      
    new Vue(
       
         //  {}传递一个对象
      //  属性01：el 代表Vue要控制的区域#app,即id选择器-->创建的这个vue项目所要接管的区域为div下的这个区域
      //  属性02：data 定义的数据模型，里面定义了一个对象，有一个key message 
        {

        el:"#app",//Vue接管的区域
        data:{//数据模型message
            message:"helloVue"//数据模型中的数据变化影响视图层，视图层的数据变化也直接影响数据模型中的数据
        }
    }

    )
</script>

3）编写视图

<!-- 03 编写一个视图  -->
    <div id="app">
        <!-- v-开头的均为指令 -->
        <!-- 绑定了一个数据模型message v-model="message" 该指令进行数据绑定data中的数据会直接在视图中展示出来-->
        <input type="text" v-model="message"  name="" id="">
        <!-- 插值表达式 在界面中直接获得数据模型的数据在界面中展示出来-->
        {{message}}

    </div>

效果如下

两段文字同时变化（vue双向数据绑定）

一、Vue常用指令

vue指令：html中带有v-前缀的特殊属性

指令	作用
v-bind	设置href,css样式等，为HTML标签绑定属性值
`v-model`	在表单元素上创建双向数据绑定（上面快速入门就用到了v-model指令）
v-on	为HTML标签设置绑定事件
v-if	判定为true渲染某元素，判定为flase则不渲染某元素
v-else-if	同v-if
v-else	同
v-show	根据条件展示某元素，切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 01引入vue.js文件 -->
    <script src="js/vue.js"></script>

</head>
<body>
    <!-- 03 定义视图-->
    <div id="app">
    <!-- 通过v-bind动态的给href属性绑定值url -->
        <a v-bind:href="url">链接1</a>
    <!--<a :href="url">链接1</a>是简化的书写形式-->
    </div> 
</body>
<script>
    //02创建vue对象
    new Vue({
        el:"#app",
        data:{url:"https://www.baidu.cn"}
    })
</script>
</html>

`v-model`

        ```html
         <!-- <input>表单项，通过tpye定义输入形式 v-model建立双向绑定模型-->
                <input type="text" v-model="url">
        ```

更改表单项里的text值，则链接里面链接到的网址也会相应的改变，因为都是绑定到对象vue中的数据模型data的属性url

!通过v-bind或者v-model绑定的变量，必须在数据模型中声明

v-on

方法01 简化版

<input type=“button” value=“按钮1” @click=“handle()”>

方法02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 01引入vue.js文件 -->
    <script src="js/vue.js"></script>

</head>
<body>
    <!-- 03 定义视图-->
    <div id="app">
        <input type="button" value="按钮1" @click="handle()"> 
    <input type="button" value="按钮2" v-on:click="handle()"> 

    </div>
    
</body>
<script>
    //02创建vue对象
    new Vue({
        el:"#app",
        data:{url:"https://www.baidu.cn"},
       methods:{
        handle:function(){
            alert("我被点击啦")
        }

       }
        
    })
</script>
</html>

v-if&&v-else if&&v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 01引入vue.js文件 -->
    <script src="js/vue.js"></script>

</head>
<body>
    <!-- 03 定义视图-->
    <div id="app">
<input type="text" v-model="age">
<span v-if="age <=35">年轻人（35岁以下）</span>
<span v-else-if="age>35&&age<60">中年人</span>
<span v-else="age>=60">老年人</span>

    </div>
    
</body>
<script>
    //02创建vue对象
    new Vue({
        el:"#app",
        data:{
            age:60
        }

       }
        
    )
</script>
</html>

v-show

与v-if的不同点在于，v-if是只渲染满足if条件的语句，而v-show是所有的都渲染，通过一个display属性只展示符合v-show条件的

v-for

遍历容器中的元素或者对象当中的属性，实现列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 01引入vue.js文件 -->
    <script src="js/vue.js"></script>

</head>
<body>
    <!-- 03 定义视图-->
    <div id="app">
        <!-- item是数组中的元素，可自定义命名，index是索引可以省略 -->
        <div v-for="(item, index) in sheep" :key="index">{{index}}:{{item}}</div>
        <!-- 省略索引后 -->
        <div v-for="item in sheep" :key="sheep"> {{item}}</div>
    </div>
    
</body>
<script>
    //02创建vue对象
    new Vue({
        el:"#app",
        data:{
            //数组sheep，里面定义的元素如下
            sheep:["喜羊羊","美羊羊","懒洋洋","沸羊羊","慢羊羊","软绵绵"]
        }

       }
        
    )
</script>
</html>

小案例：通过vue完成表格数据的渲染展示

要实现效果

实现的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- border是边框，粗细定义为1，cellspacing是单元格之间的间距，定义为0，这样每个单元格之间没有间隙，width代表这个表格占整个空间的60% -->
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="center" v-for="(user, index) in users" :key="index">
                <!-- 加上了索引，可以让这一列的值自增，index+1保证了从1开始 -->
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <!--性别 相当于java中的字典，gender==1时是男，gender==2时是女 -->
               <td>
                <!-- v-if判断 -->

                <span v-if="user.gender==1">男</span>
                <span v-else>女</span>

               </td>
                <td>{{user.score}}</td>
                <!-- 等级 score>=85 优秀  |  score>=60 及格  |  score<60  不及格并且用红色标注 -->
                <td>
                    <span v-if="user.score>=85">优秀</span>
                    <span v-else-if="user.score>=60">及格</span>
                    <span v-else> <span style="color: red;">不及格</span> </span>
                </td>
            </tr>
        </table>
    </div>
</body>
<script >
   new Vue({
    el: "#app",
    data:{
        // 数据模型中定义了一个users对象，该对象是一个数组，每一个数组元素也是一个对象
        // 对象用{}括起来
        users:[
        {
            name:"喜羊羊",
            age:6,
            gender:1,
            score:100
        } ,{
            name:"美羊羊",
            age:5,
            gender:2,
            score:98
        } ,{
            name:"懒羊羊",
            age:3,
            gender:1,
            score:59
        } ,{
            name:"沸羊羊",
            age:7,
            gender:1,
            score:70
        } ,{
            name:"软绵绵",
            age:8,
            gender:2,
            score:84
        }
    ]
}
   })
</script>
</html>

二、Vue生命周期

生命周期：一个对象从创建到销毁的过程

生命周期的八个阶段

每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

状态	阶段
beforeCreate	创建前（vue这个对象创建前触发）
created	创建后（vue这个对象创建完毕触发）
beforeMount	挂载前（vue挂载到指定的dom之前触发）
mounted	挂载完成（vue挂载完成后触发）
beforUpdated	更新前（数据模型中的数据变化，但是还没有更新dom中的展示时触发）
updated	更新后（数据模型中的数据变化，已经更新了dom中的展示时触发）
beforeDestroy	销毁前（vue这个对象销毁之前触发）
destroyed	销毁后（vue这个对象销毁之后触发）

mounted

挂载完成，Vue初始化成功,HTML页面渲染成功（发送请求到服务端加载数据）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    
</body>
<script>
    new Vue({
        /* 一定要注意e之后是字母l而不是数字1 */
        el:"#app",
        data:{
            
        },
        //发送请求到服务端，获取服务端的数据
        mounted(){
            alert("Vue挂载完毕，发送请求获取数据")
        },
       
    })
</script>
</html>

Document

```

[外链图片转存中…(img-KCUqZ9Ob-1721813487601)]

xixixiLucky

关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE快速入门笔记

Vue是一套，免除原生JS中的DOM操作，简化书写（需要在VUE框架上进行装修）框架：半成品软件，一套可重用、通用的软件基础代码模型(model-View -ViewModel)数据双向绑定，将编程的关注点放在数据上Model:数据模型，包含很多业务数据以及数据的处理方法View:视图层，只负责数据的展示ViewModel:Model和View数据通信的桥梁（VUE框架提供的功能）渐进式JavaScript框架：既可以根据已有的项目使用，也可以完全创建新项目使用。
复制链接

扫一扫