一、小细节
Object.freeze()
会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
例子：
var obj = {foo: 'bar'}
Object.freeze(obj)
这里的foo将不会动态改变
二、生命周期
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
通俗化：
beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容
三、渲染数据
-
{{}} 会将数据渲染为普通文本
-
v-html指令可以将HTML 代码渲染（v-html='后台数据'）
-
渲染对象
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
//其中object是一个对象，放在vue实例对象的data数据中
- 动态渲染
用 v-for 渲染的动态选项：
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
联动效果：one对应span中显示A
四、事件处理
-
特殊变量 $event
在设置时间的时候，可以将这个变量作为参数，在使用这个方法的时候，可以访问原生事件对象（event） -
事件修饰符
<!-- .stop 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- .prevent 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
<!-- .lazy 会在使用change事件时进行数据同步 content在data中先定义-->
<!-- 在input框中输入数据后，当输入框失去焦点后会同步数据 content值改变 -->
<input type="text" v-model.lazy='content' @change='console.log(content)'>
<span>{{content}}</span>
<!-- v-model.number 自动将用户的输入值转为数值类型
type="number" 输入框中只能写数字 写其他的不显示
若没有这个属性，则可以输入汉字；
但若第一个字符是数字，后面的从不是数字的字符开始 不显示-->
<input v-model.number="age" type="number">
<!-- v-model.trim 自动过滤用户输入的首尾空白字符 -->
<input v-model.trim="msg">
注意：
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用
v-on:click.prevent.self 会阻止所有的点击，而
v-on:click.self.prevent 只会阻止对元素自身的点击。
.passive修饰符会告诉浏览器你不想阻止事件的默认行为，即.prevent修饰符不会起作用
五、组件
1、全局注册
它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。
直接引入vue.js的方式，创建组件
1、注册组件
// button-counter 组件的名称，也就是你即将在html中写的标签
// 组件名命名规范：
// 短横线分隔命名 或 驼峰命名都可以，但是在html中写标签时，只可以为短横线分隔
// template 组件即将显示的内容（你写什么就显示什么，可以解析html标签）
// data 就是数据 但是要以函数的方式return出来
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '
<button v-on:click="count++">You clicked me {{ count }} times.</button>
'
});
2、在html中写入标签
// 就是上面组件的名称：必须是短横线分割；一个单词就不用了
<button-counter></button-counter>
3、注意：
- 组件仅在当前页面使用：在当前页面的js中，vue实例外部 注册组件
- 组件在很多页面使用：新建一个js文件，注册组件，在需要使用的页面上引入这个js文件
2、局部注册
全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
1、注册组件
//这种写法 局部注册的组件在其子组件中不可用：就是ComponentA不能在ComponentB组件中使用
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
//如果想要 ComponentA 在 ComponentB 中可用 使用下面写法
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
}
//若使用vue框架（webpack搭建的项目）
//ComponentA.vue 以vue结尾的文件，用来存放ComponentA这个组件
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}
在vue实例的data中
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
2、使用方法同上
六、prop
Prop 类型
总的来说，就是可以有各种数据形式：
//字符串：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
//对象：
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}
可以实现父组件向子组件传递数据
栗子：
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
- 传递静态数据
七、vue 路由跳转传参
- 不在url上显示
methods: {
goDetial (api, uniqueSign) {
this.$router.push({
name: 'programDetail',//这里的name值是指你在注册路由时，写的属性name的值 如下图
params: {
api: api,
uniqueSign: uniqueSign
}
})
},
},
image.png
参数接收：在跳转到的路由页面 this.$route.params
- 在url上显示
goDetial (api, uniqueSign) {
this.$router.push({
path: '/v/', //path就是路由的path
query: {
api: api,
uniqueSign: uniqueSign
}
})
}
参数接收：在跳转到的路由页面 获取url参数即可
注意：这边实现的是点击之后跳转 没有用router-link;使用如下：
<router-link :to=" { name:'programDetail',params:{api:item.api}}"></router-link>
八、简单问题
1、去除路由跳转url后面默认的
image.png
在index.js文件中实例化路由时，添加mode属性
mode: 'history',
image.png
2、解决页面跳转之后当前页面依旧保持原页面的可视区域，不能从当前页面的顶部开始预览
在index.js文件中实例化路由时，添加方法 scrollBehavior 图片如上图，代码如下：
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
网友评论