Vue指令系统

编辑此文章

一、模板语法

  • {{变量}}
  • {{1+1}}
  • {{‘hello’}}
  • {{函数的调用}}
  • {{1==1?'真的':'假的'}}

使用{{ }}进行插值等价于v-text指令，等价于JavaScript的innerText，{{}}中不能使用if else。

在Vue实例化对象之后，这个对象中的属性默认在前面添加$符号，主要跟自己定义的属性区分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
<div id="app">
    <!--模板中渲染数据-->
    <h3>{{msg}}</h3>
    <!--模板中字符串拼接-->
    <h3>{{msg + "Vue"}}</h3>
    <!--模板中三元运算-->
    <h3>{{1===1?'真的':'假的'}}</h3>

</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>

<script type="application/javascript">
    var app=new Vue({
        el: "#app",//挂载点
        data: {
            //数据属性
            msg: "Hello "
        }
    });
    console.log(app)
</script>
</html>
View Code

 

二、指令

轮播图的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图实现</title>
</head>
<style type="text/css">
    img{
        width: 400px;
        height: 300px;
    }
    ul{
        list-style: none;
        width: 400px;
        height: 40px;
        padding: 0;
    }
    ul li{
        float: left;
        width: 100px;
        height: 40px;
        line-height: 40px;
        background-color: purple;
        color:#fff;
        text-align: center;
    }
    .active{
        background-color: green;
    }
</style>
<body>

<div id="slider">
    <img v-bind:src="currentImgSrc" alt="">
    <ul>
        <li v-for="(item,index) in imgArr" v-bind:class="{active:currentIndex==index}" v-on:click="click(index)">
            {{index+1}}
        </li>
    </ul>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script type="application/javascript">
    var imgArr=[
        {id:1,imgSrc:'./images/1.jpg'},
        {id:2,imgSrc:'./images/2.jpg'},
        {id:3,imgSrc:'./images/3.jpg'},
        {id:4,imgSrc:'./images/4.jpg'},
    ];
    var app=new Vue({
        el:"#slider",
        template:``,
        data:{
            imgArr:imgArr,
            currentIndex:0,
            currentImgSrc:'./images/1.jpg'
        },
        methods:{
            click(index){
                this.currentIndex=index;
                this.currentImgSrc=this.imgArr[index].imgSrc;
            }
        }
    });
</script>
</body>
</html>
View Code

1、v-if

通过控制数据属性值，来间接创建或销毁dom元素

v-if可以直接做简单的运算，类似模板插值一样

2、v-show

通过控制数据属性值，来间接显示或隐藏dom元素，实际是控制style样式来实现显示与隐藏

3、v-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h3>{{msg}}</h3>
</div>

</body>
<script src="./node_modules/vue/dist/vue.js"></script>

<script type="application/javascript">
    new Vue({
        el:"#app",
        data:{
            msg:"hello指令系统"
        },
        //template渲染，直接替换根元素
        template:"<h3>{{msg}}</h3>"
    })
</script>
</html>
View Code

等价于JavaScript的innerText

4、v-html

等价于JavaScript的innerHTML

5、v-for

将可迭代对象遍历渲染到dom上

<ul>
    <li v-for="(item,index) in menuList"></li>
    <li v-for="(value,key) in menuList"></li>
</ul>

6、v-on

  • 事件源即事件来源
  • 事件即操作
  • 事件驱动程序即方法

v-on:click对当前DOM绑定click事件，所有原生js事件都可以用v-on绑定，语法糖"@"

7、v-bind

标签中的所有属性都可以通过v-bind:属性名="{} || [] || 变量名 || 常量"绑定，绑定的字符串值必须是数据属性中的数据

v-bind:class="{active:true}"　　通过控制对象值的真假来确定是否应用该样式

v-bind:href="url"　　这里url必须是数据属性

语法糖":"

8、v-model

只允许在表单控件中使用，如input、textarea、select、checkbox等

 

 

 

posted @ 2019-06-06 13:15  丫丫625202  阅读(103)  评论(0)  编辑  收藏  举报