Vue学习【第一篇】：Vue初识与指令

 

什么是Vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
什么是Vue
Vue.js是一个渐进式JavaScript框架<br>它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）
渐进式：vue从小到控制页面中的一个变量到页面一块内容到整个页面，最终大到整个项目，东可以用vue框架来实现
 
vue可以干哪些事
将数据渲染到指定区域（数据可以是后台获取，也可以由前台自己产生）
可以与页面完成基于数据的交互方式
 
为什么学习Vue
1.整合了Angular React框架的优点（第一手API文档是中文的）
2.单页面应用（得益于vue的组件化开发 => 前台代码的复用）
3.虚拟DOM（提高操作DOM的效应）
4.数据的双向绑定

怎么使用Vue#

1、引入vue.js#

2、展示HTML#

?
1
2
3
4
5
6
7
8
<div id="app">
    <p>{{msg}}</p>
    <p>{{ 80+2 }}</p>
    <p>{{ 20>30 }}</p>
    <h1 v-text="msg"></h1>
    <h1 v-html="hd"></h1>
    <h1 v-html="str"></h1>
</div>

3、建立一个vue对象#

vue对象需要手动创建， 原因，一个vue对象可以只控制页面中的某一部分， 如果一个页面有多个部分都需要被控制，那么就需要创建多个vue对象
vue对象如何与控制的页面进行关联（绑定），采用的是vue对象中的挂载点(挂载点可以唯一标识页面中的某一个区域)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // Vue实例会根据数据产生虚拟DOM,最终替换掉挂载点的真实DOM(不要挂在到body上)
    var app = new Vue({
        el: '#app',     //挂载点
        data: {
            msg: "赢在今日"
        }
    });
 
    // 如果需要使用vue对象(实例), 那么久可以接受Vue创建的结果, 反之就不需要接收
    console.log(app);
    console.log(app.$attrs); // vue实例的变量都是以$开头
    console.log(app.$el);
    console.log(app.$data.msg);
    console.log(app.msg);
    // app对象 = new Vue()实例 = 标签div#app组件
</script>

Vue实例#

el：实例#

?
1
2
3
4
5
6
new Vue({
    el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

data：数据#

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id='app'>
    {{ msg }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '数据',
        }
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data为插值表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->　

methods：方法#

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    .box { background-color: orange }
</style>
<div id='app'>
    <p class="box" v-on:click="pClick">测试</p>
    <p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            pClick () {
                // 点击测试
            },
            pOver () {
                // 悬浮测试
            }
        }
    })
</script>
<!-- 了解v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->

computed：计算#

?
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
<body>
    <div id="app">
        姓<input type="text" v-model="first_name">
        <hr>
        名<input type="text" v-model="last_name">
        <hr>
        <p>{{ first_name + " " + last_name }}</p>
        <p>{{ full_name_fn() }}</p>
        <!-- 一个变量的值依赖于多个变量的值 -->
        <p>{{ full_name }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            first_name: "",
            last_name: "",
        },
        methods: {
            // 声明的是函数, 该函数必须手动调用
            full_name_fn: function () {
                return this.first_name + " " + this.last_name
            }
        },
        computed: {
            // 声明变量full_name, 该变量的值等于后方函数的返回值
            // 函数中包含的所有vue变量值只要有发生变化的系统就会调用该函数
            full_name: function () {
                return this.first_name + " " + this.last_name
            }
        }
    })
</script>

watch：监听#

?
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
<body>
    <div id="app">
        姓名<input type="text" v-model="full_name">
        <hr>
        <p>{{ first_name }}</p>
        <hr>
        <p>{{ last_name }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            full_name: "",
            first_name: "",
            last_name: "",
        },
        watch: {
            // wacth只是对已有的变量进行值变化的监听, 一旦发现值变化,系统自动回调监听变量后的函数
            // 后方函数和前方变量只有数据变化的监听绑定关系, 没有值相关的联系
            full_name: function () {
                arr = this.full_name.split(" ");
                this.first_name = arr[0];
                this.last_name = arr[1];
            }
        }
    })
</script>

delimiters：分隔符#

?
1
2
3
4
5
6
7
8
9
10
11
12
<div id='app'>
    ${msg}
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        delimiters: ['${','}']
    })
</script>

生命周期钩子#

更加详细的资料见官网    https://cn.vuejs.org/v2/api/#选项-生命周期钩子

表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数

钩子函数: 满足特点条件被回调的方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new Vue({
    el: "#app",
    data: {
        msg: "message"
    },
    beforeCreate () {
        console.log("实例刚刚创建");
        console.log(this.msg);
    },
    created () {
        console.log("实例创建成功, data, methods已拥有");
        console.log(this.msg);
    },
    mounted () {
        console.log("页面已被vue实例渲染, data, methods已更新");
    }
    // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
})

Vue的指令#

指令：是带有v-前缀的特殊属性，通过属性来操作元素

文本相关指令#

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
    <!-- 插值表达式 -->
    <p>{{ msg }}</p>
    <!-- eg:原文本会被msg替换 -->
    <p v-text='msg'>原文本</p>
    <!-- 可以解析带html标签的文本信息 -->
    <p v-html='msg'></p>
    <!-- v-once控制的标签只能被赋值一次 -->
    <p v-once>{{ msg }}</p>
