Vue 再学习

发表于 | 分类于 |

MVVM思想
M：module 包括数据和一些基本操作
V：view 视图，页面渲染结果
VM：View-module，模型与视图间的双向操作（无需开发人员干涉）

视图和数据通过VM绑定起来，模型里有变化会自动地通过Directives填写到视图中，视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。

第一个 Vue 程序

1）、创建 gitee 码云代码仓库
在这里插入图片描述

2）、导入 IDEA
在这里插入图片描述
3）、记得安装 Vue.js 插件
在这里插入图片描述

4）、vue 的安装
直接引入脚本：<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

或者

1
2
3
4
5
1、 初始化项目（初始化项目，生成了一个 package.json 文件，说明他是一个 npm 管理的项目）
npm init -y

2、安装 vue（安装后在项目 node_modules 里有 vue）
npm install vue

在这里插入图片描述

5）、新建一个 index.html 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>{{name}}，你好~！</h1>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el: '#app',
        data: {
            name: '大牛'
        }
    });
</script>
</body>
</html>

5）、此时页面，已经显示“大牛，你好”。

此时我在控制台修改属性之后，页面变为“二蛋，你好”

这种被称为“单向绑定”：属性动页面跟着动。
“双向绑定”：页面动，属性也跟着动，属性动，页面也跟着动。
在这里插入图片描述

双向绑定

1）、代码（使用到了 v-model 双向绑定，属性与表单进行绑定）

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>Title</title>
</head>
<body>

<div id="app">
    <input v-model="num">
    <h1>{{name}}，你好~！有{{num}}个人为你点赞！</h1>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el: '#app',
        data: {
            name: '大牛',
            num: 5
        }
    });
</script>
</body>
</html>

2）、其中表单内容变，属性值就变，由属性值映射的也就跟着变。

同样，属性变，表单内容也变，也就跟着变。
在这里插入图片描述

事件绑定

1）、绑定属性代码。v-on:事件名称=”属性名称”

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <input v-model="num">
    <button v-on:click="num++">点赞</button>
    <h1>{{name}}，你好~！有{{num}}个人为你点赞！</h1>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el: '#app',
        data: {
            name: '大牛',
            num: 5
        }
    });
</script>
</body>
</html>

2）、点击按钮事件
在这里插入图片描述

3）、绑定方法。v-on:事件名称=”方法名()”

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <input v-model="num">
    <button v-on:click="num++">点赞</button>
    <button v-on:click="cancel()">取消</button>
    <h1>{{name}}，你好~！有{{num}}个人为你点赞！</h1>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el: '#app',
        data: {
            name: '大牛',
            num: 5
        },
        methods:{
            cancel(){
                this.num--;
            }
        }
    });
</script>
</body>
</html>

4）、点击“取消”
在这里插入图片描述

Chrome 插件：Vue.js devtools

1）、安装
Vue.js devtools — 谷歌商店安装

或者，你可以百度下载压缩包

2）、可以很明显，查到 vue 属性

在这里插入图片描述

花括号，v-text，v-html

1）、花括号

1
2
3
4
5
6
7
8
9
+ 格式{{表达式}}

+ 该表达式支持JS语法，可以调用js内置函数（必须有返回值）

+ 表达式必须有返回结果。例如 {{1 + 1}}，没有结果的表达式不允许使用，如：{{var a = 1 + 1}};

+ 可以直接获取Vue实例中定义的数据或函数,使用函数{{方法名()}},使用属性{{属性名}}

+ 花括号有插值闪烁问题，而v-text，v-html则没有

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
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{msg}} {{1+1}} {{hello()}}<br/>
    <h1 v-text="msg"></h1>
    <h1 v-html="msg"></h1>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: "<p style='color: red'>这是测试</p>",
        },
        methods: {
            hello() {
                return "World"
            }
        }
    });
</script>
</body>
</html>

3）、演示
在这里插入图片描述

v-bind

给html标签的属性绑定，”v-bind:属性”，也可以简写为“:属性”

1）、绑定 a 标签 href 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 给html标签的属性绑定 -->
<div id="app">
    <a v-bind:href="link">点击跳转</a>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            link: 'https://www.baidu.com',
        }
    });
</script>
</body>
</html>

2）、点击跳转至百度。

再把属性改为QQ，点击跳转至QQ
在这里插入图片描述

在这里插入图片描述

