Vue最简洁最全的入门教程
大家好,又见面了,我是你们的朋友全栈君。
最近在学vue,主要从以下几个方面学习:
•环境安装
•模板语法(怎么写)
•指令
•选项、生命周期(写在哪儿)
•vuejs-devtools(怎么调试)
1.Vue.js 简介
Vue.js是一套构建用户界面的UI框架,它专注于MVVM模型的ViewModel层,通过双向数据绑定把View层和Model层链接起来。
2.Vue.js 特点
•模板双向绑定机制
•利用指令(directive)对DOM进行封装
•组件化设计思想等
3.Vue.js 安装
•NPM
•命令行工具 (CLI)
安装node环境
npm install -g @vue/cli
vue create hello-world
npm install
npm run serve
4.模板语法
5.指令
•v-text=={ {message}}
•v-html <div v-html=”message2″></div>
•v-show:<h1 v-show=”ok”>Hello!</h1>
•v-if:<div v-if=”type === ‘A'”>
•v-else:<div v-else>
•v-else-if:<div v-else-if=”type === ‘B'”>
•v-for:<div v-for=”(item, index) in items”></div>
•v-on==@:<button v-on:click=”doThat(‘hello’, $event)”></button>
•v-bind==:<img v-bind:src=”imageSrc“> 缩写<img :src=”imageSrc“>
•v-model:<input v-model=”message” placeholder=”edit me”><p>Message is: { { message }}</p>
6.Vue事件
•V-on:监听事件
•自定义事件
组件内抛出:this.$emit(‘myEvent‘)
外部监听:<my-component v-on:myEvent=”doSomething“></my-component>
•将原生事件绑定到组件
<base-input v-on:focus.native=”onFocus“></base-input>
7.特殊特性
•Key:有相同父元素的子元素必须有独特的 key,主要用在v-for
•Ref:<input ref=”input”>被用来给元素或子组件注册引用信息
•Slot:用于标记往哪个具名插槽中插入子组件内容
8.选项 / 数据
•Data: Vue 实例的数据对象
•Props: props 可以是数组或对象,用于接收来自父组件的数据
•Computed:计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算
•Watch:一个对象,键是需要观察的表达式,值是对应回调函数
•Methods:放置普通函数的地方
9.生命周期
beforeCreate:此时data、method和$el均没有初始化 created:此时data和method初始化完成,但是DOM节点并没有挂载
beforeMount:编译模板,并且将此时在el上挂载一个虚拟的DOM节点
mounted:编译模板,且将真实的DOM节点挂载在el上,可做数据请求
beforeUpdate:在数据有更新时,进入此钩子函数,虚拟DOM被重新创建
updated:数据更新完成时,进入此钩子函数
beforeDestory:组件销毁前调用,移除watchers、子组件和事件等 destoryed:组件销毁后调用
10.混入
11.组件
12.调试
13.一些学习网站和参考资料
•https://wiki.imooc.com/vue/vuejsintroduce.html
•https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/135947.html原文链接:https://javaforall.cn
相关文章
- Vue之Router(一)
- 如何查看Vue项目vue的版本号
- vue子组件向父组件传值的方法
- vue ajax 修改初始化赋值
- vue项目性能优化-前端加分项
- vue弹窗组件封装_vue弹出框组件
- vue中map用法_vue里面的meta用法
- 美团前端vue面试题(边面边更)
- 抱歉,久等了,基于Antd-Vue的VueAdminWorkA框架正式和大家开源见面了
- vue分页功能
- vue中的懒加载和按需加载_vue 路由懒加载
- vue基础语法
- 前端vue面试题集锦1
- Vue双向绑定原理解析,理解发布订阅难点问题!
- Vue项目优化首页加载速度
- ruoyi-vue版本(三)AsyncManager 实现异步线程池的逻辑操作
- vue.js客服系统实时聊天项目开发(十五)实现聊天界面滚动到底部
- 开源基于SpringBoot+Ant Design Vue开发的物流仓储系统
- Vue框架下的Redis调用实战(vue调用redis)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue用Redis储存获取数据(vue获取redis)
- Vue实时监测Redis变化(vue监控redis变化)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- Vue如何连接Redis(vue怎么连接Redis)