我们无论是学习什么知识,都是基础先行,接下来让我们去了解学习Vue应该掌握的基础知识
学习之前我们应该先了解一下Vue实例,以及其中的内置对象(属性)
el:绑定具体的标签id
data:用来存放数据,view层从中获取数据
methods:存放方法,可提供view层直接调用
computed:存放计算属性,同样是存放方法,知识于methods不同的是调用的时候不加(),需要注意的是computed与methods当中的方法名不可以重名,重名之后method的优先级高默认走method中的方法,不会走计算属性
<script type="text/javascript">
var vm =new Vue({
el:"#vue",
data:{
message:"Hello Vue"
},
methods:{
currentTime1:function () {
return Date.now();//返回一个当前的时间戳
}
},
computed:{//需要注意的是computed与methods当中的方法名不可以重名,重名之后method的优先级高默认走method中的方法,不会走计算属性
//Compute中的方法称作属性,以属性的方式调用不加()
currentTime2:function () {
return Date.now();//返回一个当前的时间戳
}
}
});
</script>
1.基础语法
前提都是vue实例对象绑定view层视图
1.1.View层从实例中取值
1.v-bind 适用于标签当中属性值无法直插需要其绑定托管给vue
2.{{}} 适用于直插,一般用标签当中
3.: 跟v-bind:一样只不过是其的简写罢了
1.2.判断语句:v-if
条件语句就比较简单了,就是简单了,看下例子:
1.3.循环语句:v-for
循环语句跟我们之前java学的语法差不多
而且它可以以直接遍历出每个元素以及元素的下下标
1.4.事件绑定:v-on
事件的绑定以及事件的自定义都是在此定义的
1.5.双向绑定:v-model
对于事件的双向绑定,你觉得很难?看个例子其实就是监听你的输入,实时更新到Vue实例中data当中,然后取出即可,以实现实时更新
以上就是取值、条件语句、循环语句、事件绑定(方法的获取)、双向绑定的基本用法!
学了基本语法让我们来更进一步吧,去学习组件!
2.组件Component
view层,组件,实例三者的关系我们要清楚
然后就是关于组件其实就是相当于是在Vue对象中去存储数据,自定义组件通过遍历拿到Vue对象的数据,
但是自定义组件的数据是由模板决定的,所以我们还需要将拿到值的自定义组件绑定模板,
模板去接收真实数据.
到此我们应该对自定义的组件有一定的认识了!
然而在实际开发当中我们data中的数据,肯定不会是本地的呀,接下来我们要去获取远程数据!
3.异步通信Axios
至此,我们要学习如何获取远程的数据!方式就是axios一个异步通信的框架,类似于我们的之前学习的ajax,发送异步请求数据回来,保存在自己的return data当中,然后view去解析出来即可!
在使用之前我么应该先引入axios和vue,可以通过cdn或者npm看具体情况!
说白就是就是通过异步的方式拿到data.json的数据返回给当前Vue对象,然后标签去拿到这些数据展示给用户!
4.插槽Slot
描述组件的时候我们已经将view层,组件,vue实例三者的关系描述的很清楚了,接下来我们就是进阶插槽slot,说白了就是组件套组件(嵌套组件),然后还是三者之间关系,我们在02篇中也讲述了擦插槽这里便不再赘述!
但是值得一提的是下面这种情况,我们怎么实现组件调用实例当中的方法!
对于小白来说看完程序也许会有点懵懵的!我们在这里说一下思路:我们是在实例中编写了一个方法,然后我们在视图层通过v-on(@)去绑定一个自定义事件remove,因为当前自定义事件是在视图层当中,所以可以获取到实例当中方法,因此达到remove事件触发那么方法执行,那么接下来我们只需要在组件中触发事件即可引入一个$emit(’事件名‘,参数),因此就这么就已经完成调用!
so easy!
学完基本语法、组件、插槽、异步通信这些想必我们应该已经可以开始正式的学习Vue了!