3）、测试绑定 class，style 属性。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 给html标签的属性绑定 -->
<div id="app">
    <a v-bind:href="link">点击跳转</a>
    <span class="active text-danger" style="color: red;font-size: 20px">你好</span>
    <br/>
    <span v-bind:class="{active:isActive,'text-danger':hasError}"
          v-bind:style="{color: color1,fontSize: size}">你好</span>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            link: 'https://www.baidu.com',
            isActive: true,
            hasError: true,
            color1: 'blue',
            size: '30px'
        }
    });
</script>
</body>
</html>

4）、修改对应模型层，视图层也会跟着改变。
在这里插入图片描述

5）、此时我们修改视图层，但模型层的数据却不会跟着改变。所以称之为“单向绑定”
在这里插入图片描述

v-model

双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
# v-model 的可使用的元素
+ input
+ select
+ textarea
+ checkbox
+ radio
+ components(Vue中的自定义组件)

# 对应类型
+ 多个checkbox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型
+ radio对应的值是input的value值
+ text和textarea默认对应的model是字符串
+ select单选对应字符串，多选对应也是数组

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 双向绑定。表单项，自定义组件 -->
<div id="app">
    精通的语言：<br/>
    <input type="checkbox" v-model="language" value="Java"> Java<br/>
    <input type="checkbox" v-model="language" value="PHP"> PHP<br/>
    <input type="checkbox" v-model="language" value="Python"> Python<br/>
    选中了 {{language.join("，")}}
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            language: []
        }
    });
</script>
</body>
</html>

2）、视图层改变，模型层跟着改变。

模型层改变，视图层也会跟着改变。

在这里插入图片描述

v-on

1）、v-on 绑定事件，简写 @，可以绑定：js片段，或 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- v-on 绑定事件，简写 @-->
<div id="app">
    <!--事件中直接写js片段-->
    <button v-on:click="num++">点赞</button>
    <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
    <!--<button @click="cancel">取消</button>-->
    <button v-on:click="cancel">取消</button>
    <h1>有{{num}}个赞</h1>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            cancel() {
                this.num--;
            }
        }
    });
</script>
</body>
</html>

》》》 点击“点赞”，数量+1；点击“取消”，数量-1
在这里插入图片描述

2）、事件修饰符

1
2
3
4
5
.stop       阻止事件冒泡到父元素
.prevent    阻止默认事件发生
.capture    使用事件捕获模式
.self       只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once       只执行一次

》》》给大小 div 都绑定了 hello 事件。
》》》此时点击一次小div，同时也会触发大div，hello方法会被触发两次

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- v-on 绑定事件，简写 @-->
<div id="app">
    <!-- 事件修饰符 -->
    <div style="border: 1px solid red;padding: 20px;" v-on:click="hello">
        大div
        <div style="border: 1px solid blue;padding: 20px;" @click="hello">
            小div <br/>
            <a href="http://www.baidu.com">去百度</a>
        </div>
    </div>
</div>


<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            hello() {
                alert("点击了")
            }
        }
    });
</script>
</body>
</html>

》》》此处简写了部分代码
》》》给小div设置“.stop”，表示小div的事件不会传给父div，此时只触发一次小div 的 click事件

1
2
3
4
5
6
7
8
9
10
11
<!-- v-on 绑定事件，简写 @-->
<div id="app">
    <!-- 事件修饰符 -->
    <div style="border: 1px solid red;padding: 20px;" v-on:click="hello">
        大div
        <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
            小div <br/>
            <a href="http://www.baidu.com">去百度</a>
        </div>
    </div>
</div>

》》》此处简写了部分代码
》》》但此时，点击“去百度”链接，就相当于触发了小div，alert一次之后，就跳转至百度了
》》》可以使用“.prevent”阻止默认跳转行为，只触发一次小div，而不跳转百度

1
2
3
4
5
6
7
8
9
10
11
<!-- v-on 绑定事件，简写 @-->
<div id="app">
    <!-- 事件修饰符 -->
    <div style="border: 1px solid red;padding: 20px;" v-on:click="hello">
        大div
        <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
            小div <br/>
            <a href="http://www.baidu.com" @click.prevent>去百度</a>
        </div>
    </div>
</div>

》》》也可以给“@click.prevent”绑定一个事件，这时会触发两次 hello 方法，a 链接自身一次，小div触发一次。

1
2
3
4
5
6
7
8
9
10
11
<!-- v-on 绑定事件，简写 @-->
<div id="app">
    <!-- 事件修饰符 -->
    <div style="border: 1px solid red;padding: 20px;" v-on:click="hello">
        大div
        <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
            小div <br/>
            <a href="http://www.baidu.com" @click.prevent="hello">去百度</a>
        </div>
    </div>
