vue2.0教程,vue2.5
本文主要介绍Vue 2.0的基础，包括基本语法、生命周期、路由管理Vue-Router、状态管理Vuex和Http请求库Axios。如果你想了解更多，请和当前编辑一起学习下面这篇文章。
目录
1、特性2、示例3、选项4、基本语法5、生命周期6、路由管理Vue-Router6.1路由配置6.2路由跳转6.3路由守卫7、状态管理器Vuex7.1配置8、五个核心属性9、Http请求库Axios
1、特点
是一个MVVM框架
源自MVC架构，MVVM分为视图(视图层)、视图模型(数据视图层)和模型(数据层)。MVVM最标志性的特点是数据绑定，实现了数据驱动的视图和视图同步。
数据也是单向的，称之为单向数据流
数据总是从父组件传递到子组件，子组件无权(不推荐)直接修改父组件中的数据。
不兼容ie8及其以下浏览器
响应式原则公式利用了es5的Object.defineProperty属性，但是这个API不支持IE8。
2、实例
//Vue单页实例
模板
标签.
/模板
脚本
导出默认值{
data () {}，
方法：{}，
已计算：{}，
观察：{}
}
/脚本
风格
模式.
/风格
3、选项 Options
data
函数来定义页面的数据。
data() {
返回{
计数：2
份数：1
}
}
//使用
this.count //2
computed
对象，计算属性，用于简化复杂的逻辑处理。
//计算属性不接受参数，所以会缓存依赖数据。需要返回。
计算值：{
doubleCount: function () {
返回这个。count *=2
},
}
//使用
this.doubleCount //4
methods
定义页面功能的对象。
方法：{
堵塞(消息){
console.log(消息)
}
}
//使用
This.cLog(调用的函数)//控制台输出：调用的函数
watch
对象，属性监控，用于监控一些数据的变化，并做出相应的动作。
观察：{
count(值，[旧值]) {
//value:更改后的值。
this.copyCount=值1
}
}
//当计数改变时自动触发
this.count=2
this.copyCount //3
components
对象，将组件注册到页面。
从“xxxx”导入上传内容
组件：{ UploadImg }
//模板
上传-img
4、基本语法
常用指令
V-html:呈现html
V-if:判断语法，控制显示/隐藏，控制是否渲染DOM。
V-show:控制显示/隐藏，类似于v-if，但是v-show由display属性控制。
V-model:双向数据绑定，通常用于表单，具有默认的绑定值属性。
虚拟绑定：
缩写：类别
用于动态属性绑定
v-on:
缩写@click
用于事件绑定。
遍历语法，支持数组、对象和字符串。
5、生命周期
创建之前：创建一个Vue对象。
Created:数据被初始化，这时您可以对实例进行一些预操作。
安装前：El和数据初始化
挂载：挂载el和数据，然后就可以调用http请求了。
BeforeUpdated:在更新DOM之前，此时可以进一步更改状态，而不会触发重新渲染过程。
Updated:将修改后的虚拟DOM更新到页面。此时应避免change操作，避免无限循环更新。
销毁前：销毁页面销毁前，此时可以做一些重置操作，比如清除定时器和dom事件。
销毁：页面被销毁。此时Vue实例已经被删除，所有操作无效。
6、路由管理Vue-Router
官方路线经理。它与Vue.js的核心深度集成，可以轻松构建单页面应用。
6.1 路由配置
//NPM下载
npm安装vue路由器
//router.js
从“vue”导入Vue
从“vue路由器”导入vue路由器
Vue.use(VueRouter)
//定义页面路由(路径，组件)
导出默认新路由器({
{path:/foo ，component:()=import(/pages/foo )}，//路由组件懒加载。
{路径：“/bar”，组件：“/pages/bar”}
})
//main.js
从导入路由器。/router.js
新Vue({
埃尔： #app ，
路由器，//装载到Vue实例的路由
render: h=h(App)
})
//page.vue
！-区分两者之间的关系很重要-
这个。$router //使用内置的推送和替换路由方法访问路由器。
这个10.99美元路线//访问当前路由，内置路径、查询等路由属性
//app.vue
！-路由匹配到的组件将渲染在这里-
路由器视图/路由器视图
6.2 路由跳转
申明式路由
router-link :to= .
router-link :to= . 替换
编程式路由
这个. router.push({ path: register ，query: { plan: private }})
这个. router.replace(.) //与推区别在不插入历史记录
这个. router.go( [Number] n ) //在历史记录中向前或者后退多少步
//路由传参携带中文时建议先使用encodeURLComponent转码，以免显示乱码。
6.3 路由守卫
全局守卫
对配置的所有路由均生效，但优先级低与内部路由。
全局前置守卫（常用）
//用户未能验证身份时重定向到/登录
router.beforeEach(收件人，发件人，下一个)={
//到即将要进入的路由对象，来自来源路由，下一个钩子函数，是否放行
if (to.name！==登录！isAuthenticated)下一步({ name:登录 })
else next()
})
全局解析守卫（了解）
router.beforeResolve(收件人，发件人，下一个)={
//.
})
全局后置钩子（了解）
router.afterEach(收件人，发件人)={
//该路由守卫不接受然后钩子函数
//.
})
路由独享守卫（了解）
该守卫仅对配置的路由生效，这些守卫与全局前置守卫的方法参数是一样的。
const router=new VueRouter({
路线：[
{
路径："/foo "，
组件：Foo，
输入前：(收件人，发件人，下一个)={
//.
}
}
]
})
组件内部守卫（了解）
可以在路由组件内直接定义以下路由导航守卫，仅对当前组件生效。
在路由中心之前
beforeRouteUpdate (2.2新增)
beforeRouteLeave
组件内的守卫某视频剪辑软件路由器官方文档
7、状态管理器Vuex
7.1 配置
//store.js
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
Vue.use(Vuex)
.
导出默认的新Vuex .商店({
状态，
吸气剂，
突变，
行动，
模块
})
//main.js
从导入存储。/商店
Vue.prototype.$store=store
8、五大核心属性
state
数据源，不要直接修改状态状态
//store.js
常量状态={
名称：“zzz”
}
！- page.vue -
//1.直接调用
这个store . state . name// zzz
//2.辅助函数映射
计算值：{
.mapState([name])
}
this.name //zzz
mutations
改变状态状态的唯一途径
常量突变={
updateName(state，newName) {
state.name=newName
}
}
！- page.vue -
//1.直接调用
这个. store.commit(updateName， zzh) //state.name: zzh
//2.辅助函数映射
方法：{
.地图突变([updateName])
}
这个。updatename( zzh )//状态。名称：“zzh”
actions
存放异步操作，异步触发变化改变状态
常量操作={
异步更新名称(上下文){
//异步操作，例如发起超文本传送协议(超文本传输协议的缩写)请求去获取更新后的姓名，假设name=xxx
.
context.commit(updateName ，res.name) //state.name: xxx
}
}
！- page.vue -
//1.直接调用
这个100美元商店。调度(异步更新名称)
//2.辅助函数映射
方法：{
.mapActions([asyncUpdateName])
}
this.asyncUpdateName()
getters
数据源处理，类似计算属性
const getter={
格式名称（州){
返回州名 2021
}
}
！- page.vue -
//1.直接调用
这个100美元商店。吸气剂。格式名()// xxx2021
//2.辅助函数映射
计算值：{
.mapGetters([formatName])
}
this.formatName() ////xxx2021
modules
模块化，让每个模块单独管理一套自己的状态、突变、动作和吸气剂。
//模块内部
这个10.99 $ store . state . name//内部访问无须使用命名空间
//模块外部
这个. store.state.login.name //login是模块命名空间
.
其他属性类似
模块Vuex官方文档
9、Http请求库Axios
基于承诺封装的超文本传送协议(超文本传输协议的缩写)请求库，官方推荐
！- api.js -
从" axios "导入爱可信
//创建并配置实例
axios.create({
baseURL: http://www.baidu.com ，//请求基准地址
超时：1000 //请求超时时间
.
})
//请求拦截器
axios。截击机。请求。使用(请求={
请求。头[内容类型]=应用程序/JSON
.
})
//响应拦截器
axios。截击机。回应。使用(response={
.
返回响应数据
})
//配置请求
导出默认值{
getId: ()=axios.get(/getId )，
getname byId:id=axios。帖子(/getname byid ，id)
}
！- main.js -
从导入api ./api.js
Vue.prototype.$api=api
！- page.vue -
这个api.getId().然后(res={
.
}).catch()
到此这篇关于Vue 2.0基础详细的文章就介绍到这了，更多相关Vue 2.0基础内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。