</div>
<script type="text/javascript">
    // 指令: 出现在html标签中可以被vue解析处理的全局属性
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>

斗篷指令#

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type="text/css">
    [v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
    {{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>
<!-- 避免页面闪烁-->　

属性指令#

?
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
<body>
    <div id="app">
        <!-- v-bind:属性 = "变量" -->
        <!-- 如果abc自定义属性被v-bind:指令绑定了,后面的值也会成为vue变量, 如果就想是普通字符串, 再用''包裹 -->
        <!-- : 就是 v-bind: 的简写方式 (1.常用 2.一定且只操作属性)-->
        <p v-bind:abc="'abc'" v-bind:title="h_info" :def="hehe">abc</p>
 
        <!--最常用的两个属性 class | style-->
 
        <!--class-->
        <p :class="a"></p> <!-- 单类名 -->
        <p :class="[a, b]"></p> <!-- 多类名 -->
        <p :class="{c: d}"></p> <!-- 了解: c为类名,是否起作用取决于d值为true|false 开关类名 -->
        <!--style-->
        <p :style="s1"></p> <!-- s1为一套样式 -->
        <p :style="[s1, s2, {textAlign: ta}]">12345</p><!-- 了解: s1,s2均为一套样式, ta是一个变量,专门赋值给textAlign("text-align") -->
 
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            h_info: "悬浮提示",
            hehe: "呵呵",
            a: 'active',
            b: 'rule',
            d: false,
            s1: { // 样式1: 值1, ..., 样式n: 值n
                width: '200px',
                height: '200px',
                background: 'red'
            },
            s2: {
                borderRadius: '50%'
            },
            ta: 'center'
        }
    })
</script><!-- v-bind: 指令可以简写为 : -->　

事件指令#

?
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
<body>
    <div id="app">
        <!-- v-on:事件 = "变量 简写 @ -->
        <!-- 事件绑定的变量可以在data中赋值,但建议在methods中赋值 -->
        <p v-on:click="fn1">11111111111111</p>
        <p @click="fn2">22222222222222</p>
        <!--vue事件的绑定可以传自定义参数-->
        <p @click="fn3(333)">3333333333333333</p>
        <!--vue事件的绑定不传自定义参数, 默认将事件对象传过去了-->
        <p @click="fn4">4444444444444444</p>
        <!--vue事件的绑定传自定义参数, 还要将事件对象传过去了, 要明确传$event-->
        <p @click="fn5(555, $event)">5555555555555555</p>
 
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            // 事件在data中提供一个函数地址,可以实现事件
            fn1: function () {
                console.log("11111111111111")
            }
        },
        // 事件尽量(要求)都放在vue实例的methods中
        methods: {
            fn2: function () {
                console.log("22222222222222")
            },
            fn3 (arg) {  // ES6语法
                console.log(arg)
            },
            fn4: function (ev) {
                console.log(ev)
            },
            fn5: function (arg, ev) {
                console.log(arg)
                console.log(ev)
            },
        }
    })
</script>

表单指令#

?
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
<div id="app">
    <!-- v-model针对于表单元素 -->
    <form action="" method="get">
        <!-- 1、双向绑定：服务于文本输入框 -->
        <!-- v-model存储的值为输入框的value值 -->
        <div>
            <input type="text" name="usr" v-model="in_val">
            <input type="password" name="ps" v-model="in_val" >
            <textarea name="info" v-model="in_val"></textarea>
        </div>
 
        <!-- 2、单选框 -->
        <div>
            <!-- 单选框是以name进行分组，同组中只能发生单选 -->
            <!-- v-model存储的值为单选框的value值 -->
            男：<input type="radio" name="sex" value="男" v-model="ra_val">
            女：<input type="radio" name="sex" value="女" v-model="ra_val">
            {{ ra_val }}
        </div>
 
        <!-- 3、单一复选框 -->
        <!-- v-model存储的值为true|false -->
        <!-- 或者为自定义替换的值 -->
        <div>
            <input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
            {{ sin_val }}
        </div>
 
        <!-- 4、多复选框 -->
        <!-- v-model存储的值为存储值多复选框value的数组 -->
        <div>
            <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
            <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
            <input type="checkbox" value="不挑" name="cless" v-model='more_val' />
            {{ more_val }}
        </div>
    </form>
</div>
 
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            in_val: '',
            // 默认值可以决定单选框默认选项
            ra_val: '男',
            // 默认值为true，单一复选框为选中，反之false为不选中
            sin_val: '',
            // 数组中存在的值对应的复选框默认为选中状态
            more_val: ['喜好女的','不挑']
        }
    })
</script>

条件指令#

?
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
64
65
66
67
68
<div id="app">
    <button @click="toggle">显隐切换</button>
    <!-- v-if -->
    <div class="box r" v-if="isShow"></div>
    <!-- v-show -->
    <div class="box o" v-show="isShow"></div>
    <!-- 1.条件渲染的值为true|false -->
    <!-- 2.true代表标签显示方式渲染 -->
    <!-- 3.false v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示 -->
 
