Vue3.0框架-基础

最新推荐文章于 2024-07-25 11:05:20 发布

Star9999999

最新推荐文章于 2024-07-25 11:05:20 发布

阅读量5.5k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_63042689/article/details/127058920

版权

Vue的安装

官网：https://vue3js.cn/

代码地址：https://unpkg.com/vue@next

进入代码地址复制所有代码创建lib-->vue.js文件

创建第一个Vue文件

注意点：

1.记得导入vue.js文件

2.创建const=kk={}在其内部放置属性和方法，这两种都需要return回去

3.通过vue.createApp(kk).mount('#ha')进行类与属性方法的连接-->不需要分号结尾

4.每次创建一个属性之后都用逗号隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="ha">
        {{name}}--{{mobile}}--{{number*2}}
    </div>

    <script>
        const kk={//用来定义变量和方法
            data(){//这个是定义变量的
                return{
                    name:'li',
                    mobile:'123456789',
                    number:'100'
                }
            }
        }
        Vue.createApp(kk).mount('#ha')//通过Vue框架连接，使挂载的id或者类可以使用kk内定义的变量和方法
    </script>
</body>
</html>

Vue的细节问题

1.methods的书写格式

-->注意后面有s

-->每写一个方法都标记逗号

2.data及数组，变量的书写书写格式

3.vue的格式绑定

-->#对应id绑定

-->圆点.对应class绑定

-->change对应绑定设置的vue常量，期内放置了变量,数组和方法

4.数据填充，CSS绑定，JS方法绑定

-->参考下文

数据填充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="ha">
        <p>{{t}} ---我是原有内容</p>
        <p v-html="t">---我是原有内容</p>
        <p v-text="t">---我是原有内容</p>
    </div>

    <script>
        Vue.createApp({
            data(){
                return{
                    t:'<h1>12345</h1>'
                }
            }
        }).mount('#ha');
    </script>
</body>
</html>

v-bind指令 (链接替代)

作用是替换a标签或者img标签中的一些属性链接,有两种书写方法,

一种是v-bind:href:"url"

还有一种是快捷:href:"url"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>
<body>

    <div id="app">
        <a v-bind:href="url" :title="title" >{{website}}</a>
        <img :src="src" alt="">
    </div>
    
    <script>
        const kk={
            data(){
                return{
                    url:'https://yhssglxt.miit.gov.cn/web/appealInformation',
                    title:'投诉一下，态度变好',
                    website:'工信部',
                    src:'04-fj.jpg'
                }
            }
        }
        Vue.createApp(kk).mount('#app')
    </script>
</body>
</html>

通过Vue绑定style中的类(CSS)

第一种是class={active:isActive}绑定的,优点在于可以控制类是否使用

第二种是class=[a,b]绑定的,a与b又在data()中与实际的class绑定，优点是可以快速绑定多个类对象

<!DOCTYPE html>
<html lang="en">
<script src="../lib/vue.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: red;
        }
        .bg{
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="kk">
    <p :class="{active:isActive}">我喜欢你</p>
    <p :class=[t,a]>hellow</p>
</div>
<script>
    Vue.createApp({
        data(){
            return{
                isActive:true,
                t:'active',
                a:'bg',
            }
        }
    }).mount('#kk')
</script>
</body>
</html>

v-on指令(绑定事件)

1.使用v-on:click="函数名"-->直接写这个事件需要使用什么方法

2.然后在script的methods中书写方法的具体内容

3.优点在于可以快速绑定事件，直接事件--方法，并且有独立内容区，方便后续查找

4.如果方法内需要使用data区定义的数据，那就得加上this

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .status {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: orange;
            color: #fff;
        }
    </style>

</head>

<body>
    <div id="app">
        <div 
        :class="{status:isStatus}"
        v-on:click="handle"
        @mouseenter="enter('哈哈哈，我来了')"
        >点我</div>    <!--这里设置一个函数，触发事件为鼠标进入，函数名字是enter，输入参数为一个str-->
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        const kk = {
            //data定义数据，methods定义对象或者说是方法
            data(){
                return{
                    isStatus:true
                }
            },
            methods:{
                // handle(){
                //     console.log('我被点了一下');
                // },
                enter (str) {
                    console.log(str);
                },
                handle(){
                    this.isStatus=!this.isStatus
                }
            }
        }
        Vue.createApp(kk).mount('#app');
    </script>
</body>

</html>

v-if指令(条件控制)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="age>18">已成年</p>
    <p v-else>未成年</p>
</div>
<script>
    Vue.createApp({
        data(){
            return{
                age:10,
            }
        }
    }).mount('#app')
</script>
</body>
</html>

v-for指令(数组遍历)-->常用于填充表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../lib/vue.js"></script>
</head>
<body>
<ul id="app">
    <li v-for="(item,index) in ary" :key="index">
        {{item.name}}--{{item.age}}
    </li>
</ul>
<script>
    Vue.createApp({
        data(){
            return{
                ary:[
                    {name: "li", age: 18},
                    {name:"xu",age:20},
                    {name:"qo",age:23},
                    {name:"ooo",age:25}
                ]
            }
        }
    }).mount('#app')
</script>
</body>
</html>

补充：数组添加-->通过设计一个对象属性，并且用push方法

v-model指令(变量的双向绑定)

每次更改框内的内容，同时会输出这个改变的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="temp" @keyup="change()">
</div>
<script>
    const kk={
        data(){
            return{
                temp:'到公司了没?'
            }
        },
        methods:{
            change(){
                alert(this.temp)
            }
        }
    }
    Vue.createApp(kk).mount('#app');
</script>
</body>
</html>

Star9999999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3.0框架-基础

第二种是class=[a,b]绑定的,a与b又在data()中与实际的class绑定，优点是可以快速绑定多个类对象。3.通过vue.createApp(kk).mount('#ha')进行类与属性方法的连接-->不需要分号结尾。3.优点在于可以快速绑定事件，直接事件--方法，并且有独立内容区，方便后续查找。1.使用v-on:click="函数名"-->直接写这个事件需要使用什么方法。-->change对应绑定设置的vue常量，期内放置了变量,数组和方法。一种是v-bind:href:"url"
复制链接

扫一扫