囫囵吞枣——Vue

Vue
连接地址:<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
输出:{{}}

书写Vue表达式时候. var vm = new Vue({ ... }) 此处的Vue 首字母一定要大写。
脚本写在Body的后面才能执行。

获取函数中Data的值$Data

v- :都是有特殊属性的。
v-bind :标签属性 简写(:) 例子:v-bind:id=""
v-html:指令用于输出标签 (可实现数据的双向绑定)
v-if:判断 其中(判断是三个等号 ===)
v-eles:
v-eles-if:
v-show:
v-on:是事件指令 简写(@) 可以带修饰符 @:submit.prevent
v-for :循环 例子(v-for="site in sites")

v-model : 用于数据绑定
修饰符: .lazy 就是数据绑定不会同步更新 。但是会同步
               .trim 过滤末尾的空字符串
               .number 转换为数字类型,不输出字符(但转换失败,按原字符转出)。


          函数:methods 无缓存
                     computed 有缓存
                     filters 过滤器
                     watch 监听属性(一个变量值更改,绑定相同名字的变量值也会更改)
                     directives 自定义指令
                     components 自定义组件(局部)

         自定义
                     computed 自定义组件
                          1.template 绑定数值到组件
                     directive 自定义指令
                          1.inserted 定义指令


样式案例:
                 1.声明两个样式。 sty1{ ...} sty12{....}
                 2.在声明Vue函数。在date方法里声明数组. data:{GetClass:[sty1:true,sty12:fales]}
                 3.使用(在标签时) :class="GetClass"

内联样式 例: :style="{color:ys1,fontSize:ys2}";
                        在Vue函数中声明,ys1 ys2 变量。

监听属性:
            @click 例: @click="变量+1"
            @click="方法" 方法在Vue中生成
            @click="方法(参数)" 方法在Vue中生成

事件修饰符
                 stop 阻止单击事件
                 prevent 提交事件不在重载页面
                 once 事件只能触发一次
                 capture 添加事件侦听事件捕获模式

                 keyup 监听键盘事件 (键盘很多按键,这里Vue为提供了别名)
                 enter 回车键
                 tab 切换
                 esc ... 上下左右 等通用键。 也可以去查keyCode


                 自定义(均需要绑定到Vue函数中) 声明全局 Vue.js 最大的功能。

自定义组件
                 语法:Vue.component("组件名称","配置选项");
                 Vue.component('biaoqian', { template: '<p>自定义组件!</p>' }) // 注意事项。 template 显示值时要带上标签

自定义指令:

Vue.directive('指令名称',{inserted(钩子函数):}) //inserted 定义指令
指令名称在元素标签中是V-指令名称 ,而在声明指令时候却只写指令名称 不用添加V-

指令提供钩子函数有:

bind 只调用一次
inserted 被绑定元素插到父节点
update 被绑定元素所在的模板更新调用
component Update 被绑定元素所在的模板完成一次更新周期时调用
unbind 只调用一次,指令与元素解绑时调用

钩子函数的参数:


el:绑定元素直接操作DOM
binding:
1.name 指令名 (不包括V-)
2.value 绑定指令的元素值
3.olaValue 指令绑定的上一个元素值 (仅 update 和 componentUpdated 中使用)
4.expression 绑定值的字符串形式。(不会进行计算)
5.arg 给指令传参数 v-e:u ,arg的值就为"u"
6.modifiers 包含修饰符的对象 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode:Vue编译生成的虚拟节点
oldVnode:上一个虚拟节点(仅 update 和 componentUpdated 中使用)

路由:

Vue.js 可以实现多视图的单页WED应用。



原文地址:https://www.cnblogs.com/srx121201/p/8988924.html