起步:
el参数可以获取id或者class.
vue.js一个节点对应一个vue实例,根据需要来实例化vue对象。
vue.js的指令:以v-开头,
v-cloak指令:
使用方法:
或者也可以采用css的写法:
也可以采用v-text写法避免源码加载的情况,因为这样子不需要写模板输出{{msg}},这个源代码没有出现,也就是不用插值表达式,自然做到了避免源代码加载的情况:
v-bind,将对应标签的属性给标签绑定上,绑定的值是date内定义的值。还可以简写,直接在属性前加个冒号,不用写v-bind,比如:
这个title是原本的html的属性,而里面的title其实是个值,vm中date定义好的。
v-on指令,绑定事件,事件类型:click点击事件等等:
这就绑定了点击事件,里面的发f1函数要在vm的methods自定义好。
v-on的简写:可以用@代替v-on:,注意别多写了冒号。
v-if和v-show指令:两者都可以控制元素的显示/隐藏,但原理不同,v-if是等于将元素代码注释掉,而show是像原来的原生JS上加上了display:none
v-for指令:
定义vue.js数组:
只输出数组元素:
输出数组以及索引:
循环打印一组对象数组:
由于是对象,所以插值表达式就要写出对象中的属性名。
打印对象:
最好写循环的时候绑定一个key属性:这个东西可以标识该数据唯一,这样做是以防止出错,对页面无影响。
循环还可以使用函数传值的写法:
<ul class="ul">
<li v-for="num in fun(list)">{{num}}</li>
<!--这里list会先被解析成具体的值,然后当作参数传入函数中-->
</ul>
<script type="text/javascript">
new Vue({
el:'.ul',
data:{
list:1 这个list先被解析
},
methods:{
fun:function test(t){
var list=['1','2','3',t];
return list;
}
}
})
</script>
vue.js事件修饰符:
stop和self用于阻止事件冒泡,once是让事件只执行一次,prevent是阻止默认行为触发,如a标签的默认行为跳转不会触发。
具体参考博客:https://blog.csdn.net/weixin_44797182/article/details/100106814
事件双向绑定指令:v-model,v-bind指令的改变是单向的,意思是,vue实例化定义好的内容msg,然后模板使用插值表达式渲染出来就是meg的内容,这种改变是单向的,而v-model,可以使得页面内容的改变影响到msg的值,v-model只能用于表单,别的标签不能用这个属性,所以双向绑定特别适合表单输入。
v-model:value=""可以直接简写成v-model=""
vue.js使用css样式:
第一种方法:将样式传入下图的数组,写成数组元素的形式,注意加上单引号,否则,编译会认为是date中的字段。
第二种使用:
这种方式能够直接控制某个样式显示与否。注意对象使用的是”:“号
第三种方式:
样式内嵌式使用方法:
注意,当属性名是有横杠比如图中的font-size这种,一定要用单引号包起来,是硬性规定。
使用多样式组合时,一定要用数组写法:
生命周期:
PS:控制台里边的数据是以前的,注意调试一定要注意控制台,因为往往页面输出的都是最终结果,控制台才是反映执行阶段的真实值
最常用到的生命周期函数:created mounted updated
过渡动画:使用transition标签包裹着要执行动画的代码块:
解释下这些状态:
v-enter与v-leave-to是一对相同表现的状态,它们都定义一个透明级别的状态,只不过enter表示元素的显示属于起始状态,leave表示元素的消失,属于最终状态。
v-enter-active:可以定义元素过渡效果,这里可以设置各种过渡函数来达到动画效果,表示元素显示过程中的状态
v-leave-active:同样是可以定义元素过渡效果,这里可以设置各种过渡函数来达到动画效果,只不过和enter-active不同的是它表示元素离开/消失过程中的状态。
v-enter-to与v-leave是一对:表示元素显示后的最终状态或者准备离开/消失的起始状态
引入第三方css库 animate 结合过渡动画:
引入了类库后,可以在需要执行的过渡指令(一定要写出需要的对应的 过渡指令)中写入,比如要在过渡过程中使用一个CSS库的类,就这样写,这里拿第三方animate库举例:enter-active-class="animated (空格)类名"。
自定义类名,为了区别和使用不同的动画效果:
将原来指令的v-前缀替换为name的值即可
全局组件和私有组件:
写在vue实例外部的叫全局组件,在vue实例内部定义的叫私有组件。
全局组件的定义以及使用:
可以简写:
template的内容是html代码,Vue.component定义好了一个组件,test就是这个组件的名字。然后,这个test以标签的形式写在html上即可。显然test并不是预定义的标签,而是用户自己通过创建组件创建出来的一个新标签。
第三种方式,这种方式适用于封装代码比较多的模块:
调用方式都是一样:
以上所有定义方式都要注意一点,组件的根元素只有一个,因此所有的内容最好事先写在定义好的根元素内,否则一旦出现两个根元素/节点是会报错的。除了根元素,子节点随意。
私有组件,用id等标记的特殊代码块,在此代码块内,不能使用别的私有组件,全局组件是通用的所以不受限制 ,私有组件的话只能用自身定义好的私有组件。
定义在Vue()里面,跟data,methods是平级的。然后跟全局组件的3中定义方式一样,它们只是创建方式不一样。
组件中的data和methods,注意Vue中的data和methods是对象,而组件中data和methods是方法:
返回的是一个对象,并且该对象用于模板的插值表达式中:下图和上图的msg对应。
组件中的数据输出:
methods使用和Vue实例中的methods使用方法一样。直接使用methods里面的方法。
组件切换:
<div id="app">
<a href="#" @click.prevent="comName='test1'">我是组件1</a>
<a href="#" @click.prevent="comName='test2'">我是组件2</a>
<component :is="comName">
</component>
</div>
<template id="one">
<h1>这是组件1</h1>
</template>
<template id="two">
<h1>这是组件2</h1>
</template>
<script type="text/javascript">
Vue.component('test1',{
template:'#one'
}
)
Vue.component('test2',{
template:'#two'
}
)
new Vue({
el:'#app',
data:{
comName:'test1'
}
})
</script>
给data里面的对象comName赋值组件名,然后<component :is="comName">是表明该comName对象是赋值了组件的对象。
PS:<component :is="comName">一定要放在包含着组件切换的div代码块内,否则不起作用,这个标签是用来显示组件的。
以上是transition 的mode 过渡动画属性详解.
注意一个坑,定义组件的标签template,不要写在任何功能语句块里面,要放在外边定义声明。否则如果写在某个父类功能代码块里面会出现并不知名错误。
正确写法:
vue.js允许我们通过不同的的url,来展现不同的内容:
路由使用步骤:
第一步:
下载router管理包,可以直接去引入CDN,也可以下载到本地,
最后,将定义好的路由使用在html上:
to属性里面写上JS中定义的path的值
默认跳转写法:
PS:get方法参数不影响匹配规则
路由可以获取参数,使用内置的对象:
在功能代码块加入这个插值表达式即可
父组件不能引入子组件的数据,但子组件可以引入父组件的数据.
路由嵌套,由父级URL访问子模块的内容:
router定义规则:
相应的html代码:
命名视图:
让原本嵌套的组件,全部同时间展示:
第一步:原本一个块内只写一个router-view,现在改为写出所有组件数量的router-view:
更改匹配规则,注意router-view视图名称的name值和下面自定义定义的视图名称要一致:
get,post请求:
需要引入一个vue-resource库,剩下的查看菜鸟教程比较好。