Vue-1-CSDN博客

本文链接：https://blog.csdn.net/u011360767/article/details/105642640

v-on 绑定事件，简写 @

<input type = "button" v-on:click="change" value = "修改" >
<input type = "button" @click="change" value = "修改" >

v-bind 给标签的属性绑定变量简写 :href

<a v-bind:href="a_href" >跳转</a>
<a :href="a_href" >跳转</a>

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue页面标题</title>
</head>
<body>
<div id="app" >
    <!--模板语言-->
    <span v-if="number==10086" >移动-v-if</span>
    <span v-else-if="number==10010" >联通-v-if</span>
    <span v-else >电信-v-if</span>

    <span v-show="number==10086" >移动-v-show</span>
    <span v-show="number==10010" >联通-v-show</span>
    <input type = "button" v-on:click="change" value = "修改" >

</div>

<script src="./vue.js"></script>
<script>
    //最基础实例Vue的方法
    var vm = new Vue({
        //元素
        el:'#app',
        //存储数据
        data:{
            number:10086
        },
        methods:{
        change(){
           this.number=10010
        }
        }
    })


</script>
</body>
</html>

v-if和v-show的区别
if是哪个就显示那个
v-show,不是那个就隐藏加style=“display :none;”
在这里插入图片描述

v-for

循环写在那个标签上就循环生成那个标签，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue页面标题</title>
</head>
<body>
<div id="app" >
    <!--模板语言-->
    <div v-for="item in games" >{{item}}</div>
    <div v-for="(item,index) in games" >{{item}}--{{index}}</div>

    <div v-for="(item,index) in dict_games" >{{item}}--{{index}}</div>


</div>

<script src="./vue.js"></script>
<script>
    //最基础实例Vue的方法
    var vm = new Vue({
        //元素
        el:'#app',
        //存储数据
        data:{
            games:['绝地求生','英雄联盟','王者荣耀'],
            dict_games:{"name":"绝地求生","company":"蓝洞"}
        },
        methods:{
        change(){
           this.number=10010
        }
        }
    })


</script>
</body>
</html>

结果：

绝地求生
英雄联盟
王者荣耀
绝地求生--0
英雄联盟--1
王者荣耀--2
绝地求生--name
蓝洞--company

双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue页面标题</title>
</head>
<body>
<div id="app" >
    <!--模板语言-->
    <span>span-->{{name}}</span><br>
     <!-- v-model 双向数据绑定 input-->
    <input type="text" v-model="name" >
    <input type="button" @click="change" value="重置" >

</div>
<script src="./vue.js"></script>
<script>
    //最基础实例Vue的方法
    var vm = new Vue({
        //元素
        el:'#app',
        //存储数据
        data:{
            name:'smile'
        },
        methods:{
        change(){
           this.name=''
        }
        }
    })
</script>
</body>
</html>

结果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue页面标题</title>
</head>
<body>
<div id="app" >
    <!--模板语言-->
    <span>span-->{{username}}</span><br>
    <!-- v-model 双向数据绑定 input-->
    <input type="text" v-model="username" >
    <input type="text" v-model="password" ><br>
    <input type="button" @click="change" value="重置" ><br>

    <!-- v-model 双向数据绑定 radio-->
    <span>性别--{{genderValue}}</span><br>
    <input type="radio" value="1" name="gender" v-model="genderValue" >
    <input type="radio" value="2" name="gender" v-model="genderValue" ><br>

    <!-- v-model 双向数据绑定 checkbox-->
    <span>选择你喜欢的电影--{{movies}}</span><br>
    <input type="checkbox" value=1 v-model="movies" >变形金刚<br>
    <input type="checkbox" value=2  v-model="movies" >复仇者联盟<br>
    <input type="checkbox" value=3  v-model="movies" >金刚狼<br>

    <!-- v-model 双向数据绑定 select-->
    <span>选择你喜欢的电影--{{selectMovies}}</span><br>
    <select v-model="selectMovies" >
        <option disabled value="请选择" >请选择</option>
        <option value="肖战" >肖战</option>
        <option value="王一博" >王一博</option>
        <option value="杨洋" >杨洋</option>
	</select>

</div>
<script src="./vue.js"></script>
<script>
    //最基础实例Vue的方法
    var vm = new Vue({
        //元素
        el:'#app',
        //存储数据
        data:{
            username:'smile',
            genderValue:2,
            movies:[1,2],
            selectMovies:'请选择'
        },
        methods:{
        change(){
           this.username='';
           this.genderValue=1
        }
        }
    })
</script>
</body>
</html>

从字典里取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue页面标题</title>
</head>
<body>
<div id="app" >
    <!-- v-model 双向数据绑定 select-->
    <span>选择你喜欢的电影--{{selectMovie}}</span><br>
    <select v-model="selectMovie" >
        <option disabled value="请选择" >请选择</option>
        <option v-for="option in options" :value="option.id" >{{option.name}}</option>
    </select>


</div>
<script src="./vue.js"></script>
<script>
    //最基础实例Vue的方法
    var vm = new Vue({
        //元素
        el:'#app',
        //存储数据
        data:{
            selectMovie:"请选择",
            options:[{"name":"肖战","id":1},{"name":"王一博","id":2},{"name":"杨洋","id":3}]
        },
        methods:{
        change(){
           this.username='';
           this.genderValue=1
        }
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue页面标题</title>
</head>
<body>
<div id="app" >
    <!--模板语言-->
    {{msg}}
    <div>{{flag?'男生':'女生'}}</div>
    <span>{{num+1}}</span>
    <input type = "button" v-on:click="change" value = "修改" >
    <!--flag 真：跳百度，假：跳博客-->
    <a v-bind:href="a_href" >跳转</a>
</div>

<a href="" target=""></a>
<script src="./vue.js"></script>
<script>
    //最基础实例Vue的方法
    var vm = new Vue({
        //元素
        el:'#app',
        //存储数据
        data:{
            msg:'hi vue!',
            flag:true,
            num:1,
            a_href:'www.baidu.com'
        },
        methods:{
        change(){
            this.flag = false;
            this.msg = 'hi vue ! day1';
            this.a_href = 'http://www.imdsx.cn'

        }
        }
    })


</script>
</body>
</html>

过滤器

<div id="app" >
    <!--  过滤器-->
    <span>{{age|changeAge('kkx')}}</span><br>
</div>
<script src="./vue.js"></script>
<script>
    //最基础实例Vue的方法
    var vm = new Vue({
        //元素
        el:'#app',
        //存储数据
        data:{
            age:18
        },
        methods:{
        },
        filters:{
            changeAge(age,name){
                if(age <= 18){
                    return '年轻人'+name
                }
            }
        }
    })
</script>

钩子函数

<body>
<div id="app">
    <span>{{age}}</span>

</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            age:'7'
        },
        filters:{},
        //钩子函数
        created:function () {
            //数据初始化后执行
            //列表数据可以通过created 请求
            this.age='18',
            console.log('created')
        },
        mounted:function () {
            console.log('mounted')
        }

    })
</script>
</body>