官网 vue官网地址 https://cn.vuejs.org
{{}}的作用
{{}}是vue的数据渲染方法
在里面可以直接写数据 也可以写一些简单的逻辑 还可以写函数调用
在vue中基本不使用dom 也不要在vue中使用jq等js第三方库
因为vue是一个简洁轻便的前端框架 但是jq是一个比较笨重的前端框架
基本结构
<div id="app">
</div>
<script>
// vue其实是一个构造函数
new Vue({
el: '#app', // js内容要执行在 id为app的标签中 el 就element(元素) vue可以用el标签挂载点
data: { // vue中存储数据的地上,
methods:{// methods 是vue项目中存储函数或者方法的地方
}
})
</script>
指令
—v-for是vue中循环的方法，常见用法为 循环data中储存的数据
在循环数组的时候
v-for="(item, index) in arr"
item 代表数组项 他是一个变量 可以随意命名
index也是一个变量他代表的是数组的索引值
arr 是要循环的数组
v-for循环字符串的时候
v-for="(item, index) in str"
item 代表数组项 他是一个变量 可以随意命名
index也是一个变量他代表的是数组的索引值
str 是要循环的字符串
v-for循环对象 对象的关键的内容包括键值对和索引值
value key index 这三个都是变量可以随意命名
value是键值对的值
key是键值对的键
index是对象的下标
—v-text与v-html
v-text指令可以将指令的值渲染在标签内部
但是v-text不会解析标签 相当与直接把变量的值当成字符串渲染 在页面上
v-html会把字符串中的标签解析出来页面上不会显示内容中的标签 但是会显示标签中的内容
v-html在项目中通常用来解析副文本
—v-show与v-if
v-show的作用控制当前元素是否显示
v-show其实是通过css样式控制内容的显示或者隐藏
v-show的值如果是false则会给当前标签添加display: none;
v-if也可以控制内容是否显示
v-if是一个条件判断的指令
他会通过新增和删除dom完成内容的显示和隐藏
v-show和v-if的区别就是
1、v-show通过css样式控制元素显示隐藏dispaly: none
2、v-if是通过删除和新增dom控制内容的显示和隐藏
v-show因为不用删除和新增dom所以执行的速度会更快
v-if 执行的更慢 但是v-if因为直接会移除dom所以安全更高
所以当某一部分内容需要频繁的显示和隐藏时为了提高运行速度
我们推荐使用v-show，反之则使用v-if
—v-bind与v-model
v-bind是一个绑定指令 它可以绑定任何一个标签的任何属性
v-bind指令可以进行缩写 缩写后的形式就是v-bind:
v-bind为数据绑定指令 而v-model为数据双向绑定指令
v-model为表单双向绑定属性
v-model其实是双向绑定的value属性 value在表单元素中
v-model作用体现在绑定的变量的值跟在浏览器上显示出来的内容始终保持一致
—v-on
v-on:是vue的事件绑定指令
各种鼠标事件 键盘事件 资源加载事件都可以使用v-on进行绑定
v-on可以进行缩写 例如 v-on:click -> @click
—v-pre与v-cloak
v-pre不会解析{{}}中的数据 而是会吧标签内的内容直接渲染出来
渲染页面时会出现{{}}显示在页面上的情况 闪烁一下又变成了数据
v-cloak就是用来解决渲染闪烁的问题
使用方法在便签上直接写上v-cloak 然后在样式中添加
[v-cloak] {
display: none;
}
生命周期
- berforeCreate() 这个是dom创建之前触发的函数 这时候还没有data和methods 所以无法调用data中的数据和methods里面的方法
- created() dom创建的函数 里面不能直接获取dom 如果要在created()中获取dom 需要使用this.$nextTick() $nextTick是在dom更新完成后调用的方法 他是基于promise的一个方法 会有延迟
- beforeMounte() dom 创建完成 但是还未渲染
- mounted() dom渲染完毕 在这个里面不需要任何方法 可以直接使用js方法获取dom
- beforeUpdate() 数据更新之前触发的函数
- updated() 数据更新的时候触发的函数
- activated() keep-alive组件激活的时候触发的函数
computed与watch
计算属性 不是一个函数 所以计算属性在使用的时候不能写()
在计算属性中使用的数据叫做依赖数据
计算属性只有在依赖数据发生变化的时候才会再次出发
<body>
<div id="app">
<!-- <div>
<div>{{formmateFun()}}</div>
<span>{{formmateFun()}}</span>
</div> -->
<div>
<div>{{formmateFun2}}</div>
<span>{{formmateFun2}}</span>
</div>
<button @click="changeTime">点击</button>
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
time: '2020-04-02 11:16:35',
obj: {
name: '英雄联盟'
}
},
computed: {
formmateFun2() {
// console.log('计算属性')
let date = new Date(this.time)
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
return `${year}-${month}-${day}`
}
},
mounted() {
console.log(this)
},
methods:{
formmateFun() {
console.log('普通方法')
let date = new Date(this.time)
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
return `${year}-${month}-${day}`
},
changeTime() {
// this.time = new Date()
this.obj.name = "王者荣耀"
console.log(this)
}
},
watch: {
time(to, from) {
console.log(to)
},
'obj.name'(to, from) {
console.log(from)
console.log(to)
}
}
});
</script>
侦听属性可以侦听vue中数据状态的变化
侦听属性中有连个默认参数
第一个参数是数据变化后的新的数据
第二个参数是数据变化之前的值
from -> to 就是从什么变成什么的过程
- 监听路由
- watch: {
'$route': function(to, from) {
// to 是要进入的页面的路由对象
// from 是要离开的页面的路由对象
},
'$route.path': function(to, from) {
// to 是要进入的页面的路由对象
// from 是要离开的页面的路由对象
}
}
路由
配置路由对象
- 在对应的js文件中引入vue-router
import vueRouter from 'vue-router'
import component1 from '组件文件地址'
const routes = [
{
path: '',
name: '',
component: component1
}
{
path: '',
name: '',
component: import (要懒加载的组件文件地址)
}
]
var router = new vueRouter({
routes,
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})
-
动态路由 是在路由对象的path的地址中拼接一个 /index/:参数名称
-
获取动态路由的参数 this.$route.params 可以找到动态路由的参数
声明式路由—直接在页面里面使用
router-link
- 必传属性 to属性 to属性的值可以是一个地址(字符串) 也就是路由对象配置的path
- to的值还可以是一个对象
- params 参数只有使用路由对象的name属性跳转时才能使用
<router-link :to="{path: '组件路由地址', query:{键值对}}"></router-link>
<router-link :to="{name: '组件路由对象的name', query:{键值对}}"></router-link>
<router-link :to="{name: '组件路由对象的name', params:{键值对}}"></router-link>
编程式路由
this.$router.push({
path: '路由对象的path',
query: {
键值对
}
})
this.$router.push({
name: '路由对象的name',
query: {
键值对
}
})
this.$router.push({
name: '路由对象的name',
params: {
键值对
}
})
路由守卫 路由拦截
全局路由守卫
// 全局前置守卫
beforeEach(function(to, from, next){ // 每次路由跳转之前都会触发
// to 是要进入的页面的路由对象
// from 是要离开的页面的路由对象
// 只有执行了next()函数 路由拦截才会继续往下走
// next的参数可以是一个路由对象 也可以是一个地址如果给next传了地址参数 他会跳转到对应的地址页面
next()
})
// 全局的后置守卫
afterEach(function(to,from) { // 这时候页面已经进入 所以不用next()
})
路由独享守卫
{
path: '/',
component: component,
beforeEnter(to, from, next) { // 进入地址为path 的值得路由的时候才会触发的守卫
}
}
组件内的守卫
// 组件内的前置守卫
beforeRouteEnter(to, from, next) {
// 注意在该路由守卫中 this的指向不是当前的vue实例化对象
next(arg => {
// 这个参数就是vue的实例化对象
})
}
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 可以访问组件实例 `this`
}
beforeRouteLeave(to, from, next) {
// 路由离开前触发的守卫
}
8876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
