引子
前端三大框架:
+Angular Google
Angular.js(1.x)
Augular(2.x)
+React (组件化) Facebook
+Vue.js 尤雨溪
架构模式: MVVM MVC
正文
1.引入 cdn or npm
2.创建全局对象
new Vue({
el: '#id', 获取所需区域
template: '#id', 绑定模板
data: { 保存数据
},
methods: { 保存方法/函数
},
filters: { 定义过滤器(如将所有的数字之前加上$)
}
computed: { 计算属性,
+内部有get获取,set设置
1.get获取是获取原始数据的
2.set是在自定义的方法修改时才会调用,要传参
注: 如果修改自定义的数据,才会触发set,过程为get-set-get,如果修改原始数据则只是会多次get;
+和methods的区别
1.computed中 获取的是结果,methods中 获取的是这个匿名函数
2.computed中有缓存,如果数据没有发生改变,就不进行计算;而methods则是通过调用它来事先计算
+如果直接写在{{}}显示数据的过程中去改数据,则太重了
}
watch{
+watch 监控数据是否发生变化
+watch 是异步的可以处理大量数据
+watch 中直接用原始数据命名,当数据发生改变时在匿名函数中传参
}
})
3.指令与引入
{{ }} 写入文本或是js表达式
{{值|过滤的方法}} 表示过滤,过滤的方法写在filters中
{{reserverMessage}} 在computed中加计算属性
<template id = ' '>
<div>
1.template中写的html
2.在最外层必须写一个根节点
</div>
</template>
v-html = ' ' 在标签内写入指令,即可识别标签
v-bind:url='url' 简写为冒号 获取属性 动态修改
v-show = 'seen' 加style='display = none' 获取动态布尔值
v-if = 'seen' 直接删除标签 获取动态布尔值
v-if/v-else/v-else-if 条件渲染
+如果条件满足就执行v-if中的,否则执行v-else中的
eg:
<div v-if="ok">
<label>Username</label>
<input placeholder="Enter your username" key='1'>
</div>
<div v-else>
<label>Email</label>
<input placeholder="Enter your email address" key='2'>
</div>
v-on:事件名='函数名' 简写为@ 添加事件
v-model: 双向数据绑定 data<====>视图
v-for: 列表循环
+要生成哪个标签就把v-for写在哪个标签上,
+v-for 是一种遍历方法,可以遍历数组也可以遍历对象
+也可以写成v-for-of
<li v-for = '(item,index) in (数组名)' :key = 'index'></li>
<li v-for = '(value,key) in (数组名)' :key = 'key'></li>
+操作数组的方法
1.变异(操作原始数组)
pop,unshift,push,shift,slice(截取字符串),reverse,\
2.重塑(用新数组覆盖原始数组)
concat(拼接数组),filter(过滤),map
this.arr = this.arr.concat();
v-cloak:与[v-cloak]:{display: none}结合使用,v-cloak内部找到并改成display: block;
v-pre: 使内容以原始格式显示,所以应用场景就是,当内容有{{}}时也不被识别成vue的内容
自定义指令:
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
钩子函数参数
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
**key是作为一个对象的唯一标识
Vue 的生命周期
+一共八件事
直接写\
beforeCreate(){
},
created(){ // 请求数据
},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforDestory(){},
destory(){},
其他写法
destory: function() {}
事件传参
<div @click = 'myFun($event)'></div>
+在vue中要进行事件传参加小括号直接传即可
+如果是event的话写成 $event 的形式
修饰符
事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认事件
.capture 阻止事件捕获
.self 只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的
.once 事件只执行一次 ******组件
+ 修饰符可以连写
+注意修饰符的顺序
按键修饰符
.enter 回车键
.tab tab键
.delete 删除和退格
.esc
.space
.up
.down
.left
.right
<input v-on:keyup.enter>
<input @keyup.enter='事件名'>
+特别的,设置了部分常用的键
+自定义按键别名
自定义 filter drective 按键别名
+全局 filter
- 定义一个全局对象('名字',传参的匿名函数),注意一定要写在全局vue之前
Vue.filter('my-filter',function (value){
返回处理过后的值
charAt(下标)
})
+局部
- vue有属性filters
filters: {
函数名: function (value) {
返回处理过后的值
注意函数和方法的区别
}
}
自定义指令 directive 指令
+ 全局
- Vue.directive('命令名字',funtion(value){
inserted: function(el) {
可获取到该元素
el.focus()
}
})
+局部
new Vue({
el: '#box',
data: {
},
directives: {
指令名: {
// inserted 自定义属性内置必填,意为插入
inserted: function(el){
el.focus();
// 元素聚焦
}
}
}
})
网友评论