Vue的学习，我放一张截图上来，其实按照这位大佬说的去学就差不多了。
Vue的基本指令
v-bind 缩写:
v-on 缩写@
v-if
v-else
v-show
v-for
v-model
Vue组件模板:
Vue.component(
'组件名字',{
data () {
return {
数据
}
},
template:'组件(比如<button></button>)'
}
)
Vue深入
组件注册
局部注册模板:
import ComponentA from './ComponentA'
export default {
component: {
ComponentA
}
}
全局注册
必须在main.js进行组件注册才是全局注册
模板与局部注册差不多
不过官方文档推荐是用webpack的require.context来全局注册
一般项目都是使用脚手架搭建的环境，一般不需要用这种方法来全局注册
prop
这个属性石用来传值的
父传子
1.在子组件比如子组件名字叫Child.vue中加入props
例:
export default {
props: ['message']
}
2.在根组件例如叫App.vue中注册子组件Child.vue
例:
import Child from './components/Child'
export default {
name: '#app',
data () {
return {
message: '数据'
}
}
components: {
child
}
}
然后就可以在子组件中使用message中存放的数据了
子传父
1.在子组件中使用事件来传值，所以需要一个按钮
html
<button @click="sendMessage" />
script
export default {
props:['message'],
methods: {
sendMessage () {
this.$emit('listenEvent',想要传递的数据)
}
}
}
2.父组件中监听
html
<child :message='message' @listenEvent='showMessage'></child>
script
import Child from './components/Child'
export default {
name: '#app',
data () {
return {
message:'hello,world'
}
},
methods: {
showMessage () {
console.log(data)
}
}
}
3.之后在子组件点击按钮，父组件的child标签就会显示传递的内容
自定义事件
this.$emit('myEvent')
插槽
<navigation-link url="/profile">
Your Profile
</navigation-link>
这个navigation-link的内容会变成插槽的内容
然后你想在哪个标签中插入这部分内容就在其中添加<slot></slot>就会显示内容
动态组件
用<keep-alive></keep-alive>来包裹你想要保持活跃的组件，
之后在做事件切换的时候这个组件就会一直是活跃状态，
不会反复重新加载，既浪费资源，又影响用户体验
过渡动画
这一章其实需要记住一些Vue过渡动画的附加class就差不多了
不如这个例子
HTML
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
SCRIPT
new Vue({
el: '#demo',
data: {
show: true
}
})
STYLE
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
以上这些代码就可以创建一个按钮来控制下面文字的淡入淡出动画
其实就是利用了fade-enter-active和fade-enter的class来控制
官方文档中指出了，在进入/离开的过渡中，会有 6 个 class 切换。
1.v-enter:定义进入过渡的开始状态。
2.v-enter-active:定义进入过渡生效时的状态。
3.v-enter-to:定义进入过渡的结束状态。
4.v-leave:定义离开过渡的开始状态。
5.v-leave-active:定义离开过渡生效时的状态。
6.v-leave-to:定义离开过渡的结束状态。
不过一般常用的周期是enter,enter-active,leave-active,leave-to这四个周期
这个流程是不是想到了Vue的生命周期呢
beforeCreate-created-beforeMount-mounted-beforeDestroy-destroyed
过渡，动画都如上
指令
例子来说明，比如在页面加载完后让某个元素聚焦
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
el就是某个输入框的id
1.添加全局方法或者属性，如: vue-custom-element
2.添加全局资源：指令/过滤器/过渡等，如 vue-touch
3.通过全局 mixin 方法添加一些组件选项，如: vue-router
4.添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5.一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router
Vue使用插件的方法:
拿vue-router这个库来做例子
import Vue from 'Vue'
import Router from 'vue-router'
Vue.use(Router)
过滤器
符号 |
其实不常用到，用到时候可以去看官方文档
Vue的学习也分两个阶段，第一阶段，学习基本的组件用法，第二阶段，就是熟练vue-cli3.X脚手架的适用，一般项目肯定是脚手架项目来创建的，你要知道脚手架里每个文件的用途，我是直接学的vue-cli3.0以上的版本，所以创建的项目结构和某些指令和2.X版本的不同了，但是不影响，推荐还是学习3.0以上的版本，因为现在3.0以上版本不是beta版本了，已经是正式版了，而且结构精简了不少。
网友评论