发表于 | 分类于 | | 阅读次数

###vue动态绑定class和style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <style>
        .cont{width: 100px;height: 100px;border: 1px solid #ccc;}
        .pcont{border: 1px solid red;}
    </style>
</head>
<body>
    <div id="app">
        <div :class="{'cont':contt}"></div>
        <p v-text='name' :class="{'pcont':contt}"></p>
    </div>
<script>
        // 绑定class 分为两种 1.对象语法 2.数组语法
        //同理绑定内联样式 :style
        let vm=new Vue({
            el:"#app",
            data:{
                contt:true,
                name:'nihao'
            
            }
        })
</script>
</body>
</html>

发表于 | 分类于 | | 阅读次数

###vue组件之间的通信
1.父组件—>子组件 传递数据 通过props接收参数
2.子组件—>父组件 相比父→子组件通信，子→父组件就稍微繁琐一点。我们会使用到组件的一个知识点：自定义事件。
vue提供的事件接口，我们用它提供的api $emit(eventName) 来触发一个事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <son :message='msg' @connect='say'></son>
    </div>
    <script>
        /*
            1.父组件--->子组件 传递数据  通过props接收参数
            2.子组件--->父组件 相比父→子组件通信，子→父组件就稍微繁琐一点。我们会使用到组件的一个知识点：自定义事件。
             vue提供的事件接口，我们用它提供的api  $emit(eventName) 来触发一个事件
         */
        // 1.父组件--->子组件 //2.子组件--->父组件

        //首先注册一个组件，叫做son

        Vue.component('son',{
            props:['message'],//父组件--->子组件 传递数据  通过props接收参数
            template:`<div>{{message}}<button @click="send">点击</button></div>
            `,
            data(){
                return {
                    msg2:"我是子组件的数据"
                }
            },
            methods:{
                send(){
                    this.$emit('connect',this.msg2) //自定义一个事件叫connect,通过$emit来触发；
                }
            }
        })

        // 定义一个vue实例

        let vm=new Vue({
            el:"#app",
            data:{
                msg:'我是父级组件的数据'
            },
            methods:{
                say(msg){
                    console.log('监听到connect的触发');
                    console.log(msg);
                }
            }
        })





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

发表于 | 分类于 | | 阅读次数

###组件
组件是我们人为地把页面合理地拆分成一个个区块，让这些区块更方便我们重复使用，有了组件，我们可以更高效合理地开发和维护我们的项目。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <style>
        .cont{width: 200px;height: 200px;border:1px solid #ccc;float: left;margin-right: 10px;margin-left: 10px;text-align: center}
    </style>
</head>
<body>
<div id="app">
    <actircle :detaill="item" v-for="item in article"></actircle>
</div>
<script>

    Vue.component('actircle',{
        props:['detaill'],
        template:`<div class="cont">
        <h5>{{detaill.title}}</h5>
        <p>{{detaill.author}}</p>
        <strong>{{detaill.date[0]}}</strong>
        </div>`
    })

    let vm=new Vue({
        el:"#app",
        data:{
            article:[
                {
                title:"这是一篇关于vue的文章1",
                author:"作者：张行",
                date:[1,2,3]
                },

                {
                title:"这是一篇关于vue的文章2",
                author:"作者：张行",
                date:[1,2,3]
                },
                {
                title:"这是一篇关于vue的文章3",
                author:"作者：张行",
                date:[1,2,3]
                },
                {
                title:"这是一篇关于vue的文章4",
                author:"作者：张行",
                date:[1,2,3]
                }
            ]
        }
    })
</script>
</body>
</html>

发表于 | 分类于 | | 阅读次数

###常用4个选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    数字1：{{num1|tolent}}<br>
    数字2：{{num2|tolent}}<br>
    数字3：{{num3|tolent}}<br>
    求和：{{sum|tolent}}
    <p>{{a}}</p>
    <button v-on:click='plus'>加1</button>
</div>
<script>
let vm=new Vue({
        el:"#app",
        data:{
            num1:23.45,
            num2:34.599,
            num3:1234.340,
            a:0
        },
    filters:{  //过滤属性
        tolent(value){
            return parseInt(value);
        }
    },
    computed:{ //计算属性
        sum(){
            return this.num1+this.num2+this.num3;
        }
    },
    methods:{//自定义方法
        plus(){
            return this.a++;
        }
    },
    watch:{//暗中观察
            a(){
            console.log('有了新的变化')
            console.log(this.a);
            }
    }
})
</script>
</body>
</html>