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
下载
//如果以后是模块化编程，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'
})