vue学习
文章目录
一、vue是什么?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的
渐进式框架
。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层
,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。
二、学习vue需要掌握的三大要素
- HTML (结构) :超文本标记语言(Hyper Text Markup Language) ,决定网页的结构和内容
- CSS (表现):层叠样式表(Cascading Style sheets) ,设定网页的表现样式
- JavaScript (行为):是一种弱类型脚本语言,其源代码不需经过编译,而是由浏览器解释运行,用于控制网页的行为
三、vue的使用
1.vue的引入
1.找到一个稳定的cdn网站。
2.使用<script>标签引入vue.js文件
<script src=“https://cdn.bootcdn.net/ajax/libs/vue/2.6.4/vue.min.js”></script>
<script src=“https://cdn.bootcdn.net/ajax/libs/vue/2.6.4/vue.js”></script>
2.基础语法
1.声明式渲染数据——渲染到DOM内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>(快速入门)声明式渲染数据——渲染到DOM内</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!--导入vue.js-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello vue!"
}
})
</script>
</body>
</html>
2.条件(v-if,v-else-if,v-else)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if,v-else-if,v-else学习</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
</div>
</body>
<!--导入js-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
type: "A"
}
})
</script>
</html>
3.循环(v-for)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for学习</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<li v-for="item in items">
姓名:{{item.name}},年龄:{{item.age}}
</li>
</div>
</body>
<!--导入js-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{name: "zhangsan", age: 23},
{name: "lisi", age: 24},
{name: "wangwu", age: 25}
]
}
})
</script>
</html>
4.事件绑定(v-on===@)
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件处理 v-on示例</title>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('abc')">点击改变</button>
</div>
<!-- 导入vue.js-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello vue!"
},
methods:{
fun1:function (msg) {
this.message = msg;
}
}
})
</script>
</body>
</html>
5.属性绑定(v-bind===:)
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>属性绑定,v-bind学习</title>
</head>
<body>
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
<!-- 导入vue.js-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
6.双向绑定(v-model)
你可以用v-model
指令在表单 <input>
、<\textarea>
及<\select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
注意:v-model会忽略所有元素的value、checked、selected
特性的初始值而总是将Vue实例的数据(即vue实例里面的data内的数据)作为数据来源,你应该通过JavaScript在组件的data选项中声明。
7.vue组件
组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V-model</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
</head>
<body>
<div id="app">
<lushijie v-for="item in message" v-bind:abc="item"></lushijie>
</div>
<script>
//组件
Vue.component("lushijie",{
props:['abc'], //用于接收v-bind的值,abc类似于绑定数据的别名
template:'<li>{{abc}}</li>'
});
new Vue({
el:"#app",
data:{
message:["A","B","C"]
}
});
</script>
</body>
</html>
组件应用模板
<div id="app">
<app-nav></app-nav> <!-- 导航栏 -->
<app-view> <!-- 视图 -->
<app-sidebar></app-sidebar> <!-- 边注栏 -->
<app-content></app-content> <!-- 内容 -->
</app-view>
</div>
8.插槽(slot)
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>slot插槽</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:name="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
</todo>
</div>
<script type="text/javascript">
//slot 插槽 这个组件要定义在前面不然出不来数据
Vue.component("todo", {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
<div>'
});
Vue.component("todo-title", {
//属性
props: ['name'],
template: '<div>{{name}}</div>'
});
Vue.component("todo-items", {
props: ['item'],
template: '<li>{{item}}</li>'
});
var vm = new Vue({
el: "#app",
data: {
//标题
title: "图书馆系列图书",
//列表
todoItems: ['三国演义', '红楼梦', '西游记', '水浒传']
}
});
</script>
</body>
</html>
9.异步通信axios
Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架,她的主要作用就是实现AJAX异步通信,其功能特点如下:
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API [JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF (跨站请求伪造)
- 减少对DOM的操作(优于JQuery的ajax)
模拟json数据:
{
"name": "lsj",
"age": "21",
"sex": "男",
"url":"https://www.baidu.com",
"address": {
"street": "xxx",
"city": "福州",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://www.bilibili.com"
},
{
"name": "baidu",
"url": "https://www.baidu.com"
},
]
}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>axios异步通信</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<style>
/*提高用户体验,避免用户网络不好的时候加载看到{{xxx}}的情况*/
[v-clock]{
/*设置白屏*/
display:none;
}
</style>
</head>
<body>
<div id="app" v-clock>
<div>{{abc.name}}</div>
<div>{{abc.address}}</div> <!--输出的是json数据-->
<div>{{abc.address.city}}</div>
<a v-bind:href="abc.links[0].url">点击我</a>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
//data vue的属性
data:{
//请求的返回参数合适,必须和json字符串一样,如果需要显示的就必须写上,不需要显示的可以不用写
// abc为自定义的数据的名(只要和(this.abc=response.data)中的this.xxx一致即可)
abc:{
name:null,
address:{
city:null
},
links:[
{
url: null
},
{
name: null,
url:null
}
]
}
},
//data() 方法
// data(){
// return{
// info:{
// name:null,
// address:{
// city:null
// },
// links:[
// {
// url: null
// },
// {
// name: null,
// url:null
// }
// ]
// }
// }
// },
mounted(){ //钩子函数 链式编程 (=>)是ES6新特性
axios.get('../data.json').then(response=>(this.abc=response.data));
}
});
</script>
</body>
</html>
10.自定义事件内容分发
通过以上代码不难发现,数据项在Vue的实例中,但删除操作要在组件中完成,那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了,Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;
使用this.$emit (‘自定义事件名’,参数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<a href="www.baidu.com">a标签</a>
<!--vue的视图层 在vue的视图层中只能使用自定义组件,不能使用传统的标签-->
<todo>
<a href="www.baidu.com">a标签</a> <!--无效,不报错-->
<todo-title slot="todo-title" v-bind:name="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item"
v-bind:index="index" v-on:remove1="removeItems(index)"></todo-items>
</todo>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//slot 插槽 这个组件要定义在前面不然出不来数据
Vue.component("todo", {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
<div>'
});
Vue.component("todo-title", {
//属性
props: ['name'],
template: '<div>{{name}}</div>'
});
Vue.component("todo-items", {
props: ['item','index'],
template: '<li>{{index}}---{{item}} <button @click="remove">删除</button></li>',
methods: {
remove: function (index) {
// this.$emit 自定义事件分发
this.$emit('remove1',index)
}
}
});
let vm = new Vue({
el: "#app",
data: {
//标题
title: "图书馆系列图书",
//列表
todoItems: ['三国演义', '红楼梦', '西游记', '水浒传']
},
methods: {
removeItems: function (index) {
console.log("删除了"+this.todoItems[index]+"OK");
//splice方法----------->从index位置移出1一个元素
this.todoItems.splice(index,1);
}
}
});
</script>
</body>
</html>
四、vue-cli
1. 什么是vue-cli
vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;
预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;
主要功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
需要的环境
-
Node.js : http://nodejs.cn/download/
安装就无脑下一步就好,安装在自己的环境目录下 -
Git : https://git-scm.com/downloads
镜像:https://npm.taobao.org/mirrors/git-for-windows/
确认nodejs安装成功:
- cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
- cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!
- 这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多!
npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm可以安装、共享、分发代码,管理项目依赖关系。
安装 Node.js 淘宝镜像加速器(cnpm)
这样子的话,下载会快很多~
-g 就是全局安装
npm install cnpm -g
若安装失败,则将源npm源换成淘宝镜像
因为npm安装插件是从国外服务器下载,受网络影响大
npm config set registry https://registry.npm.taobao.org
然后再执行
npm install cnpm -g
默认安装的位置:C:\Users\Administrator\AppData\Roaming\npm
可以修改安装位置:
1.配置npm下载依赖的位置
npm config set cache “D:\nodereps\npm-cache”
npm config set prefix “D:\nodereps\npm_global”
3. 安装vue-cli
#在命令台输入
cnpm install vue-cli -g
#查看是否安装成功
vue list
4. 第一个 vue-cli 应用程序
创建一个Vue项目,我们随便建立一个空的文件夹在电脑上。
创建一个基于 webpack 模板的 vue 应用程序
#这里可以根据自己的需求起名
vue init webpack 项目名
一路都选择no即可;(如果你是vue的老用户,则可以根据需求来选择。建议选择no是为了能够让初学者了解创建步骤。)
初始化并运行
cd myvue
npm install
npm run dev
执行完成后,项目下多了一个node_modules目录,且目录下多了很多依赖。如下图: