vue2基本功能
大约 3 分钟
vue2基本功能
Vue生命周期
过滤器
1.局部过滤器 在当前组件内部使用过滤器
给某些数据 添油加醋
//声明
filters:{
'过滤器的名字':function(val,a,b){
//a 就是alax ，val就是当前的数据
}
}
//使用 管道符
数据 | 过滤器的名字('alex'，'wusir')
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<App />
</div>
<script src="vue.js"></script>
<script src="moment.js"></script>
<script>
let App = {
data(){
return {
msg:"hello world",
time:new Date()
}
},
template:`
<div>我是一个APP {{ msg | myReverse }}
<h2>{{ time | myTime('YYYY-MM-DD')}}</h2>
</div>
`,
filters:{
myReverse:function (val) {
console.log(val);
return val.split('').reverse().join('')
},
//年-月- 日 年- 月
myTime:function(val,formatStr){
return moment(val).format(formatStr);
}
}
}
new Vue({
el:'#app',
data(){
return {
}
},
components:{
App
}
})
</script>
</body>
</html>
2.全局过滤器 只要过滤器一创建，在任何组件中都能使用 ***
Vue.filter('过滤器的名字'，function(val,a,b){})
在各个组件中都能使用
数据 | 过滤器的名字('alex'，'wusir')
生命周期的钩子函数
从生到死
diff算法
created 组件创建 ***
- 虚拟DOM React
- 发送ajax 获取数据 实现数据驱动视图
mounted ***
- 获取真实DOM
- 激活当前组件
- keep-alive Vue提供的内置组件，主要作用，让组件产生缓存
- 停用当前组件
destroyed
- 如果开了定时器，一定要关闭定时器
Vue的基本用法
模板语法 关闭掉 django中提供的模板语法
指令系统
v-text
v-html
v-show和v-if
v-bind和v-on
v-for
v-model 双向数据绑定
Vue中的常用属性
data:function(){}
el
methods
watch
computed
template
Vue的常用方法
钩子函数
Vue的过滤器
局部和全局的过滤器
Vue的组件
全局组件
Vue.component('组件的名字',{
})
局部组件
声子 挂子 用子
组件的传值
父=》子
子=》父
平行组件传值
Vue的全家桶（kfc） vue+vue-router+vuex
vue+vue-router 主要来做 SPA（Single Page Application） 单页面应用
vue-router是vue的核心插件
为什么要使用单页面应用？
传统的路由跳转，如果后端资源过多，会导致页面出现白屏现象，让前端来做路由，在某个生命周期的钩子函数中发送ajax，数据驱动。为了用户体验
使用vue-router
1.下载
//如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter
// Vue.use(VueRouter)
const Home = {
data() {
return {}
},
template: `<div>我是首页</div>`
}
const Course = {
data() {
return {}
},
template: `<div>我是免费课程</div>`
}
//2.创建路由
const router = new VueRouter({
//3.定义路由规则
mode:'history',
routes: [
{
path:'/',
redirect:'/home'
},
{
path: '/home',
component: Home
},
{
path: '/course',
component: Course
}
]
})
let App = {
data() {
return {}
},
// router-link和router-view 是vue-router 提供的两个全局组件
//router-view 是路由组件的出口
//router-link默认会被渲染成a标签，to属性默认被渲染成href
template: `
<div>
<div class="header">
<router-link to = '/home'>首页</router-link>
<router-link to = '/course'>免费课程</router-link>
</div>
<router-view></router-view>
</div>
`
}
new Vue({
el: '#app',
//4.挂载 路由对象
router,
data() {
return {}
},
template: `<App />`,
components: {
App
}
})
命名路由
const router = new VueRouter({
//定义路由规则
routes: [
{
path:'/',
redirect:'/home'
},
{
path: '/home',
name:'Home',
component: Home
},
{
path: '/course',
name:'Course',
component: Course
}
]
})
let App = {
data() {
return {}
},
// router-link和router-view 是vue-router 提供的两个全局组件
//router-view 是路由组件的出口
template: `
<div>
<div class="header">
<router-link :to = '{name:"Home"}'>首页</router-link>
<router-link :to = '{name:"Course"}'>免费课程</router-link>
</div>
<router-view></router-view>
</div>
`
}
动态路由匹配
$route 路由信息对象
$router 路由对象 VueRouter
watch: {
'$route'(to, from) {
// 对路由变化作出响应...
console.log(to); //当前路由信息对象
console.log(from);
}
}
编程式导航vs 声明式导航
<router-link :to = '{name:"Home"}'>首页</router-link>
<router-link :to = '{name:"Course"}'>免费课程</router-link>
//编程式导航
this.$router.push({
name:'Home'
})