共计 21323 个字符,预计需要花费 54 分钟才能阅读完成。
Vue (读音 /vjuː/,相似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为能够自底向上逐层利用。Vue 的外围库只关注视图层,不仅易于上手,还便于与第三方库或既有我的项目整合。另一方面,当与现代化的工具链以及各种反对类库联合应用时,Vue 也齐全可能为简单的单页利用提供驱动。
一、MVVM 模式和第一个 Vue 程序
1. 什么是 MVVM
该层向上与视图层进行双向数据绑定
向下与 Model 层通过接口申请进行数据交互
在这里插入图片形容
Vue 的装置形式:
1.1 应用 CDN 办法(初学者应用)
也能够间接应用 CDN 的形式引入,代码如下:
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
1
1.2Vue-cli 脚手架
利用 Vue-cli 脚手架构建 Vue 我的项目,在前面第七点具体解说。(中大型项目中举荐应用)。
2. 第一个 Vue 程序
1、创立一个 HTML 文件
2、引入 Vue.js
<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
1
残缺示例:
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset="UTF-8">
<title> 贝西说 </title>
<!--1. 引入 vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!–view 视图 –>
<div id=”app”>
<input type="text" v-model="message"/>
{{message}}
</div>
<script>
var vue=new Vue({
el:"#app",
/*model 数据 */
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
演示成果:(视图驱动数据,数据驱动视图)
在这里插入图片形容
二、根底语法
v-bind
v-bind 就是用于绑定数据和元素属性的
残缺示例:
<body>
<div class="app">
<a v-bind:href="url"> 点我 </a>
</div>
<script>
var app = new Vue({
el:'.app',
data:{url:"https://www.baidu.com",}
});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
留神:
v-bind 前面是:属性名 =,我的了解是示意绑定这个属性,绑定之后,对应的值要去 vue 的数据外面找。
当咱们在控制台扭转 url 时,对应也会变动。
雷同的,咱们还能够绑定图片 src 属性、超链接的 class
<body>
<div class="app">
<a v-bind:href="url"> 点我 </a>
![](imgsrc)
</div>
<script>
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
imgsrc:"https://cn.vuejs.org/images/logo.png"
}
});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
留神:
<div class=”app”>
<a v-bind:href="url"> 点我 </a>
</div>
1
2
3
通常咱们能够将 v -bind:简写成:
<div class=”app”>
<a :href="url"> 点我 </a>
</div>
1
2
3
v-if,v-else
v-if,v-else
残缺示例:
<body>
<div id="app">
<div v-if="ok">YES</div>
<div v-else>NO</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{ok:true,}
});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
v-if,v-else-if,v-else
<body>
<div id="app">
<div v-if="role=='beixi'|| role=='admin'"> 您好,admin</div>
<div v-else-if="role=='jzj'"> 贾志杰 </div>
<div v-else> 您无权拜访!</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{role:"admin",}
});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
v-for
1、v-for 循环一般数组
<body>
<div id="app">
<p v-for="(item,index) in list">{{item}}---- 索引:{{index}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{list:[1,2,3,4,5],
}
});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
2、v-for 循环对象数组
<body>
<div id="app">
<p v-for="(user,index) in list">{{user.id}}---{{user.name}}----- 索引:{{index}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
list:[{id:1,name:'beixi'},
{id:2,name:'jzj'},
{id:3,name:'贾志杰'}
],
}
});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
3、v-for 循环对象
<body>
<div id="app">
<p v-for="(val,key,index) in user"> 值:{{val}}--- 键:{{key}}----- 索引:{{index}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
user:{
name:"beixi",
age:"18",
sex:"男"
}
}
});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
4、v-for 循环数字
<body>
<div id="app">
<p v-for="count in 5"> 这是第 {{count}} 次循环 </p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{}});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
三、Vue 绑定事件
语法:
v-on: 事件名 =“办法名”
简写:@事件名 =“办法名”
事件名:click|keydown|keyup|mouseover|mouseout| 自定义事件名
v-on 事件监听,残缺示例:
<!DOCTYPE html>
<html xmlns:v-on=”http://www.w3.org/1999/xhtml”>
<head lang=”en”>
<meta charset="UTF-8">
<title> 贝西说 </title>
<!--1. 引入 vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{count}}
<button v-on:click="count+=1"> 点我加 1 </button>
<button v-on:click="sub"> 点我减 1 </button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{count:1},
methods:{sub:function(){this.count-=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
留神:v-bind 能够简写为:v-on: 能够简写 @
四、Vue:表单双绑、组件
1. 什么是双向数据绑定
Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变动。这也算是 Vue.js 的精华之处了。
值得注意的是,咱们所说的数据双向绑定,肯定是对于 UI 控件来说的,非 UI 控件不会波及到数据双向绑定。单向数据绑定是应用状态管理工具的前提。如果咱们应用 vuex,那么数据流也是单项的,这时就会和双向数据绑定有抵触。
2. 在表单中应用双向数据绑定
你能够用 v-model 指令在表单、及 元素上创立双向数据绑定。它会依据控件类型主动选取正确的办法来更新元素。只管有些神奇,但 v-model 实质上不过是语法糖。它负责监听用户的输出事件以更新数据,并对一些极其场景进行一些非凡解决。
留神:v-model 会疏忽所有表单元素的 value、checked、selected 个性的初始值而总是将 Vue 实例的数据作为数据起源。你应该通过 JavaScript 在组件的 data 选项中申明初始值!
示例 1:
<body>
<div id="app">
<input type="text" v-model="message"/>{{message}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{message:''}
});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
实现成果:
在这里插入图片形容
示例 2:
<div id=”app”>
<input type="radio" name="sex" value="男" v-model="gender"/> 男
<input type="radio" name="sex" value="女" v-model="gender"/> 女
<p>{{gender}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{gender:''}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
示例 3:
<body>
<div id="app">
<select v-model="selected">
<option value="">-- 请抉择 --</option>
<option value="北京"> 北京 </option>
<option value="上海"> 上海 </option>
<option value="广州"> 广州 </option>
</select>
<p>{{selected}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{selected:''}
});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
3. 什么是组件
组件是可复用的 Vue 实例,说白了就是一组能够重复使用的模板,跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着殊途同归之妙。
通常一个利用会以一棵嵌套的组件树的模式来组织:在这里插入图片形容
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又蕴含了其它的像导航链接、博文之类的组件。
4. 简略定义一个组件
留神:在理论开发中,咱们并不会用以下形式开发组件,而是采纳 vue-cli 创立 .vue 模板文件的形式开发,以下办法只是为了让大家了解什么是组件。
<div id=”app”>
<beixi></beixi>
</div>
<script>
// 注册组件
Vue.component("beixi",{template:'<li>hello</li>'});
var app = new Vue({el:"#app",});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
阐明:
Vue.component():注册组件
beixi:自定义组件的名字
template:组件的模板
5. 应用 props 属性动静传递参数
<body>
<div id="app">
<!-- 组件:应用 props 把值传递给组件 -->
<blog-post v-for="item in items" v-bind:value="item"></blog-post>
</div>
<script>
Vue.component("blog-post",{props:['value'],
template:'<li>{{value}}</li>'
});
var app = new Vue({
el:"#app",
data:{items:['beixi','jzj','贾志杰']
}
});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
阐明:
v-for=“item in items”:遍历 Vue 实例中定义的名为 items 的数组,并创立等同数量的组件
v-bind:value=“item”:将遍历的 item 项绑定到组件中 props 定义的名为 value 属性上;= 号右边的 value 为 props 定义的属性名,左边的为 item in items 中遍历的 item 项的值
五、Axios 异步通信
1. 什么是 Axios
Axios 是一个开源的能够用在浏览器端和 NodeJS 的异步通信框架,她的次要作用就是实现 AJAX 异步通信,其性能特点如下:
从浏览器中创立 XMLHttpRequests
从 node.js 创立 http 申请
反对 Promise API [JS 中链式编程]
拦挡申请和响应
转换申请数据和响应数据
勾销申请
主动转换 JSON 数据
客户端反对进攻 XSRF(跨站申请伪造)
GitHub:https://github.com/axios/axios
中文文档:http://www.axios-js.com/
2. 为什么要应用 Axios
因为 Vue.js 是一个 视图层框架 并且作者(尤雨溪)严格准守 SoC(关注度拆散准则),所以 Vue.js 并不蕴含 AJAX 的通信性能,为了解决通信问题,作者独自开发了一个名为 vue-resource 的插件,不过在进入 2.0 版本当前进行了对该插件的保护并举荐了 Axios 框架。少用 jQuery,因为它操作 Dom 太频繁!
3. 第一个 Axios 应用程序
咱们开发的接口大部分都是采纳 JSON 格局,能够先在我的项目里模仿一段 JSON 数据,数据内容如下:创立一个名为 data.json 的文件并填入下面的内容,放在我的项目的根目录下
{
“name”: “ 贝西说 ”,
“url”: “https://blog.csdn.net/beixishuo”,
“page”: 1,
“isNonProfit”: true,
“address”: {
"street": "太谷",
"city": "山西晋中",
"country": "中国"
},
“links”: [
{
"name": "bilibili",
"url": "https://space.bilibili.com/474668932"
},
{
"name": "贝西说",
"url": "https://blog.csdn.net/beixishuo"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
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
残缺示例:
<!-- 引入 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!-- 在线引入 axios。在我的项目开发中会装置 axios 组件(npm install axios)-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id=”app”>
<div>{{info.name}}</div>
<div>{{info.address}}</div>
<a v-bind:href="info.url"> 贝西说 </a>
</div>
<script>
var app=new Vue({
el:"#app",
//data: 属性
data:function(){// 须要解决 (返回) 后盾数据在页面上渲染时应用
return{
// 申请的返回参数格局必须和 json 字符串一样
info:{
name:null,// 相当于形参占位,理论参数 data.json 会赋予
url:null,
address:{
street:null,
city:null,
country:null
}
}
}
},
mounted:function(){//mounted 钩子函数,相当于 java 中 main 函数。能够调用 methods 中定义的函数
// axios.get('data.json').then(resp=>(console.log(resp.data)));
axios.get('data.json').then(resp=>(this.info=resp.data));
}
})
</script>
</body>
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
阐明:
在这里应用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
应用 axios 框架的 get 办法申请 AJAX 并主动将数据封装进了 Vue 实例的数据对象中
咱们在 data 中的数据结构必须要和 Ajax 响应回来的数据格式匹配!
4.axios API
能够通过将相干配置传递给 axios 来进行申请。
axios(config)
// 发送一个 POST 申请
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
1
2
3
4
5
6
7
8
9
axios(url[, config])
// 发送一个 GET 申请 (GET 申请是默认申请模式)
axios('/user/12345');
1
2
申请办法别名
为了不便起见,曾经为所有反对的申请办法提供了别名。
axios.request(config)
axios.get(url [,config])
axios.delete(url [,config])
axios.head(url [,config])
axios.post(url [,data [,config]])
axios.put(url [,data [,config]])
axios.patch(url [,data [,config]])
留神
当应用别名办法时,不须要在 config 中指定 url,method 和 data 属性。
5.Vue 的生命周期
在这里插入图片形容
六、计算属性
1. 什么是计算属性
当一些数据须要依据其它数据变动时, 须要进行解决能力去展现, 尽管 vue 提供了绑定数据表达式绑定的形式, 然而设计它的初衷只是用于简略运算的。在模板中放入太多的逻辑会让模板过重且难以保护, 对于一些比较复杂和非凡的计算有可能就顾此失彼了, 而且计算的属性写在模板里也不利于我的项目保护
computed 次要的作用:
拆散逻辑 (模板和数据拆散)
缓存值
双向绑定(getter,setter)
简略了解为:把计算的后果当作属性返回去
2. 残缺示例
<!-- 引入 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id=”app”>
<input type="text" v-model="num1"/><input type="text" v-model="num2"/>
<p> 求和后果{{result}}</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{num1:1,num2:2},
computed:{// 计算属性
result:function(){return parseInt(this.num1)+parseInt(this.num2);
}
}
})
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
3、methods 办法与 computed 计算属性区别
两者的执行后果是完全相同的
计算属性是基于他们的依赖进行缓存的,只有在相干依赖产生扭转时,他们才会从新求值,也就是说,只有他的依赖没有发生变化,那么每次拜访的时候计算属性都会立刻返回之前的计算结果,不再执行函数
每次触发从新渲染时,调用办法将总会再次执行函数
七、前端工程化 vue-cli
Vue 脚手架指的是 vue-cli,它是一个专门为单页面利用疾速搭建繁冗的脚手架,它能够轻松的创立新的应用程序而且可用于主动生成 vue 和 webpack 的我的项目模板。
利用 vue-cli 脚手架来构建 Vue 我的项目须要先装置 Node.js 和 NPM 环境。
1.Node.js 的装置
Node.js 的装置比较简单,大家须要在 node.js 官网(https://nodejs.org/en/downloa…,windows 的举荐下载 Windows Installer (.msi)。同时,大家会失去一个附送的 NPM 工具。
装置 Node.js,双击下载好的 node 文件,如图所示。
在这里插入图片形容
装置过程比较简单,始终“下一步”即可。
环境变量配置:装置实现后须要设置环境变量:即 Path 中增加装置目录 (例如:D:javanodejs),如图所示。
在这里插入图片形容
点击开始 =》运行 =》输出 ”cmd” => 输出 node - v 如图所示,验证装置是否胜利。
在这里插入图片形容
2.npm 装置
因为 node.js 曾经集成了 npm,所以之前 npm 也一并装置好了。所以在 cmd 终端输出 npm -v 来测试是否装置胜利。命令如图 所示,呈现版本提醒示意装置胜利。
在这里插入图片形容
3 根本应用
在这里插入图片形容
步骤如下:
① 搭建第一个残缺的 Vue-cli 脚手架构建的我的项目。
在这里插入图片形容
② 装置实现,输出 Vue -V,如果呈现相应的版本号,则阐明装置胜利。如图 7 - 6 所示。
在这里插入图片形容
③ 咱们能够应用 vue-cli 来疾速生成一个基于 webpack 模板构建的我的项目,如图所示,我的项目名为 vue-project。
在这里插入图片形容
④ 配置实现后,能够看到目录下多出了一个我的项目文件夹,外面就是 vue-cli 创立的一个基于 webpack 的 vue.js 我的项目。
而后进入我的项目目录(如:cd vue-project),应用 npm install 装置依赖,如图所示。
在这里插入图片形容
依赖装置实现后,咱们来看一下我的项目的目录构造,如下所示:
.
|– build // 我的项目构建 (webpack) 相干代码
| |– build.js // 生产环境构建代码
| |– check-version.js // 查看 node、npm 等版本
| |– dev-client.js // 热重载相干
| |– dev-server.js // 构建本地服务器
| |– utils.js // 构建工具相干
| |– webpack.base.conf.js // webpack 根底配置
| |– webpack.dev.conf.js // webpack 开发环境配置
| |– webpack.prod.conf.js // webpack 生产环境配置
|– config // 我的项目开发环境配置
| |– dev.env.js // 开发环境变量
| |– index.js // 我的项目一些配置变量
| |– prod.env.js // 生产环境变量
| |– test.env.js // 测试环境变量
|– node_modules // 所须要依赖资源
|– src // 源码目录
| |– assets // 寄存资产文件
| |– components // vue 公共组件
| |– router // 寄存路由 js 文件,用于页面的跳转
| |– App.vue // 页面入口文件
| |– main.js // 程序入口文件,加载各种公共组件
|– static // 动态文件,比方一些图片,json 数据等
| |– data // 群聊剖析失去的数据用于数据可视化
|– .babelrc // ES6 语法编译配置
|– .editorconfig // 定义代码格局
|– .gitignore // git 上传须要疏忽的文件格式
|– README.md // 我的项目阐明
|– favicon.ico
|– index.html // 入口页面
|– package.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
31
32
对于开发者更多操作的是 src 目录:
|– src // 源码目录
| |– assets // 寄存资产文件
| |– components // vue 公共组件
| |– router // 寄存路由 js 文件,用于页面的跳转
| |– App.vue // 页面入口文件
| |– main.js
1
2
3
4
5
6
④ 输出 npm run dev 命令来启动我的项目,如图所示。
在这里插入图片形容
运行胜利后在浏览器输出:http://localhost:8080,拜访我的项目后果如图所示。
在这里插入图片形容 Vue (读音 /vjuː/,相似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为能够自底向上逐层利用。Vue 的外围库只关注视图层,不仅易于上手,还便于与第三方库或既有我的项目整合。另一方面,当与现代化的工具链以及各种反对类库联合应用时,Vue 也齐全可能为简单的单页利用提供驱动。
一、MVVM 模式和第一个 Vue 程序
1. 什么是 MVVM
- 该层向上与视图层进行双向数据绑定
- 向下与 Model 层通过接口申请进行数据交互
Vue 的装置形式:
1.1 应用 CDN 办法(初学者应用)
也能够间接应用 CDN 的形式引入,代码如下:
`<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>`
* 1
1.2Vue-cli 脚手架
利用 Vue-cli 脚手架构建 Vue 我的项目,在前面第七点具体解说。(中大型项目中举荐应用)。
2. 第一个 Vue 程序
1、创立一个 HTML 文件
2、引入 Vue.js
`<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>`
* 1
残缺示例:
`<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 贝西说 </title>
<!--1. 引入 vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!--view 视图 -->
<div id="app">
<input type="text" v-model="message"/>
{{message}}
</div>
<script>
var vue=new Vue({
el:"#app",
/*model 数据 */
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
演示成果:(视图驱动数据,数据驱动视图)
二、根底语法
v-bind
v-bind 就是用于绑定数据和元素属性的
残缺示例:
`<body>
<div class="app">
<a v-bind:href="url"> 点我 </a>
</div>
<script>
var app = new Vue({
el:'.app',
data:{url:"https://www.baidu.com",}
});
</script>
</body>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
留神:
v-bind 前面是:属性名 =,我的了解是示意绑定这个属性,绑定之后,对应的值要去 vue 的数据外面找。
当咱们在控制台扭转 url 时,对应也会变动。
雷同的,咱们还能够绑定图片 src 属性、超链接的 class
`<body>
<div class="app">
<a v-bind:href="url"> 点我 </a>
<img v-bind:src="imgsrc" width="200px"/>
</div>
<script>
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
imgsrc:"https://cn.vuejs.org/images/logo.png"
}
});
</script>
</body>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
留神:
`<div class="app">
<a v-bind:href="url"> 点我 </a>
</div>`
* 1
* 2
* 3
通常咱们能够将 v -bind:简写成:
`<div class="app">
<a :href="url"> 点我 </a>
</div>`
* 1
* 2
* 3
v-if,v-else
v-if,v-else
残缺示例:
`<body>
<div id="app">
<div v-if="ok">YES</div>
<div v-else>NO</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{ok:true,}
});
</script>
</body>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
v-if,v-else-if,v-else
`<body>
<div id="app">
<div v-if="role=='beixi'|| role=='admin'"> 您好,admin</div>
<div v-else-if="role=='jzj'"> 贾志杰 </div>
<div v-else> 您无权拜访!</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{role:"admin",}
});
</script>
</body>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
v-for
1、v-for 循环一般数组
`<body>
<div id="app">
<p v-for="(item,index) in list">{{item}}---- 索引:{{index}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{list:[1,2,3,4,5],
}
});
</script>
</body>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
2、v-for 循环对象数组
`<body>
<div id="app">
<p v-for="(user,index) in list">{{user.id}}---{{user.name}}----- 索引:{{index}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
list:[{id:1,name:'beixi'},
{id:2,name:'jzj'},
{id:3,name:'贾志杰'}
],
}
});
</script>
</body>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
3、v-for 循环对象
`<body>
<div id="app">
<p v-for="(val,key,index) in user"> 值:{{val}}--- 键:{{key}}----- 索引:{{index}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
user:{
name:"beixi",
age:"18",
sex:"男"
}
}
});
</script>
</body>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
4、v-for 循环数字
`<body>
<div id="app">
<p v-for="count in 5"> 这是第 {{count}} 次循环 </p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{}});
</script>
</body>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
三、Vue 绑定事件
语法:
v-on: 事件名 =“办法名”
简写:@事件名 =“办法名”
事件名:click|keydown|keyup|mouseover|mouseout| 自定义事件名
v-on 事件监听,残缺示例:
`<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<title> 贝西说 </title>
<!--1. 引入 vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{count}}
<button v-on:click="count+=1"> 点我加 1 </button>
<button v-on:click="sub"> 点我减 1 </button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{count:1},
methods:{sub:function(){this.count-=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
留神:v-bind 能够简写为:v-on: 能够简写 @
四、Vue:表单双绑、组件
1. 什么是双向数据绑定
Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变动。这也算是 Vue.js 的精华之处了。
值得注意的是,咱们所说的数据双向绑定,肯定是对于 UI 控件来说的,非 UI 控件不会波及到数据双向绑定。单向数据绑定是应用状态管理工具的前提。如果咱们应用 vuex,那么数据流也是单项的,这时就会和双向数据绑定有抵触。
2. 在表单中应用双向数据绑定
你能够用 v-model 指令在表单、及 元素上创立双向数据绑定。它会依据控件类型主动选取正确的办法来更新元素。只管有些神奇,但 v-model 实质上不过是语法糖。它负责监听用户的输出事件以更新数据,并对一些极其场景进行一些非凡解决。
留神:v-model 会疏忽所有表单元素的 value、checked、selected 个性的初始值而总是将 Vue 实例的数据作为数据起源。你应该通过 JavaScript 在组件的 data 选项中申明初始值!
示例 1:
`<body>
<div id="app">
<input type="text" v-model="message"/>{{message}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{message:''}
});
</script>
</body>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
实现成果:
示例 2:
`<div id="app">
<input type="radio" name="sex" value="男" v-model="gender"/> 男
<input type="radio" name="sex" value="女" v-model="gender"/> 女
<p>{{gender}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{gender:''}
});
</script>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
示例 3:
`<body>
<div id="app">
<select v-model="selected">
<option value="">-- 请抉择 --</option>
<option value="北京"> 北京 </option>
<option value="上海"> 上海 </option>
<option value="广州"> 广州 </option>
</select>
<p>{{selected}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{selected:''}
});
</script>
</body>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
3. 什么是组件
组件是可复用的 Vue 实例,说白了就是一组能够重复使用的模板,跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着殊途同归之妙。
通常一个利用会以一棵嵌套的组件树的模式来组织:
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又蕴含了其它的像导航链接、博文之类的组件。
4. 简略定义一个组件
留神:在理论开发中,咱们并不会用以下形式开发组件,而是采纳 vue-cli 创立 .vue 模板文件的形式开发,以下办法只是为了让大家了解什么是组件。
`<div id="app">
<beixi></beixi>
</div>
<script>
// 注册组件
Vue.component("beixi",{template:'<li>hello</li>'});
var app = new Vue({el:"#app",});
</script>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
阐明:
- Vue.component():注册组件
- beixi:自定义组件的名字
- template:组件的模板
5. 应用 props 属性动静传递参数
`<body>
<div id="app">
<!-- 组件:应用 props 把值传递给组件 -->
<blog-post v-for="item in items" v-bind:value="item"></blog-post>
</div>
<script>
Vue.component("blog-post",{props:['value'],
template:'<li>{{value}}</li>'
});
var app = new Vue({
el:"#app",
data:{items:['beixi','jzj','贾志杰']
}
});
</script>
</body>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
* 18
阐明:
v-for=“item in items”:遍历 Vue 实例中定义的名为 items 的数组,并创立等同数量的组件
v-bind:value=“item”:将遍历的 item 项绑定到组件中 props 定义的名为 value 属性上;= 号右边的 value 为 props 定义的属性名,左边的为 item in items 中遍历的 item 项的值
五、Axios 异步通信
1. 什么是 Axios
Axios 是一个开源的能够用在浏览器端和 NodeJS 的异步通信框架,她的次要作用就是实现 AJAX 异步通信,其性能特点如下:
- 从浏览器中创立 XMLHttpRequests
- 从 node.js 创立 http 申请
- 反对 Promise API [JS 中链式编程]
- 拦挡申请和响应
- 转换申请数据和响应数据
- 勾销申请
- 主动转换 JSON 数据
- 客户端反对进攻 XSRF(跨站申请伪造)
GitHub:https://github.com/axios/axios
中文文档:http://www.axios-js.com/
2. 为什么要应用 Axios
因为 Vue.js 是一个 视图层框架 并且作者(尤雨溪)严格准守 SoC(关注度拆散准则),所以 Vue.js 并不蕴含 AJAX 的通信性能,为了解决通信问题,作者独自开发了一个名为 vue-resource 的插件,不过在进入 2.0 版本当前进行了对该插件的保护并举荐了 Axios 框架。少用 jQuery,因为它操作 Dom 太频繁!
3. 第一个 Axios 应用程序
咱们开发的接口大部分都是采纳 JSON 格局,能够先在我的项目里模仿一段 JSON 数据,数据内容如下:创立一个名为 data.json 的文件并填入下面的内容,放在我的项目的根目录下
`{
"name": "贝西说",
"url": "https://blog.csdn.net/beixishuo",
"page": 1,
"isNonProfit": true,
"address": {
"street": "太谷",
"city": "山西晋中",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://space.bilibili.com/474668932"
},
{
"name": "贝西说",
"url": "https://blog.csdn.net/beixishuo"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}`
* 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
残缺示例:
`<!-- 引入 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!-- 在线引入 axios。在我的项目开发中会装置 axios 组件(npm install axios)-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div>{{info.name}}</div>
<div>{{info.address}}</div>
<a v-bind:href="info.url"> 贝西说 </a>
</div>
<script>
var app=new Vue({
el:"#app",
//data: 属性
data:function(){// 须要解决 (返回) 后盾数据在页面上渲染时应用
return{
// 申请的返回参数格局必须和 json 字符串一样
info:{
name:null,// 相当于形参占位,理论参数 data.json 会赋予
url:null,
address:{
street:null,
city:null,
country:null
}
}
}
},
mounted:function(){//mounted 钩子函数,相当于 java 中 main 函数。能够调用 methods 中定义的函数
// axios.get('data.json').then(resp=>(console.log(resp.data)));
axios.get('data.json').then(resp=>(this.info=resp.data));
}
})
</script>
</body>`
* 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
阐明:
- 在这里应用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
- 应用 axios 框架的 get 办法申请 AJAX 并主动将数据封装进了 Vue 实例的数据对象中
- 咱们在 data 中的数据结构必须要和 Ajax 响应回来的数据格式匹配!
4.axios API
能够通过将相干配置传递给 axios 来进行申请。
axios(config)
`// 发送一个 POST 申请
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
axios(url[, config])
`// 发送一个 GET 申请 (GET 申请是默认申请模式)
axios('/user/12345');`
* 1
* 2
申请办法别名
为了不便起见,曾经为所有反对的申请办法提供了别名。
- axios.request(config)
- axios.get(url [,config])
- axios.delete(url [,config])
- axios.head(url [,config])
- axios.post(url [,data [,config]])
- axios.put(url [,data [,config]])
- axios.patch(url [,data [,config]])
留神
当应用别名办法时,不须要在 config 中指定 url,method 和 data 属性。
5.Vue 的生命周期
六、计算属性
1. 什么是计算属性
当一些数据须要依据其它数据变动时, 须要进行解决能力去展现, 尽管 vue 提供了绑定数据表达式绑定的形式, 然而设计它的初衷只是用于简略运算的。在模板中放入太多的逻辑会让模板过重且难以保护, 对于一些比较复杂和非凡的计算有可能就顾此失彼了, 而且计算的属性写在模板里也不利于我的项目保护
computed 次要的作用:
- 拆散逻辑(模板和数据拆散)
- 缓存值
- 双向绑定(getter,setter)
简略了解为:把计算的后果当作属性返回去
2. 残缺示例
`<!-- 引入 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num1"/><input type="text" v-model="num2"/>
<p> 求和后果{{result}}</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{num1:1,num2:2},
computed:{// 计算属性
result:function(){return parseInt(this.num1)+parseInt(this.num2);
}
}
})
</script>
</body>`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
* 18
* 19
* 20
3、methods 办法与 computed 计算属性区别
- 两者的执行后果是完全相同的
- 计算属性是基于他们的依赖进行缓存的,只有在相干依赖产生扭转时,他们才会从新求值,也就是说,只有他的依赖没有发生变化,那么每次拜访的时候计算属性都会立刻返回之前的计算结果,不再执行函数
- 每次触发从新渲染时,调用办法将总会再次执行函数
七、前端工程化 vue-cli
Vue 脚手架指的是 vue-cli,它是一个专门为单页面利用疾速搭建繁冗的脚手架,它能够轻松的创立新的应用程序而且可用于主动生成 vue 和 webpack 的我的项目模板。
利用 vue-cli 脚手架来构建 Vue 我的项目须要先装置 Node.js 和 NPM 环境。
1.Node.js 的装置
Node.js 的装置比较简单,大家须要在 node.js 官网(https://nodejs.org/en/downloa…,windows 的举荐下载 Windows Installer (.msi)。同时,大家会失去一个附送的 NPM 工具。
- 装置 Node.js,双击下载好的 node 文件,如图所示。
装置过程比较简单,始终“下一步”即可。 - 环境变量配置:装置实现后须要设置环境变量:即 Path 中增加装置目录(例如:D:javanodejs),如图所示。
- 点击开始 =》运行 =》输出 ”cmd” => 输出 node - v 如图所示,验证装置是否胜利。
2.npm 装置
因为 node.js 曾经集成了 npm,所以之前 npm 也一并装置好了。所以在 cmd 终端输出 npm -v 来测试是否装置胜利。命令如图 所示,呈现版本提醒示意装置胜利。
3 根本应用
步骤如下:
① 搭建第一个残缺的 Vue-cli 脚手架构建的我的项目。
② 装置实现,输出 Vue -V,如果呈现相应的版本号,则阐明装置胜利。如图 7 - 6 所示。
③ 咱们能够应用 vue-cli 来疾速生成一个基于 webpack 模板构建的我的项目,如图所示,我的项目名为 vue-project。
④ 配置实现后,能够看到目录下多出了一个我的项目文件夹,外面就是 vue-cli 创立的一个基于 webpack 的 vue.js 我的项目。
而后进入我的项目目录(如:cd vue-project),应用 npm install 装置依赖,如图所示。
依赖装置实现后,咱们来看一下我的项目的目录构造,如下所示:
`.
|-- build // 我的项目构建 (webpack) 相干代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 查看 node、npm 等版本
| |-- dev-client.js // 热重载相干
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相干
| |-- webpack.base.conf.js // webpack 根底配置
| |-- webpack.dev.conf.js // webpack 开发环境配置
| |-- webpack.prod.conf.js // webpack 生产环境配置
|-- config // 我的项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 我的项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- node_modules // 所须要依赖资源
|-- src // 源码目录
| |-- assets // 寄存资产文件
| |-- components // vue 公共组件
| |-- router // 寄存路由 js 文件,用于页面的跳转
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 动态文件,比方一些图片,json 数据等
| |-- data // 群聊剖析失去的数据用于数据可视化
|-- .babelrc // ES6 语法编译配置
|-- .editorconfig // 定义代码格局
|-- .gitignore // git 上传须要疏忽的文件格式
|-- README.md // 我的项目阐明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.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
* 31
* 32
对于开发者更多操作的是 src 目录:
`|-- src // 源码目录
| |-- assets // 寄存资产文件
| |-- components // vue 公共组件
| |-- router // 寄存路由 js 文件,用于页面的跳转
| |-- App.vue // 页面入口文件
| |-- main.js`
* 1
* 2
* 3
* 4
* 5
* 6
④ 输出 npm run dev 命令来启动我的项目,如图所示。
运行胜利后在浏览器输出:http://localhost:8080,拜访我的项目后果如图所示。