Published in：2024-10-24 |

vue-day1

1. vue简介

官网: https://cn.vuejs.org/

渐进式JavaScript框架

1
2
3
4
5
6
7
8
9
10
11
12
#  渐进式
	1. 易用	html css javascript
	2. 灵活	开发前端页面十分灵活
	3. 高效	开发效率高
	
# Vue对于后端开发人员来说:
	vue是一个js框架, 让我们通过操作很少的dom元素,甚至不需要操作dom元素来很容易的就可以完成视图与数据的绑定	双向绑定  MVVM
	
	注意: 日后在使用vue的时候一般不引入jQuery
	
# Vue作者
	尤雨溪

2. vue的入门

2.1 vue的下载

1
2
3
4
5
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 vue的第一个实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">

    {{ message }}

    <h2>{{username}}</h2>

</div>
<!--  vue js的引入  -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="js/vue.min.js"></script>
<script>

    // 创建第一个vue的实例
    new Vue({
        el: "#app",     // 用来定义vue的作用范围 element对象
        // 用来给vue实例定义一些相关的数据  vue默认属性
        data: {
            // data中变量的名字可以随便定义
            message: "Hello Vue!!",
            username: "百知教育",
        },
    })
</script>
1
2
3
4
5
# 总结
	1. vue实例(对象)中el: 代表vue的作用范围,定义后可以在范围内使用vue的语法
	2. vue实例中data: 用来给vue绑定一些相关的数据, 绑定的数据可以通过{{变量名}}在vue的作用范围内进行访问
	3. 在使用插值表达式{{}}取值时可以进行简单的运算, 可以书写表达式,运算符,调用相关方法
	4. el属性可以使用任意类型的选择器,但是在使用时只推荐使用id选择器

3. v-text与v-html

3.1 v-text

v-text: 用来获取data中定义的数据并且将数据以文本的形式渲染到指定标签内部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">

    <span>{{message}}, 大家是非常优秀的大学生</span>
    <hr>
    <!-- v-text="data中定义好的变量"  会覆盖标签中原有的值   -->
    <span v-text="message">大家是非常优秀的大学生</span>
</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            message: "百知教育欢迎大家",
        },
    })
</script>
1
2
3
# v-text与{{}}插值表达式都是用来获取data中的数据,二者区别在于
	1. 使用v-text会覆盖标签内部原有的值,插值表达式不会覆盖,会与原有的值进行拼接
	2. 在网络较慢的情况下,v-text会避免出现插值闪烁的情况

3.3 v-html

用来获取data数据中的html标签,并且将a标签作为链接显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">

    {{msg}}

    <hr>
    <span v-html="msg"></span>

</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "<a href=\"\">百知教育</a>"
        },
    })
</script>

4. Vue的事件绑定

4.1 事件绑定的基本语法

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
<div id="app">

    <!-- 1. 页面提供点击按钮
         2. 给按钮绑定一个事件 onclick
         3. 在单击事件触发的方法中来修改年龄的值 并渲染到页面上
       -->

    <h3>年龄: {{age}}</h3>
    <!-- v-on:事件名="你在methods中定义好的方法的名称"   -->
    <input type="button" value="点我长大" v-on:click="add_age">

</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            age: 18,
        },
        // 用来定义vue的方法
        methods: {
            // 年龄增长的方法
            add_age: function () {
                // alert("方法触发了")
                // 获取data中定义的age并增长
                // 在事件方法中可以通过 this 来获取当前vue实例所包含的属性
                console.log(this.age)
                this.age++;
                console.log(this.age, "1111")
            },
        },
    })
</script>
1
2
3
4
5
# 总结
	1. 在vue中事件的绑定是通过v-on指令来完成的  v-on:事件名="定义好的方法"
	2. v-on:事件名="函数名" 赋值语句就是当前事件要触发的方法
	3. 在vue中事件对应的方发统一定义在vue实例中methods属性中
	4. 在vue定义的事件中,this代表当前vue实例,你可以通过this获取到vue实例的相关的数据

4.2 事件简化写法

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
<div id="app">

    <h3>年龄: {{age}}</h3>

    <input type="button" v-on:click="change_age" value="点击v-on绑定的事件">

    <!-- 事件的简化写法 @事件名  两者作用完全一致   -->
    <input type="button" value="简化写法" @click="edit_age">

</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            age: 23,
        },
        methods: {
            change_age: function () {
                this.age--;
            },
            edit_age: function () {
                this.age++;
            }
        },
    })
</script>

4.3 事件函数的简化

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
<div id="app">

    <h3>数字: {{ num }}</h3>

    <input type="button" @click="change_num" value="点我">

    <input type="button" @click="low_num" value="戳你">

</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            num: 20,
        },
        methods: {
            // 标准写法
            change_num: function () {
                this.num += 2;
            },
            // 简化写法
            low_num() {
                this.num--;
            },
        },
    })
</script>

4.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
<div id="app">

    <h3>数字: {{number}}</h3>

    <input type="button" value="点我" @click="change_number(78, '小黑', event)">
    <input type="button" value="点我2" @click="change_number2()">

