博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue2.0.js
阅读量:5150 次
发布时间:2019-06-13

本文共 3215 字,大约阅读时间需要 10 分钟。

 数据的渲染、数据同步  组件化、模块化 路由    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组件中有(

 参考知识

转载于:https://www.cnblogs.com/huiminxu/p/8371341.html

你可能感兴趣的文章
在js在添版本号
查看>>
sublime3
查看>>
Exception Type: IntegrityError 数据完整性错误
查看>>
Nuget:Newtonsoft.Json
查看>>
Hdu - 1002 - A + B Problem II
查看>>
Android设置Gmail邮箱
查看>>
js编写时间选择框
查看>>
JIRA
查看>>
小技巧——直接在目录中输入cmd然后就打开cmd命令窗口
查看>>
深浅拷贝(十四)
查看>>
HDU 6370(并查集)
查看>>
BZOJ 1207(dp)
查看>>
PE知识复习之PE的导入表
查看>>
HDU 2076 夹角有多大(题目已修改,注意读题)
查看>>
洛谷P3676 小清新数据结构题(动态点分治)
查看>>
九校联考-DL24凉心模拟Day2T1 锻造(forging)
查看>>
Attributes.Add用途与用法
查看>>
L2-001 紧急救援 (dijkstra+dfs回溯路径)
查看>>
javascript 无限分类
查看>>
spring IOC装配Bean(注解方式)
查看>>