数据的渲染、数据同步 组件化、模块化 路由 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来实现,不要直接进行引用赋值(會互相影响)
Vue实例对象中的template属性与组件指令是同等的效果。 vue基本概念: 全局api:extand、component 实例选项:el、template,data,componnets
实例属性、方法:$data、$on(都是带$符的) 指令:v-html、v-on(都是以v-开头的) 内置组件:(可直接使用)
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数据双向绑定) myVal:[],这里存放的是input的value值 myVal:'',这里存放的是单选input的value
myVal:‘’,这里放的是select 的 input的value值(默认为空初始值)可以设置 myVal:'1' ||
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:) <<<======>>>>
(可动态引入组件) 2,父组件向子组件传递信息通过props 子组件向父组件信息通过 $emit() (父组件向子组件传递的信息 在子组件中写props)
注意pros的名字需要加单引号 在子组件template使用(使用必须驼峰,不能中线命名)
(父) (动态属性传递) (父) (子)
(父组件向子组件传递模板(插槽)--->子组件中使用)
(子组件向父组件传递信息---》emit()触发事件,可传参数)(参考事件绑定2 @my-event) 过渡动画
1,css过渡 left right定位的值不会被transition:接受,可通过transform实现 。 (key区分标签,否则显示有问题) transtion的mode
2.js过渡-----> v-bind:css="false"可以免于css的过渡的影响
引入jQuery(调用动画animate()方法,el是dom done参数是enter与leave函数中必须的) jquery获取dom元素执行操作 自定义指令 (局部自定义指令) (全局自定义指令)
bind:将我们的元素绑定到指令上,只执行一次 el:代表绑定的元素。binding.value表示的是使用了指令元素的指令的值
先执行bind 后执行inserted
插件 1,安装 保存到package.json中2,main.js中引用
3, 注册 4,实例化,并在跟组件中引用 (Vue-resource的使用 http://blog.csdn.net/u013778905/article/details/54235906) 单文件组件 1,单文件组件即 .vue组件。其中。vue组件中有(
参考知识