Vue基础入门看了这一篇就够了
1. 了解Vue
咳咳 ~ 首先vue是一个渐进式框架,采取MVVM思想
MVVM思想:
- M: model 数据
- V: view 模板
- VM: 数据模板,意思就是将数据和模板相连起来,可以双向驱动,数据驱动视图,视图驱动数据
补充: Vue2.0采用的是数据劫持方式实现(Object.defineProperty) 然后Vue3.0是用的es6语法的反向代理(Proxy)
然后介绍vue的优缺点以及特性
- 特性: 双向数据绑定,指令,插件化
- 优点: 简单,易用,灵活,轻量级的框架
- 缺点: 不利于SEO (浏览器搜索引擎) 优化 , 封装严实
2. Vue指令
Vue指令使用,直接填加到想添加的html标签上,列如: <div v-html="html"></div>,html是data中申明的变量,v-html是vue自带指令, 好 OK,知道怎么使用的,接下来我们看一下有哪些指令,指令拥有什么样的功能,指令本质上是html中的自定义属性
-
v-text 将指令的属性值渲染到页面,不识别html标签
-
v-html 将指令的属性值渲染到页面,识别html标签(一般用于ajax请求后台返回html时)
-
v-cloak 不需要属性值,解决页面闪动
补充:以上三个标签存在共同点,都可以解决闪动,为什么会闪动那呢,有时候网速很卡的时候,vue还没编译过来,页面就已经加载了,就会出现闪动问题 -
v-if v-else-if v-else 页面判断指令
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> -
v-for 循环数组也可以循环对象 语法格式
div v-for="(item,index) in items" :key="item.id">key是循环出来的元素的唯一识别,优大大说添加这个key性能会好一点哦,key注意点 , 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
补充:当和 `v-if` 一起使用时，`v-for` 的优先级比 `v-if` 更高总而言之,言而总之,不推荐 v-if 和 v-for 写在一个标签上 具体看这个 -
v-show 根据属性值之真假值，切换元素的
displayCSS 属性。
补充: v-if 与 v-show 区别 v-if加载具有惰性加载,如果第一次属性值为false,那么就不会在DOM树中创建该节点,然后如果切换状态 v-if 会不停的删除添加DOM节点 而v-show是操作绑定节点的display属性 -
v-on 绑定事件监听器。可以简写为@事件名 属性值为一个函数调用如果不加括号默认传递时间对象给函数,如果加了括号想传事件对象,fn( $event) $event可以写在实参的任意位置
2.4 Vue v-on新增对象写法 但是使用对象语法时,是不支持任何修饰器的
.native 修饰符将一个dom事件绑定到组件根元素上<!-- 普通v-on --> <input v-on:keyu="onEnter"> @click.native <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
事件修饰符
.stop- 调用event.stopPropagation()。
.prevent- 调用event.preventDefault()。
.capture- 添加事件侦听器时使用 capture 模式。
.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。
.native- 监听组件根元素的原生事件。
.once- 只触发一次回调。
.left- (2.2.0) 只当点击鼠标左键时触发。
.right- (2.2.0) 只当点击鼠标右键时触发。
.middle- (2.2.0) 只当点击鼠标中键时触发。
.passive- (2.3.0) 以{ passive: true }模式添加侦听器
-
v-bind 动态绑定属性可简写为 :class 更详细的请看vue官方档,在此不一一介绍,太多了
// 此时类名aaa为一个字符串 <div class="aaa"> </div> //此时类名aaa为一个变量 补充:可以存在一个动态class和一个静态class并存 vue最后会进行合并 <div :class="aaa" class="bbb"> </div> -
v-model 双向数据绑定, 只限于表单元素
修饰符: -
v-slot 插槽指令 可简写为# 剩余组件化开发中讲解
<base-layout> <template v-slot:header || ＃header> Header content </template> </base-layout> -
v-pre 不通过vue编译直接显示原数据
-
v-once 只编译一次,之后数据改变也不会进行改变
2.1 自定义指令详解 directive
首先先介绍一下自定义指令如何定义以及内接收的参数,定义自定义指令拥有两种方法,一种为全局定义,通过Vue.directive API操作 列:
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el,binding,vnode) {
// 聚焦元素
el.focus()
}
})
// 注册一个组件自定义指令 `v-focus`
directives: {
focus: {
// 指令的定义
inserted: function (el,binding,vnodel) {
el.focus()
}
}
}
自定义指令中的钩子函数:
-
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 -
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 -
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind：只调用一次，指令与元素解绑时调用
钩子函数中的参数:
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钩子中可用。
然后还可以动态获取自定义指令参数 通过接收自定义指令接收参数的对象.arg获取, 还可以接收对象类型参数
<p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
<p v-pin:[direction]="{name: 'zs',age: 18}">I am pinned onto the page at 200px to the left.</p>
// direction: 'left'
Vue.directive('pin', {
bind: function (el, binding, vnode) {
console.log(binding.value) // 200 // {name:zs,age:18}
console.log(binding.arg) // left
}
})
2.2 Vue特殊属性 ref 使用方法
<!-- `vm.$refs.p` will be the child component instance -->
<p ref="p">hello</p>
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>
ref绑定在结构上,通过$ref.p访问获取该节点或者 该组件信息
ref注意点: 因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！`$refs` 也不是响应式的，因此你不应该试图用它在模板中做数据绑定
3. Vue生命周期详解,以及Vue内置方法
我相信执行完以下代码,你可以深刻理解vue生命周期了
<div id="app">
<div id="gg">{{msg}}</div>
<button @click='update'>更新</button>
<button @click='destroy'>销毁</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript">
/*
Vue实例的生命周期
*/
var vm = new Vue({
el: '#app',
data: {
msg: '生命周期'
},
methods: {
update: function () {
this.msg = 'hello';
},
destroy: function () {
this.$destroy();
}
},
watch: {
msg() {
console.log(this.msg);
}
},
beforeCreate: function () {
console.log('----------------beforeCreate----------------');
console.log(this.msg);
},
created: function () {
console.log('----------------created----------------');
console.log(this.msg, this.$el);
},
beforeMount: function () {
console.log('----------------beforeMount----------------');
console.log(this.$el.outerHTML);
},
mounted: function () {
console.log('----------------mounted----------------');
console.log(this.$el.outerHTML);
},
beforeUpdate: function () {
console.log('----------------beforeUpdate----------------');
console.log(this.$el.outerHTML);
},
updated: function () {
console.log('----------------updated----------------');
console.log(this.$el.outerHTML);
},
beforeDestroy: function () {
console.log('----------------beforeDestroy----------------');
},
destroyed: function () {
console.log('----------------destroyed----------------');
}
});
</script>
3.1 Watch函数 监听器详解
首先介绍监听器定义方法:
a: 1
watch: {
a: function (val, oldVal) {
console.log(val, oldVal) // 2 1
},
a: {
handler: function...,
// 添加deep属性开启深度监听,就可以监听对象,对象中任意属性改变都会触发该函数
deep: true,
// 该回调将会在页面加载完之后被立即调用
immediate: true
}
}
a = 2
注意: watch中不要使用箭头函数,箭头函数定义将会绑定作用域,导致访问不到vue实例
Vue.$nextTick
当页面加载完执行此函数的内容
this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
console.log('dom更新了')
})
filter过滤器
过滤器常常用于用来处理数据格式,列如时间格式
首先还是老样子定义数据格式:
<!-- 在双花括号中 -->
// 其中 capitalize 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
{{ message | capitalize('arg1', 'arg2') }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | capitalize"></div>
filters: {
capitalize: function (value,val1,val2) {
console.log(val1,val2) // arg1 arg2
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
太累了,写不动了,组件和keep-alive下一次在更…(此处省略一万字)
1751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