<!-- 了解 :key由vue控制的属性key值需要唯一标识,因为key的值就是vue对该组件在内存中建立缓存的key -->
<!-- <div class="box red" v-if="r_show" :key="key" ></div> -->
 
 
    <!-- v-if v-else-if v-else 案例 -->
    <ul>
        <li @mouseover="changeWrap(0)">red</li>
        <li @mouseover="changeWrap(1)">green</li>
        <li @mouseover="changeWrap(2)">blue</li>
    </ul>
    <!-- red页面逻辑结构 -->
    <div class="wrap red" v-if="tag == 0" key="0">...</div>
    <!-- green页面逻辑结构 -->
    <div class="wrap green" v-else-if="tag == 1" key="1">...</div>
    <!-- blue页面逻辑结构 -->
    <div class="wrap blue" v-else key="2">...</div>
    <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
    <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->
 
    <!-- v-show 案例 -->
    <ul>
        <li @mouseover="changeMain(0)">red</li>
        <li @mouseover="changeMain(1)">green</li>
        <li @mouseover="changeMain(2)">blue</li>
    </ul>
    <!-- red页面逻辑结构 -->
    <div class="main red" v-show="whoShow(0)">...</div>
    <!-- green页面逻辑结构 -->
    <div class="main green" v-show="whoShow(1)">...</div>
    <!-- blue页面逻辑结构 -->
    <div class="main blue" v-show="whoShow(2)">...</div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            isShow: false,
            tag: 0,
            flag: 0
        },
        methods: {
            toggle () {
                this.isShow = !this.isShow;
            },
            changeWrap (num) {
                this.tag = num;
            },
            changeMain (num) {
                // this.flag num
                this.flag = num;
            },
            whoShow (num) {
                // this.flag num
                return this.flag == num;
            }
        }
    })
</script>

循环指令#

?
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
<body>
    <div id="app">
        <ul>
            <li>{{ ls[0] }}</li>
            <li>{{ ls[1] }}</li>
            <li>{{ ls[2] }}</li>
            <li>{{ ls[3] }}</li>
        </ul>
        <ul>
 
            <!-- 一般列表渲染需要建立缓存 -->
            <!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-
            bind:处理 -->
            <!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二
            个为元素索引 -->
 
            <li v-for="(ele, index) in ls">{{ ele }} {{ index }}</li>
        </ul>
        <ul>
 
            <!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二
            个为元素键,第三个为元素索引 -->
            <li v-for="(value, key, index) in dic">{{ key }} {{ value }} {{ index }}</li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            ls: ['张三', '李四', '王五', '赵六', '钱七'],
            dic: {
                name: 'Bob',
                age: 88,
                gender: '男'
            }
        },
 
    })
</script>

todolist案例#

?
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
<div id="app">
    <div>
        <input type="text" v-model="val">
        <button type="button" @click="submitMsg">提交</button>
    </div>
    <ul>
        <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li>
    </ul>
    {{ list }}
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            val: "",
            list: []
        },
        methods: {
            submitMsg () {
                if (this.val) {
                    this.list.push(this.val);
                    this.val = ""
                }
            },
            removeMsg(index) {
                this.list.splice(index, 1)
            }
        }
    })
</script>

自定义指令#

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
 
</head>
<body>
<div id="app">
    <input type="text" v-focus>
</div>
<script>
       new Vue({
            el:"#app",
            data:{
 
            },
           directives:{ //directives定义指令的
                focus:{   //focus指令的名字
                    inserted:function (els) {    //els绑定的这个元素
                        //inserted当绑定的这个元素  <input type="text" v-focus>显示的时候，
                        els.focus();  //获取焦点的一个方法，和以前的时候是一样的
                        els.style.backgroundColor="blue";
                        els.style.color='#fff'
                    }
                }
           }
        })
    </script>
</body>
</html>

实现tag切换的小示例#

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
            display: inline-block;
            border: 1px solid cornflowerblue;
            height: 50px;
            width: 200px;
            background: cornflowerblue;
            text-align: center;
            line-height: 50px;
 
        }
    </style>
</head>
 
<body>
<div id="mybox">
    <ul>
        <li><span v-on:click="qh(true)">二维码登录</span></li>
        <li><span v-on:click="qh(false)">邮箱登录</span></li>
    </ul>
    <div v-if="temp">
        <img src="erweima.png" alt="">
    </div>
    <div v-if="!temp">  <!--取反-->
        <form action="http://mail.163.com" method="post">
            <!--method是为了安全   ，action：提交的地址-->
            <p>邮箱：<input type="email"></p>
            <p>密码：<input type="password"></p>
            <p><input type="submit" value="登录"></p>
        </form>
    </div>
</div>
<script>
    new Vue({
        el:"#mybox",  //表示当前这个元素开始使用vue
        data:{
            temp:true
        },
        methods:{
            qh:function (t) {
                this.temp=t
            }
        }
    })
</script>
</body>
</html>

　　

posted @   鲸鱼的海老大  阅读(379)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae
CONTENTS
✕