vue2.0.js
数据的渲染、数据同步 组件化、模块化 路由 ajax 数据流
Vue.js学习资源
中文官网:http://cn.vuejs.org/ 源码:http://github.com/vuejs/vue 官方工具:http://github.com/vuejs 官方论坛:http://forum.vuejs.org/
vue实例对象:
1.el:装载在页面的位置 2.template:html片段(我们使用的模板)
3.data:数据通过data对象载入 4.components:在根组件中引入其他子组件
一般的vue中只有一个根组件,通过new Vue()来注册;
组件中的data要避免直接引用赋值,要用function来实现,不要直接进行引用赋值(會互相影响)
![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180226161950734-424045815.png)
Vue实例对象中的template属性与组件指令是同等的效果。
vue基本概念:
全局api:extand、component 实例选项:el、template,data,componnets
实例属性、方法:$data、$on(都是带$符的) 指令:v-html、v-on(都是以v-开头的) 内置组件:<keep-alive></keep-alive>(可直接使用)
data里面的数据会被带到实例对象里面。 可通过 var a=new Vue(data:{apple})
a.apple访问。
https://www.cnblogs.com/caizhenbo/p/6418291.html vue实例的生命周期
全局注册子主件是通过Vue.component()来实现的;但是一般不用全局注册,只需要在根节点中加入components参数.
即便可以通过 <my-header></my-header> 调用此组件。
内置组件:
主组件的使用
h-->是一个参数,用于渲染的内置方法,将App组件渲染到绑定的元素中,或者页面中。
在{{ }} 可以写js表达式
v-for数组 对象 子组件
index---代表下标
数组
对象
《====》
效果是组件的内容被渲染了好几遍。
组件的作用是传值
组件
列表数据的同步更新
触发列表的更新(只有这几个可以触发对象数组的data里的值的更新)
直接复制列表,或者更改数组的长度不会更新。可以通过Vue.set来实现列表更新的效果。
Vue标签属性以及条件渲染 (http://www.cnblogs.com/xueweijie/p/6856095.html(v-bind的使用))
与本身存在的class不冲突,并存
:title=“obj”
data: { obj: obj} 结果
title="[object Object]"
返回对象的toString方法
v-bind:title="arr"
arr: [1, 2, 3] 结果 arr="1,2,3" 它将返回和执行 arr.join(',')
相同的结果
事件绑定
1,内置事件绑定
2,自定义事件绑定(子组件向外触发的自定义事件----》emit()触发事件,可传参数
)
父级
子级
(子组件向外触发的自定义事件,可传值)
表单事件绑定(v-model数据双向绑定)
![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180227165021157-1332526698.png)
myVal:[],这里存放的是input的value值
myVal:'',这里存放的是单选input的value
myVal:‘’,这里放的是select 的 input的value值(默认为空初始值)可以设置 myVal:'1'
||
![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180227171259101-981542105.png)
v-model-lazy: 表示内容输入完成点击回车或者失去焦点时数据才进行更新; 取代 input 监听 change 事件
v-model.number 输入数字时,将内容类型设置为数字型;
v-model.trim="show":将输入内容前后的空格去除
计算属性和数据监听
computed计算属性会被缓存,它会根据被调用的属性进行更新 computed中的属性同data中定义的属性,可以直接访问。
(过滤掉数字)
可以通过调用方法(methods) 及时更新 Date.now()
watch数据监听,多用于数据需要增删改查
计算属性的优点:可以直接根据data的属性动态的更改(data中myValue的值变化会同步反映到计算属性里)(计算属性会缓存所依赖的那个值,直到那个值发生变化,否则不会重新取值)
方法的优点:调用方法的时候才会更新,即使data中myValue的值没有变化,调用时依然会去重新取值
this.data中的数据 this.methods中的方法
组件之间的通信
1,父组件如何渲染子组件的内容 引入--->注册---> 使用该组件(组件名标签 eg:<com-a :link-m=" ">)
<<<======>>>>
(可动态引入组件)
2,父组件向子组件传递信息通过props 子组件向父组件信息通过 $emit()
(父组件向子组件传递的信息 在子组件中写props
)
注意pros的名字需要加单引号 在子组件template使用(使用必须驼峰,不能中线命名)
(父)
![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228094852615-569021289.png)
(动态属性传递)
(父)
(子)![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228101502977-752466196.png)
![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228101723149-241326637.png)
(父组件向子组件传递模板(插槽)--->
子组件中使用<slot></slot>)
(子组件向父组件传递信息---》
emit()触发事件,可传参数
)(参考事件绑定2 @my-event) ![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228100433981-9800135.png)
过渡动画
![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228135320897-1235116669.png)
1,css过渡 ![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228105109126-1694859961.png)
left right定位的值不会被transition:接受,可通过transform实现 。 ![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228142219671-1904784969.png)
(key区分标签,否则显示有问题)
transtion的mode ![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228142856803-323847971.png)
2.js过渡----->
v-bind:css="false"可以免于css的过渡的影响
![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228143941764-219799567.png)
![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228144025049-1990384445.png)
![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228144410613-3429119.png)
引入jQuery(调用动画animate()方法,el是dom done参数是enter与leave函数中必须的) jquery获取dom元素执行操作
自定义指令
(局部自定义指令)
(全局自定义指令) ![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228150101370-628641441.png)
bind:将我们的元素绑定到指令上,只执行一次 el:代表绑定的元素。binding.value表示的是使用了指令元素的指令的值
先执行bind 后执行inserted
插件
1,安装
保存到package.json中2,main.js中引用 ![](https://images2018.cnblogs.com/blog/1300352/201802/1300352-20180228154642633-1142069520.png)
3, 注册
4,实例化,并在跟组件中引用
(Vue-resource的使用 http://blog.csdn.net/u013778905/article/details/54235906)
单文件组件
1,单文件组件即 .vue组件。其中。vue组件中有(<template> <script> <style>)
2,单文件组件的实现是基于webpack+vue-loader。
参考知识