</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            number: 34,
        },
        methods: {
            change_number(num, name, event) {
                console.log(name);
                this.number = num;
                console.log(event)
            },
            change_number2() {
                console.log(event)
            },
        },
    })
</script>

5. v-show v-if v-bind

5.1 v-show

v-show: 用来控制页面中的某个标签是否展示

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
<div id="app">

    <!-- 用来控制标签是否展示 true false  -->
    <h3 v-show="true">{{message}}</h3>
    <hr>
    <h3 v-show="isShow">{{message}}</h3>
    <hr>
    <input v-show="isShow" value="点击控制是否展示" @click="showMsg">

    <hr>
    <span v-show="count>=30">百知教育</span>
    <input type="button" value="点我" @click="change_count">
    <input type="button" value="点我" @click="add_count">

</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            message: "上课一定好好听~~",
            isShow: true,
            count: 30,
        },
        methods: {
            showMsg() {
                this.isShow = !this.isShow;
            },
            change_count() {
                this.count--;
            },
            add_count(){
                this.count++;
            },
        },
    })
</script>

5.2 v-if

v-if:用来控制页面元素的条件 v-else必须跟在v-if元素的后面,否则无法识别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">

    <h3 v-if="true" id="a1">百知教育</h3>
    <h3 v-else id="a2">欢迎你</h3>
    <h3 v-else-if="false">加入</h3>

</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {},
    })
</script>

5.3 v-bind

v-bind: 用来绑定标签的属性从而可以通过vue的实例来动态的修改标签的属性

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
<div id="app">

    <!--    <img class="aa" title="帅气的二哈"-->
    <!--         src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3469716026,2816395410&fm=26&gp=0.jpg">-->

    <!--  可以通过v-bind绑定data中定义的属性  v-bind绑定的属性的值一定要在data提前定义好  -->
    <!--    <img v-bind:src="src" v-bind:title="title" v-bind:class="{aa: showCss}">-->

    <!--  v-bind简化写法  -->
    <img :src="src" :title="title" :class="{aa: showCss}">

    <input type="button" value="改变图片的样式" @click="addCss">
    <input type="button" value="切换图片" @click="changeImg">

</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            title: "帅气的二哈",
            showCss: false,
            src: "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3469716026,2816395410&fm=26&gp=0.jpg"
        },
        methods: {
            // 改变图片的样式
            addCss() {
                this.showCss = !this.showCss;
            },
            changeImg() {
                this.src = "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2481540226,557581684&fm=115&gp=0.jpg"
            },
        },
    })
</script>
1
2
3
# 总结
	1. 可以通过v-bind来为标签动态的绑定属性,绑定后可以通过vue实例来控制标签的属性
	2. v-bind:属性  可以简写为 :属性  两者只是写法不同  其余一致

6. v-for

v-for: 用来进行循环遍历

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
<div id="app">

    <h3>{{user.name}}=={{user.age}}=={{user.pwd}}</h3>

    <!--  遍历对象  -->
    <span v-for="(value, key, index) in user">
        {{key}}: {{value}}==={{index}}
    </span>

    <!-- 遍历书序   -->
    <ul v-for="(city, index) in arr">
        <li>{{index + 1}}: {{city}}</li>
    </ul>
    <hr>
    <!-- 遍历数组中的对象   -->
    <ul v-for="(value, index) in users" :key="index">
        <li>{{index+1}}: {{value.name}}=={{value.age}}</li>
    </ul>

</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            user: {name: "小黑", age: 23, pwd: "123456"},
            arr: ["四川", "北京", "山西"],
            users: [{name: "小黑", age: 13, pwd: "123456"},
                {name: "小张", age: 23, pwd: "123456"},
                {name: "小波", age: 63, pwd: "123456"},
            ]
        },
    })
</script>
1
2
# 注意:
	在使用v-for的时候一定注意加上:key 用来给vue内部提供重用和排序的唯一key

7. v-model双向绑定

7.1 基本实例

v-model: 用来绑定标签元素值与vue实例中data的数据保持一致,从而可以实现数据的双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">

    <!--  v-model只能应用于表单控件  -->
<!--    <input type="text" @click="changeValue" value="改变value">-->
    <input type="text" v-model="message">

    <p>{{message}}</p>

</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            message: "",
        },
        methods: {
            changeValue() {
                this.message = "百知教育"
            },
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
# 总结:
	1. 使用v-model可以实现数据与页面的双向绑定
	2. 所谓双向绑定:
		表单中的数据发生变化导致vue实例中的data数据发生了变化
		vue实例中data数据的变化也会影响到页面中数据的显示

# MVVM架构  双向绑定机制
	model: 数据 vue绑定的数据
	VM: viewmodel  监听器
	View: 页面  页面所展示的数据

7.2 留言板

1
w

作业

1
2
3
1. 完成课堂所有案例至少一遍,掌握vue的基本指令
2. 完成留言板的开发
	展示留言	添加留言	删除留言	留言总数量	删除所有留言	留言数量为空就,删除所有按钮不显示
Prev:
Next:

    • Copyright © 2022 - 2024 16778738 | Powered by “> |