</div>

》》》也可以，给 a链接设置一个“.stop”，此时点击 a链接也就只会触发一次 a链接的hello方法，而不会传递给小div，大div

1
2
3
4
5
6
7
8
9
10
11
<!-- v-on 绑定事件，简写 @-->
<div id="app">
    <!-- 事件修饰符 -->
    <div style="border: 1px solid red;padding: 20px;" v-on:click="hello">
        大div
        <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
            小div <br/>
            <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
        </div>
    </div>
</div>

》》》也可以给大 div设置“.once”，无论点击多少次大 div，只有第一次能触发 hello方法。

1
2
3
4
5
6
7
8
9
10
11
<!-- v-on 绑定事件，简写 @-->
<div id="app">
    <!-- 事件修饰符 -->
    <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
        大div
        <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
            小div <br/>
            <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
        </div>
    </div>
</div>

3）、按键修饰符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
事件类型,对应键盘字母
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space（空格键）
.up
.down
.left
.right
.13 等于.enter
.65表示a按键
.66表示b按键,以此类推

组合件按钮,对应按键
.ctrl
.alt
.shift
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- v-on 绑定事件，简写 @-->
<div id="app">
    <!-- 按键修饰符： -->
    <!--上按键 +2-->
    <!--下按键 +2-->
    <!--左按键 触发 hello 方法-->
    <!--Ctrl + 鼠标左键单击，变为 10-->
    <!--Alt + C +100-->
    <input type="text" v-model="num"
           v-on:keyup.up="num+=2"
           @keyup.down="num-=2"
           @keyup.left="hello"
           @click.ctrl="num=10"
           @keyup.alt.67="num+=100"><br/>


</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            hello() {
                alert("点击了")
            }
        }
    });
</script>
</body>
</html>

v-for

三种格式

1
2
3
4
5
6
7
8
9
10
11
# 集合
v-for="元素 in 集合"
v-for="(元素,index) in 集合"


# 对象
v-for="(value,key,index) in 对象"


# :key   ===>   一般使用 v-bind:key 绑定一个唯一标识
<li v-for="(value, key, index) in 对象" :key="index"></li>
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
            <!-- 1、显示user信息：v-for="item in items" -->
            当前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <br>
            <!-- 2、获取数组下标：v-for="(item,index) in items" -->
            <!-- 3、遍历对象：
                    v-for="value in object"
                    v-for="(value,key) in object"
                    v-for="(value,key,index) in object"
            -->
            对象信息：
            <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span>
            <!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
        </li>
    </ul>

    <ul>
        <li v-for="(num,index) in nums" :key="index">
            <span>{{num}} => {{index}} </span>
        </li>
    </ul>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            users: [{name: '柳岩', gender: '女', age: 21},
                {name: '张三', gender: '男', age: 18},
                {name: '范冰冰', gender: '女', age: 24},
                {name: '刘亦菲', gender: '女', age: 18},
                {name: '古力娜扎', gender: '女', age: 25}],
            nums: [1, 2, 3, 4, 4]
        },
    })
</script>
</body>
</html>

在这里插入图片描述

v-if，v-show

v-if：元素不可以审查元素看到，
v-show：元素可以审查元素看到，只是“display:none”

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
    v-show，当得到结果为true时，所在的元素才会被显示。
-->
<div id="app">
    <button v-on:click="show = !show">点我呀</button>
    <!-- 1、使用v-if显示 -->
    <h1 v-if="show">if=看到我....</h1>
    <!-- 2、使用v-show显示 -->
    <h1 v-show="show">show=看到我</h1>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            show: true
        }
    })
</script>
</body>
</html>

在这里插入图片描述

v-else-if，v-else

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>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="random=Math.random()">点我呀</button>
    <span>{{random}}</span>

    <h1 v-if="random>=0.75">
        看到我啦？！ [0.75，1]
    </h1>

    <h1 v-else-if="random>=0.5">
        看到我啦？！ [0.5，0.75)
    </h1>

    <h1 v-else-if="random>=0.2">
        看到我啦？！ [0.2，0.5)
    </h1>

    <h1 v-else>
        看到我啦？！ [0，0.2)
    </h1>

