Vue(就只了解了解)

引入vue.js的cdn

1
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

第一个vue的demo

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
{{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data:{
message: "hello Vue"
}
});
</script>

MVVM

Vue采用MVVM框架,即Model(模型层)、View(视图层)、ViewModel(视图模型对象,是连接view与model的桥梁,可类比控制层)。

在上述demo里我们创建了vue这个对象,可以在页面的控制台中使用vue.message = “xxx”进行动态赋值。

Vue七大属性

  • el:元素节点

  • data:用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中

  • template:设置模板,会替换页面元素,包括占位符

  • methods:定义方法,页面中的业务逻辑,js方法一般都放置在methods中

  • render:创建真正的Virtual Dom

  • computed:计算属性,可类比缓存

  • watch:

    • watch:function(new,old){}
    • 监听data中数据的变化
    • 两个参数,一个返回新值,一个返回旧值,

基本语法

绑定、判断、循环、监听

1
2
3
4
5
6
v-bind	绑定
v-if
v-else
v-else-if
v-for=("xxx in xxx") 类比foreach
v-on 监听事件

双向绑定(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
26
27
28
29
30
31
<div id="app">
输入:<input type="text" v-model="message"> {{message}}

</br>性别单选:
<input type="radio" name="sex" value="男" v-model="sex">
<input type="radio" name="sex" value="女" v-model="sex">
<p>
性别是:{{sex}}
</p>

下拉框:
<select v-model="selected">
<option value="" disabled>请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>{{selected}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
message: "123"
, sex: ''
, selected: ''
}
});
</script>

Vue组件(props)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
<tang v-for="arr in arrays" v-bind:foreach="arr"></tang>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.component("tang",{
props: ["foreach"]
, template: "<li>{{foreach}}</li>"
});

var vue = new Vue({
el: "#app"
, data: {
arrays: ["a","b","c"]
}
});
</script>

Vue.component声明了一个叫tang的组件,然后我们就可以使用tang标签。

vue对象有数组数据,在tang标签中继续for循环遍历数组,遍历出来的数据是arr,我们声明一个foreach的绑定变量来引用arr数据,随后在组件component中用props绑定这个foreach变量并应用它。

props就是组件来传递使用的变量。

Axios异步通信

相关cdn

1
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

我们在钩子函数mounted()里应用axios,注意返回的数据格式必须与json的数据格式相对应。当然我们要自定义一个json来测试功能。

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>{{info.name}}</div>
<div>{{info.address.country}}</div>

<a v-bind:href="info.url">dian ji</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vue = new Vue({
el: '#app'
, data(){
return{
info:{
name: null
, address: {
street: null,
city: null,
country: null
}
, url: null
}
}
}
, mounted(){
axios.get('data.json').then(response=>(this.info = response.data));
}
});
</script>

slot插槽

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
<div id="app">
<list>
<list-title slot="list-title" :title="title"></list-title>
<list-arrs slot="list-arrs" v-for="arr in arrs" :thing="arr"></list-arrs>
</list>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.component("list",{
template:
'<div>\
<slot name="list-title"></slot>\
<ul>\
<slot name="list-arrs"></slot>\
</ul>\
</div>'
});

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

Vue.component('list-arrs',{
props: ['thing'],
template:'<li>{{thing}}</li>'
});

var vue = new Vue({
el: "#app",
data:{
title: "datalist",
arrs:['tang1','tanmg2','tang9']
}

});
</script>

自定义事件内容分发(this.$emit)

使用 this.$emit 传参,可就是绑定我们的自定义事件。这里 @ 即 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div id="app"> 
<list>
<list-title slot="list-title" :title="title"></list-title>
<list-arrs slot="list-arrs" v-for="(arr,index) in arrs"
:thing="arr" :index="index" @remove="removeArr(index)" ></list-arrs>
</list>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.component("list",{
template:
'<div>\
<slot name="list-title"></slot>\
<ul>\
<slot name="list-arrs"></slot>\
</ul>\
</div>'
});

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

Vue.component('list-arrs',{
props: ['thing','index'],
template:'<li>{{thing}}__{{index}} <button @click="remove">删除</button> </li>',
methods:{
remove: function(){
this.$emit('remove');
}
}
});

var vue = new Vue({
el: "#app",
data:{
title: "datalist",
arrs:['tang1','tanmg2','tang9']
},
methods:{
removeArr: function(index){
console.log("删除"+this.arrs[index]);
this.arrs.splice(index,1);
}
}
});
</script>

vue-cli(脚手架)

  • 下载node.js,写博客就已经弄过了。。

  • 使用npm,下载cil

    1
    npm install -g @vue/cli
  • 新建项目

    1
    2
    3
    vue create my-project
    # OR
    vue ui

    强烈建议使用ui,虽然我不是专业前端,但这vue ui图形化界面用过绝壁都得说香

  • 启动项目

    命令行进入对应文件目录执行

    1
    2
    3
    4
    # vue3
    npm run serve
    # vue2
    npm run dev

    项目启动后直接哇塞,同一个局域网下可以直接访问网络地址,而且支持热更新,香真nm香,真他妈是真的爽,即改即试,都不用反复更新。

webpack

模块加载器 & 打包工具

1
2
npm install webpack -g
npm install webpack-cli -g
  • modules/hello.js

    1
    2
    3
    4
    //暴露一个方法
    exports.sayHello = function () {
    document.write("<h1>Hello!!</h1>");
    }

    modules/main.js

    1
    2
    var hello = require("./hello");
    hello.sayHello();
  • webpack打包

    1
    2
    3
    4
    5
    6
    module.exports = {
    entry: './modules/main.js',
    output: {
    filename: "./js/bundle.js"
    }
    };
  • index页面引用js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>

    <script src="dist/js/bundle.js"></script>

    </body>
    </html>

也就是说webpack类似我们java继承其他类,实现接口这样。打包方便第三方引用代码。

vue-router(官方路由管理器)

1
npm install [email protected]

首先在项目录里安装router,主要是进行页面跳转。

我们事先写好组件,然后引用对应组件进行页面的跳转。

官网:https://next.router.vuejs.org/introduction.html

小博客:https://www.cnblogs.com/davina123/p/13371333.html

ElementUI

官网:https://element.eleme.cn/#/zh-CN

很类似java导包,这里直接引用别人写好的组件即可

小结

Vue3出了,导致前几年的视频很多命令对不上,正统学习时要找一下时效性强的来学习。