文章目录
一、Vue模板语法
视图更新注意事项
1、直接修改数组中的值 不会触发视图更新
this.books[0] ='xxx' #这种不行
2、动态添加对象属性
this.books.title='xxx' #这种不行
通过Vue.set
Vue.set(this.books,0,xxx)
Vue.set(this.books,'title','xxx')
二、事件的绑定
通过v-on
$event 参数 获取原生的DOM事件
1、双向绑定v-model
2、计算属性
v-model:value='xxx'
computed:{
xxx:function(){
自己的业务逻辑
}
}
3、set
计算属性默认只有get,如果有set方法那必须有get
v-model:value='xxx'
computed:{
set:function(){},
get:function(){}
}
4、监听属性
v-model:value='xxx'
watch:{
xxx:function(新值,旧值){}
}
5、表单input输入绑定
1、text 文本
2、textarea 文本域
3、checkbox 复选框
4、radio 单选框
5、select 下拉框
6、修饰符
.lazy 延迟同步
.trim 去收尾空格
.number 自动将用户输入类型变成数值类型
三、自定义组件
1、自定义组件定义
<组件的名字></组件的名字>
Vue.component('组件的名字',{
template:'组件的模板',
data:function(){
return {
xxx
}
}
})
2、给组件添加属性
<组件的名字></组件的名字>
Vue.component('组件的名字',{
props:['属性的名字'],
template:'组件的模板',
data:function(){
return {
xxx
}
}
})
3、单一根元素
组件中的模板,只能在一个标签中
4、事件的传递
this.$emit('方法的名字','参数')
5、自定义组件v-model
model:{
prop:xxx,
event:xxx
}
6、插槽
<slot></slot>
7、插槽的命名
<slot name='xxx' v-bind:navs='navs'></slot>
<template v-slot:xxx='xxxx'>
{{xxxx.navs}}
8、生命周期函数
- 创建期间
- 运行期间
- 销毁期间
四、过滤器
Vue.filter('过滤器名字',function(value){})
{{username|过滤器的名字}}
{{username|过滤器1|过滤器2}}
五、图书管理系统的案例
JSON.stringify 转成字符串
JSON.parse 转成JS认识的代码
JSON.parse(JSON.stringify(xxxx))
bootstrap 前端样式组件
filter 数组中的过滤
filter(function(item){
return true/false
})
六、Vue-Router路由
路由的基本使用
<router-link to='/'>首页<router-link>
<router-view><router-view>
var 模板名字 = Vue.extend(template:'xxx')
var router = new VueRouter({
routes:[
#path 路径
{path:'路径',component:'模板名字'}
]
})
new Vue({
router:router //第一个router是关键字,第二个router是上面代码的router
})
1、动态路由
<router-link to='路径/参数'><router-link>
<router-view><router-view>
var 模板名字 = Vue.extend(template:'xxx {{route.paras.参数}}')
var router = new VueRouter({
routes:[
{path:路径/:参数,component:'模板名字'}
]
})
new Vue({
el:'',
router:router
})
2、错误页面
var notfound = Vue.extend({template:<p>not found</p>})
var profile = Vue.extend({
template:<p>个人中心{{$route.params.userid}}</p>,
mounted(){
if(this.$route.params.userid!=123){ #这里是错误判断
this.router.replace('/404') #这里是错误跳转,跳转到404页面
}
}
})
var router = new VueRouter({
routes:[
{path:'/404',component:notfound}, # 404页面
{path:'profile/:userid',component:profile}
]
})
3、嵌套路由
var setting = Vue.extend({template:'<p>setting</p>'})
var message = Vue.extend({template:'<p>message</p>'})
var user = Vue.extend(
{
template:`
<div>
<h1>个人中心</h1>
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<router-link to='/user/123/setting'>设置</router-link> #嵌套路由
</li>
<li role="presentation">
<router-link to='/user/123/message'>消息</router-link>
</li>
</ul>
<div class='container'>
<router-view></router-view> #在定义好的路由中如果嵌套路由,需要给定一个出口
</div>
</div>
`
})
var router = new VueRouter({
routes:[
{path:'/',component:index},
{
path:'/user/:userid',
component:user,
children:[ #直接在路由的定义下添加children属性
{path:'setting',component:setting},
{path:'message',component:message},
]
},
]
})
4、编程式导航
使用可以在用户点击的情况下跳转链接,还有一种方式是使用js代码修改页面的跳转方式,这时候就要使用到编程式导航
在html中指定跳转按钮
然后在Vue对象中定义对应的methods方法
在对应的methods方法中使用对应的跳转方式
var router= new VueRouter({
routes:[
{path:'/',component:index},
{path:'/profile/:userid',component:profile,name:'myprofile'},
{path:'/login',component:login},
]
})
new Vue({
el:"#app",
methods:{
index:function(){
this.$router.push('/') // 跳转到对应的 / 的路径
},
profile:function(){
// this.$router.push('/profile/123')
this.$router.push({name:'myprofile',params:{userid:"djt"}}) //这个name需要对应VueRouter其中的一个path
},
login(){
this.$router.push({path:'login',query:{wd:'python'}}) //在url以添加?wd=python的形式
},
prev(){
this.$router.go(-1) //网页浏览记录会记录在history栈中,-1代表步数,向后退一步
},
next(){
this.$router.go(1)
}
},
router:router
})
5、命名路由
可以对路由进行命名
{path: "/user/:userid", component: user,name:'User'}
在<router-link>中调用
<router-link v-bind:to="{name:'User',params:{userid:123}}">中心{{$route.params.userid}}</router-link>
6、命名视图
对于<router-view>来说:
可以在一个html->body标签中添加多个<router-view>标签而且还可以命名,来提供视图
<div id="app">
<div class='header'>
<router-view name='header'></router-view>
</div>
<div class='body'>
<router-view name='left'></router-view>
<router-view name='right'></router-view>
</div>
<div class='footer'>
<router-view name='footer'></router-view>
</div>
</div>
var headerc = Vue.extend({template:'<h1>header_view内容</h1>'})
var leftc = Vue.extend({template:'<h1>left_view内容</h1>'})
var rightc = Vue.extend({template:'<h1>right_view内容</h1>'})
var footerc = Vue.extend({template:'<h1>footer_view内容</h1>'})
var router = new VueRouter({
routes:[
{
path:'/',
components:{ //这里是有s的 components
header:headerc, //header为<router-view>中的name,headerc为对应的模板
left:leftc,
right:rightc,
footer:footerc,
}
}
]
})