</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            random: 1
        }
    })
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
    <ul>
        <li>西游记； 价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"></li>
        <li>水浒传； 价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"></li>
        <li>总价：{{totalPrice}}</li>
        {{msg}}
    </ul>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    //watch可以让我们监控一个值的变化。从而做出相应的反应。
    new Vue({
        el: "#app",
        data: {
            xyjPrice: 50,
            shzPrice: 20,
            xyjNum: 1,
            shzNum: 1,
            msg: ""
        },
        computed: {
            totalPrice() {
                return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum
            }
        },
        watch: {
            xyjNum(newVal, oldVal) {
                if (newVal >= 3) {
                    this.msg = "库存超出限制";
                    this.xyjNum = 3
                } else {
                    this.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
<div id="app">
    <ul>
        <li v-for="user in userList">
            {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
            <br/>{{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
        </li>
    </ul>
</div>

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

    Vue.filter("gFilter", function (val) {
        if (val == 1) {
            return "男~~~";
        } else {
            return "女~~~";
        }
    })

    let vm = new Vue({
        el: "#app",
        data: {
            userList: [
                {id: 1, name: 'jacky', gender: 1},
                {id: 2, name: 'peter', gender: 0}
            ]
        },
        filters: {
            // filters 定义局部过滤器，只可以在当前vue实例中使用
            genderFilter(val) {
                if (val == 1) {
                    return "男";
                } else {
                    return "女";
                }
            }
        }
    })
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="count++">我被点击了 {{count}} 次</button>

    <counter></counter>
    <counter></counter>
    <counter></counter>
    <counter></counter>
    <counter></counter>

    <br/>

    <button-counter></button-counter>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    //1、全局声明注册一个组件
    Vue.component("counter", {
        template: `
            <button v-on:click="count++">我被点击了 {{count}} 次</button>`,
        data() {
            return {
                count: 1
            }
        }
    });

    //2、局部声明一个组件
    const buttonCounter = {
        template: `
            <button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
        data() {
            return {
                count: 1
            }
        }
    };

    new Vue({
        el: "#app",
        data: {
            count: 1
        },
        components: {
            'button-counter': buttonCounter
        }
    })
</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
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span id="num">{{num}}</span>
    <button @click="num++">赞！</button>
    <h2>{{name}}，有{{num}}个人点赞</h2>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            name: "张三",
            num: 100
        },
        methods: {
            show() {
                return this.name;
            },
            add() {
                this.num++;
            }
        },
        beforeCreate() {
            console.log("=========beforeCreate=============");
            console.log("数据模型未加载：" + this.name, this.num);
            console.log("方法未加载：" + this.show());
            console.log("html模板未加载：" + document.getElementById("num"));
        },
        created: function () {
            console.log("=========created=============");
            console.log("数据模型已加载：" + this.name, this.num);
            console.log("方法已加载：" + this.show());
            console.log("html模板已加载：" + document.getElementById("num"));
            console.log("html模板未渲染：" + document.getElementById("num").innerText);
        },
        beforeMount() {
            console.log("=========beforeMount=============");
            console.log("html模板未渲染：" + document.getElementById("num").innerText);
        },
        mounted() {
            console.log("=========mounted=============");
            console.log("html模板已渲染：" + document.getElementById("num").innerText);
        },
        beforeUpdate() {
            console.log("=========beforeUpdate=============");
            console.log("数据模型已更新：" + this.num);
            console.log("html模板未更新：" + document.getElementById("num").innerText);
        },
        updated() {
            console.log("=========updated=============");
            console.log("数据模型已更新：" + this.num);
            console.log("html模板已更新：" + document.getElementById("num").innerText);
        }
    });
</script>
</body>
</html>

在这里插入图片描述

Vue 模块化开发

1）、创建 gitee 代码仓库，方便代码上传
在这里插入图片描述

在这里插入图片描述

2）、导入 git 项目
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3）、解决：'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件。

1
2
3
4
5
6
7
8
9
10
npm -g uninstall vue-cli

npm -g install vue
npm -g install @vue/cli

# 找到 prefix，在环境变量里面添加
npm config list

# 查看版本号
vue --version

4）、项目初始化

1
2
3
4
5
6
7
8
9
10

# 1、进入目录
cd xxx

# 2、安装命令
npm -g install webpack
npm -g install @vue/cli-init

# 3、项目初始化
vue init webpack vue-demo

在这里插入图片描述)在这里插入图片描述

5）、启动项目

1
2
3
cd vue-demo

npm run dev

在这里插入图片描述
在这里插入图片描述

整合 ElementUI

2021-01-26 17:21:33

1）、Element UI 官网

2）、安装npm -s install element-ui

3）、省略。。。可以参考之前的。

2021-01-26 17:30:55 我是真的不想跟着做这个 vue-demo 了，太折磨了。。。