vue基础
在html文件中导入vue,学习基础的时候可以通过在线导入,如果对版本没有要求的可以任意选择一个导入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
vue2
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
vue3
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
基本语法
格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="message">正确</h1>
<h1 v-else>错误</h1>
</div>
</body>
<script>
var vm = new Vue({
<!-- el为绑定的组件-->
el:"#app",
<!-- 存储数据-->
data:{
message : false
},
<!-- 方法-->
methods: {
one: function() {
alert(this.message)
}
}
})
</script>
</html>
数据显示
<!-- 页面-->
<h1>{{message}}</h1>
<!-- 数据-->
data:{
message : "hello"
}
在页面中以h1格式显示hello
if-else
<!-- 页面-->
<h1 v-if="message">正确</h1>
<h1 v-else>错误</h1>
<!-- 数据-->
data:{
message : false
}
如果message为true则显示正确,如果为false则显示错误
v-for
输出方式有两种,一种是数组,一种是对象都可以进行遍历
数组方式
<!-- 页面-->
<li v-for="item in message">
{{item}}
</li>
<!-- 数据-->
data: {
message: ["one","tow","three"],
}
对象方式1
<!-- 页面-->
<li v-for="item in message">
{{item.title}}
</li>
<!-- 数据-->
message: [{title: "北京"},{title: "上海"},{title: "广州"}]
对象方式2,参数位置为 值,键,下标
<!-- 页面-->
<li v-for="(value, key, index) in message">
{{key}}----
{{value}}----
{{index}}
</li>
<!-- 数据-->
message: {
"a": "shanghai",
"b": "guangzhou",
"c": "shenzhen"
}
v-on可以通过绑定的方式实现方法调用,注意此处为methods不是method
<!-- 页面-->
<button v-on:click="one">点击</button>
<!-- 函数-->
methods: {
one: function () {
alert(this.message)
}
}
v-model
<input type="text" v-model="message"></input>
<h1>{{message}}</h1>
</div>
如果使用v-model会忽略所有的value,checked,selected初始值,以vue实例的数据作为数据来源,也就是说如果在单选框或者复选框添加了默认选中某个选项,如果此时绑定了model则默认选中会失效
如下情况默认选中会失效
<select v-model="message">
<option >a</option>
<option selected>b</option>
<option>c</option>
</select>
<input type="radio" name="sex" value="男" checked v-model="message">
<input type="radio" name="sex" value="女" v-model="message">
v-bind
v-bind也是进行绑定,不过与v-model的不同就是v-bind只能从将数据从model流向view,无法从view流向model,也就是说v-model是双向绑定,v-bind是单向绑定
自定义component组件
<!-- 页面-->
<div id="app">
<ww v-for="item in message1" v-bind:wwd="item"></ww>
<oo v-bind:ood="message"></oo>
</div>
// 数据
data: {
message : "hello",
message1 : ["java","windows","linux"]
}
网络通信axios
首先需要导入axios库,有两个库,其中一个版本为迷你版本,导入其中一个就可以了
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
创建钩子函数,主要用来异步请求数据的,以及页面展示
<!-- 页面-->
<h1>{{info.name}}</h1>
<a v-bind:herf="info.url">点击超链接</a>
<!-- 数据-->
data() {
return {
info: {
name: null,
address: null,
url: null,
doc: {
sex: null,
age: null
}
}
}
},
mounted(){
axios.get("data.json").then(response=>(
this.info = response.data
))
}
此处需要注意axios.get中需要存放链接,我们创建了一个data()函数,函数内的格式必须与请求后返回格式一致,与data属性的区别除了格式不同之外,主要是作用域不同,可以避免数据的污染
创建数据源(仅测试使用,实际工作中是通过链接请求实现数据获取的)
{
"name": "admin",
"address": "beijing",
"url": "www.baidu.com",
"doc": {
"sex": "男",
"age": 22
}
}
此处我们是创建了一个json文本用来测试,json文本中的数据格式如下,名称为data.json,与页面同级目录,如果目录不同级,则需要加入相对路径
计算属性
可以通过计算得到属性,结果会返回在内存中,不会重复的进行计算,只有在刷新页面的时候进行计算,如果方法比较多的情况下可以很大的节省计算开销,提高效率,创建computed,调用的时候通过属性方式调用,而方法则需要通过方法的方式来进行调用
<!-- 页面-->
<h1>date: {{date()}}</h1>
<h1>date: {{date1}}</h1>
<!-- 数据-->
computed:{
date1:function() {
return Date.now();
}
},
methods:{
date:function() {
return Date.now();
}
},
![](https://i-blog.csdnimg.cn/blog_migrate/ccee36444994f5e43357b2bb65f491a9.png)
插槽slot
插槽起到占位符的,如果我们将一个组件放到页面,如果需要展示某些内容,有可能没有作用,此时插槽就可以帮我们解决
例如
<!-- 页面-->
<oo>你好</oo>
<!-- 组件-->
Vue.component("oo",{
template: "<h3>hello</h3>"
})
此时的结果是只会显示hell,而你好则不会显示,如果使用插槽则会都显示出来
<!--页面-->
<oo>
<ww slot="kkk" v-bind:wws="title"></ww>
</oo>
<!--数据-->
Vue.component("oo",{
props:[''],
template: "<div>\
<slot name='kkk'></slot>\
<h3>hello</h3>\
<slot name='oos'></slot>\
</div>"
})
Vue.component("ww",{
props:['wws'],
template: "<li>{{wws}}</li>"
})
var vm = new Vue({
el: "#app",
// 数据
data:{
title:"员工",
name:["张三","李四","王五"]
}
})
此处不太好理解,简化说下渲染流程
<oo>
<h1 slot="kkk">大海</h1>
</oo>
将页面改为如上,则会显示大海 hello,在oo中添加了标签h1,标签的slot属性绑定了oo的哪个插槽,则会在oo中的哪个插槽位置插入此标签,并显示出来,这样理解就比较容易了,当我们在oo中插入ww组件,使用此组件slot属性绑定oo的哪个插槽,则会在oo的哪个位置显示此组件的内容,剩下的就是使用v-bind将数据绑定到ww标签,这样就可以全部显示出来了
自定义内容事件分发
这里很好理解,只是比较绕,我们的目的是在组件内操作vue实例内的数据
要将自定义组件内的事件绑定自定义组件内的方法
Vue.component("ww",{
props: ['wws'],
template: "<li>{{wws}}<button v-on:click='remove()'>删除</button></li>",
methods: {
remove: function(index) {
this.$emit("remove",index)
}
}
})
将自定义组件的方法绑定实例内的方法
<!-- 页面-->
<div id="app">
<ww v-for="(item, index) in name" v-bind:wws="item" v-on:remove="remove1(index)"></ww>
</div>
实例内的方法
var vm = new Vue({
el: "#app",
data: {
name: ["张三","李四","王五",]
},
methods : {
remove1: function(index) {
this.name.splice(index,1)
}
}
})
如果组件内又多个事件,只需要将绑定添加到2步骤中即可
<!-- 页面-->
<div id="app">
<ww v-for="(item, index) in name" v-bind:wws="item" v-on:add="add1(index)" v-on:remove="remove1(index)"></ww>
</div>
vue项目的创建
node.js环境,从官网中下载
https://nodejs.org/zh-cn/
环境检测,检查node版本和npm版本,都没有问题了可以创建vue项目了
node -v
npm -v
配置国内资源库
#通过此命令查看资源库地址,如果是国外的,在下载的时候灰非常慢,也可以通过设置国内的资源库地址
npm get registry
#通过此命令设置国内的资源库地址
npm config set registry http://registry.npm.taobao.org/
安装vue-cli脚手架
npm install -g vue-cli
#查看vue版本,确认vue安装成功
vue -V
完成以后创建vue项目文件夹,在此文件夹下打开cmd,创建名为vuedemo的项目
vue init webpack vuedemo
创建完成以后会有两个命令提示,按照命令提示启动项目,有些版本使用的是npm run server,如果不确定的情况下可以去项目的package.json文件中查找scripts下查看启动命令
cd de
npm run dev