vue学习day1

最新推荐文章于 2024-07-08 16:38:47 发布

灞波儿奔、和奔波儿灞

最新推荐文章于 2024-07-08 16:38:47 发布

阅读量145

点赞数

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/build_the_countr/article/details/139362184

版权

vue学习day1

导入vue.js cdn（不用下载）

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

下载vue.js

Vue · GitHub

第一个vue的程序：

vue基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层模板-->
<div id="app">
    {{message}}
</div>
</body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model;数据
        data:{
            message:"hello vue!"
        }
    });
</script>
</html>

v-bind:的用法

v-bind:title="messge" 等同于：title="messge"

简写为：加你想使用的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层模板-->
<div id="app">
<!--    v-bind:title="messge"  等同于 ：title="messge"-->
<!--    <span v-bind:title="message">{{message}}</span>-->
    <span :title="message">{{message}}</span>
</div>
</body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model;数据
        data:{
            message: "hello vue!",
            ok: true
        }
    });
</script>
</html>

v-if和v-else-if和v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层模板-->
<div id="app">
    <h1 v-if="name==='Tony'">{{message+name}}</h1>
    <h1 v-else-if="name==='Jeny'">{{message+name}}</h1>
    <h1 v-else>{{message+name}}</h1>
</div>
</body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model;数据
        data:{
            message: "hello vue!",
            name: "Tony"
        }
    });
</script>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层模板-->
<div id="app">
    <li v-for="item in items">{{item.message}}</li>
    <li v-for="(item,index) in items">{{item.message}}---{{index}}</li>
</div>
</body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model;数据
        data:{
            message: "hello vue!",
            items:[
                {message: "学习vue"},
                {message: "学习java"},
                {message: "学习js"}
            ]
        }
    });
</script>
</html>

vue绑定事件

v-on:事件

两个写法

<button v-on:click="sayHi2">{{message}}</button>
    <button @click="sayHi">{{message}}</button>

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层模板-->
<div id="app">
    <button v-on:click="sayHi2">{{message}}</button>
    <button @click="sayHi">{{message}}</button>
</div>
</body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model;数据
        data:{
            message: "click me!"
        },
        methods:{
            sayHi(){
                alert("hello vue!")
            },
            sayHi2:function (){
                alert("hello vue2!")
            }
        }
    });
</script>
</html>

vue的双向绑定

v-model="绑定的值"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层模板-->
<div id="app">
    <input v-model:id="message">
    <p>{{message}}</p>
</div>
</body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model;数据
        data:{
            message:"hello vue!"
        }
    });
</script>
</html>