30no2's Blog.

vue.js笔记一

vue
字数统计: 1.7k阅读时长: 10 min
2021/05/18 Share

No1、构建vue.js项目

一、显示数据

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
    <span v-bind:title="message">鼠标悬浮</span>
    {{ message }}
</div>


<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:"hello vue"
        }
    });
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
    <div v-if="ok">yes</div>
    <h1 v-else>no</h1>
</div>


<script>
    var vm = new Vue({
        el:'#app',
        data:{
            ok:true
        }
    });
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>

<body>
<div id="app">
    <li v-for="item in items">{{item.message}}</li>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            items:[
                {message:"11111"},
                {message:"22"},
                {message:"3333"},
            ],
            ok:true
        }
    });
</script>
</body>
</html>

四、事件

  • 语法糖用@表示来替换v-on:
  • 参数问题
    • 不传参数可以省略小括号——btnClick
    • 方法中默认有event参数。。btnClick(event)
    • 方法中有参数，并且需要event。则btnClick(abc,event)->$event
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>

<body>
<div id="app">
    <button v-on:click="sayHi">click Me</button>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:"hello"
        },
        methods:{
            sayHi:function (event){
                alert(this.message)
            }
        }
    });
</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
<!--双向绑定-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>

<body>
<div id="app">
输入的文本：<input type="text" v-model="message">{{message}}
    性别：
    <input type="radio" name="sex" value="男" v-model="checked" checked> 男
    <input type="radio" name="sex" value="女" v-model="checked"> 女
    选中了：{{checked}}

    <select name="" id="" v-model="selectioned">
        <option value="A"  selected>A</option>
        <option value="B" >B</option>
        <option value="C" >C</option>
    </select>
    多选中了：{{selectioned}}
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:"123",
            checked:"男",
            selectioned:"A"
        }
    });
</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
<!--组件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>


<body>
<div id="app">
    <my-component v-for="item in items" v-bind:itemss="item"></my-component>
</div>

<script>
    //定义一个Vue组件component
    Vue.component("my-component",{
        props:['itemss'],
        template:'<li>{{itemss}}</li>'
    })
    var vm = new Vue({
        el:'#app',
        data:{
            items:["java","Linux","ddd"]
        }
    });
</script>
</body>
</html>

七、Axios异步通信

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
<!--Axios异步通信-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<div id="vue">
    <div>
        {{info.name}}
        {{info.address.city}}
    </div>
</div>

<script>
    var vm = new Vue({
        el:'#vue',
        data(){
            return{
                info:{
                    name:null,
                    address:{
                        street:null,
                        city:null
                    },
                }
            }
        },
        mounted(){
            axios.get('../package.json').then(response=>(this.info = response.data))
        }
    });
</script>
</body>
</html>

八、计算属性

  • 计算属性和methods的对比
    • 计算属性在多次使用时，只会调用一次
    • 他是有缓存的
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
<!--计算属性-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>


<body>
<div id="app">
    1：{{currentTime1()}}
    2：{{currentTime2}}
</div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            message:'hello world'
        },
        methods:{
            currentTime1:function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
            currentTime2:function () {
                return Date.now();
            }
        }
    });
</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
<!--slot-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item1 in todoItems" :item2="item1"></todo-items>
    </todo>
</div>

<script>
    //slot：插槽
    Vue.component("todo",{
        template: '<div>\
            <slot name="todo-title"></slot>\
            <ul>\
                <slot name="todo-items"></slot>\
            </ul>\
            </div>'
    })

    Vue.component("todo-title",{
        props:['title'],
        template: '<div>{{title}}</div>'
    })

    Vue.component("todo-items",{
        props:['item2'],
        template: '<div>{{item2}}</div>'
    })
    var vm = new Vue({
        el:'#app',
        data:{
            title:"sss",
            todoItems:['hello world','dddddd']
        },
    });
</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
59
60
61
62
63
<!--自定义内容分发-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item1,index) in todoItems" :item2="item1" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>

<script>
    //slot：插槽
    Vue.component("todo",{
        template: '<div>\
            <slot name="todo-title"></slot>\
            <ul>\
                <slot name="todo-items"></slot>\
            </ul>\
            </div>'
    })

    Vue.component("todo-title",{
        props:['title'],
        template: '<div>{{title}}</div>'
    })

    Vue.component("todo-items",{
        props:['item2','index'],
        template: '<li>{{item2}}  <button @click="remove()">删除</button></li>',
        methods:{
            remove:function (index) {
                // vm.removeItems(this.index);
                this.$emit('remove',index)
            }
        }
    })
    var vm = new Vue({
        el:'#app',
        data:{
            title:"sss",
            todoItems:['hello world','dddddd']
        },
        methods: {
            removeItems:function (index) {
                console.log("删除了"+this.todoItems[index]+"OK")
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }

    });
</script>
</body>
</html>

原文作者：30no2

原文链接：http://mr-9.github.io/2021/05/18/vue.js笔记一/

发表日期：May 18th 2021, 12:00:00 am

更新日期：May 25th 2021, 11:38:11 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. No1、构建vue.js项目
    1. 1.1. 一、显示数据
    2. 1.2. 二、条件
    3. 1.3. 三、循环
    4. 1.4. 四、事件
    5. 1.5. 五、双向绑定
    6. 1.6. 六、定义一个组件
    7. 1.7. 七、Axios异步通信
    8. 1.8. 八、计算属性
    9. 1.9. 九、插槽
    10. 1.10. 十、自定义内容分发
Total : 86
2021
2020
2019
2018
2017
Invalid date
2021
2020
2019
2018
2017
日记 Java Linux 工作日记 spring linux git 技术文章 狂神说学习笔记 java 笔记,git,码云 破解 php markdown 开发 phpstorm python svn 工具 vue php和mysql Web开发 全职高手 切尔诺贝利日记 切尔诺贝利 电视剧 攀登者 mysql 人民的名义 电影集合 游戏 权利的游戏 jq 黑袍纠察队 第一季
序 学习 linux 常用方法 markdown 杂七杂八 svn 工具 学习笔记 影视 数据库 读书笔记