一, 常用指令:
1.v-text:是元素的innerText只能在双标签中使用
2.v-html:是元素的innerHtml,不能包含{{xxx}}
3.v-if:元素是否移除或者插入
4.v-show:元素是否显示或隐藏
5.v-model:双向数据绑定,v-bind是单向数据绑定(内存js改变影响页面)
二,class结合v-bind使用
- 需要根据可变的表达式的结果来给class赋值,就需要用到v-bind:class=”xxx”
- v-bind:属性名=”表达式”,最终表达式运算结束的结果赋值给该属性名,简化的写法是: :属性名=”表达式”
- class:结果的分类:一个样式:返回字符串(三元表达式和key和样式的清单对象)
多个样式:返回对象(样式做key,true或flase做值)
三, methods和v-on的使用:
1. 绑定事件的方法,
‘v-on:事件名=”表达式||函数名”’
简写:‘@事件名=” 表达式||函数名”’
2.函数名如果没有参数,可以省略() 只给一个函数名称
3.声明组件内函数,在export default这个对象的根属性加上methods属性,其是一个对象-key 是函数名 值是函数体
4.在export default这个对象的根属性加上data属性,其是一个函数,返回一个对象-对象的属性是我们初始化的变量的名称
5.凡是在template中使用变量或者函数,不需要加this
6.在script中使用就需要加上this
四,v-for的使用:
- 可以是用数组(item,index)
- 可以使用操作对象(value,key,index)
- key是类似trank by的一个属性
- 为的是告诉vue,js中的元素,与页面之间的关联,当识图删除元素的时候,是单个元素的删除而不是正版替换,所以需要关联其关系,设置(必须,性能) 2.xxx之后·必须设置
五,父子组件使用(父传子)
- 父和子,使用的是父,被用的是子
- 父需要声明子组件,引入子组件对象,声明方式如下:
“import 子组件对象 from ‘./xxx.vue’;
{
components:{
组件名:子组件对象
}
}
”
<script>
import Header from '../components/header.vue'
import Footer from '../components/footer.vue'
export default {
components: { Header, Footer },
data () {
return {
list: []
}
},
created () {
this.getData()
},
methods: {
getData () {
this.$api.get('topics', null, r => {
this.list = r.data
})
}
}
}
</script>
- 全局组件,使用更为方便,不需要声明,直接用
- 在main.js中引入一次,在main.js中使用’vue.component(‘组件名’,组件对象);’
- 所有的组件就可以直接通过组件名,使用。
六,父传子: - 父组件通过子组件的属性将值进行传递
-方式有2种:
+常量:prop1=”常量值”
+变量::prop2=”变量值” - 子组件需要声明
-根属性props:[‘’prop1,’prop2’]
-在页面中直接使用{{prop1}}
-在js中应该如何使用prop1? This.prop1获取
七,查看文档的对象分类:
- 全局的代表Vue.的
- 实例的代表this.或者new Vue().
- 选项代表 new Vue()的参数,或者export default里面的属性
八,子向父组件通信(vuebus)(扩展)
- 通过new Vue()这样的一个对象,来$on(‘事件名’,fn(prop1,prop2))
- 另一个组件引入同一个vuebus,来$emit(‘事件名’,prop1,prop2)
九,过滤器:
- content | 过滤器,vue中没有提供相关的内置过滤器,可以自定义过滤器
- 组件内的过滤器 + 全局过滤器
- 组件内过滤器就是options中的一个filters的属性(一个对象)
- 多个key就是不同过滤器名,多个value就是与key对应的过滤方式函数体
Vue.filter(名,fn)
3.总结:
- 全局 :范围大,如果出现同名时,权利小
- 组件内: 如果出现同名时,权利大,范围小
十,获取DOM元素
- 救命稻草, 前端框架就是为了减少DOM操作,但是特定情况下,也给你留了后门
- 在指定的元素上,添加ref=“名称A”
- 在获取的地方加入 this.$refs.名称A
- 如果ref放在了原生DOM元素上,获取的数据就是原生DOM对象
- 可以直接操作
- 如果ref放在了组件对象上,获取的就是组件对象
- 1:获取到DOM对象,通过this. r e f s . s u b . refs.sub. refs.sub.el,进行操作
- 对应的事件
- created 完成了数据的初始化,此时还未生成DOM,无法操作DOM
- mounted 将数据已经装载到了DOM之上,可以操作DOM
- 如果ref放在了原生DOM元素上,获取的数据就是原生DOM对象
十一,vue-router
- 前端路由 核心就是锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据
- ui-router:锚点值改变,如何获取模板?ajax、
- vue中,模板数据不是通过ajax请求来,而是调用函数获取到模板内容
- 核心:锚点值改变
- 以后看到vue开头,就知道必须Vue.use
- vue的核心插件:
- vue-router 路由
- vuex 管理全局共享数据
- 使用方式
- 1:下载
npm i vue-router -S
- 2:在main.js中引入
import VueRouter from 'vue-router';
- 3:安装插件
Vue.use(VueRouter);
- 4:创建路由对象并配置路由规则
let router = new VueRouter({ routes:[ {path:'/home',component:Home} ] });
- 5:将其路由对象传递给Vue的实例,options中
- options中加入
router:router
- options中加入
- 6:在app.vue中留坑
<router-view></router-view>
- 1:下载
十二,命名路由
- 需求,通过a标签点击,做页面数据的跳转
- 使用router-link标签
- 1:去哪里
<router-link to="/beijing">去北京</router-link>
- 2:去哪里
<router-link :to="{name:'bj'}">去北京</router-link>
- 更利于维护,如果修改了path,只修改路由配置中的path,该a标签会根据修改后的值生成href属性
- 1:去哪里
十三,参数router-link
- 在vue-router中,有两大对象被挂载到了实例this
- r o u t e ( 只 读 、 具 备 信 息 的 对 象 ) 、 route(只读、具备信息的对象)、 route(只读、具备信息的对象)、router(具备功能函数)
- 查询字符串
- 1:去哪里
<router-link :to="{name:'detail',query:{id:1} } ">xxx</router-link>
- 2:导航(查询字符串path不用改)
{ name:'detail' , path:'/detail',组件}
- 3:去了干嘛,获取路由参数(要注意是query还是params和对应id名)
this.$route.query.id
- 1:去哪里
- path方式
- 1:去哪里
<router-link :to="{name:'detail',params:{name:1} } ">xxx</router-link>
- 2:导航(path方式需要在路由规则上加上/:xxx)
{ name:'detail' , path:'/detail/:name',组件}
- 3:去了干嘛,获取路由参数(要注意是query还是params和对应name名)
this.$route.params.name
- 1:去哪里
十四,编程导航
- 不能保证用户一定会点击某些按钮
- 并且当前操作,除了路由跳转以外,还有一些别的附加操作
- this.$router.go 根据浏览器记录 前进1 后退-1
- this.$router.push(直接跳转到某个页面显示)
-push参数:字符串 /xxx
-对象:’{name:’xxx’,query:{id:1},params:{name:2}}’
十五,重定向和404:
- 进入后,默认就是/
- 重定向’{path:’/’,redirect:’/home’}’
- 重定向’{path:’/’,redirect:{name:’home’}}’
- 404:在路由·规则的最后的一个规则
-写一个很强大的匹配
-‘{path:’*’,component:notFoundVue}’
十六,多视图:
1.以前可以一次放一个坑对应一个路由和显示一个组件
-一次行为=一个坑+一个路由+一个组件
-一次行为=多个坑+一个路由+多个组件
2.components多视图 是一个对象 对象内多个key和value
-key对应视图的name属性
-value就是要显示的组件对象
3. 多个识图’’-> name就是default
4. ’’-> name就是xxx
十七,嵌套路由
- 用单页去实现多页应用,复杂的嵌套路由
- 开发中一般会需要使用
- 视图包含视图
- 路由父子级关系路由
期组件内包含着第一层router-view
{ name:'music' ,path:'/music', component:Music ,
children:[ 子路由的path /就是绝对路径 不/就是相对父级路径
{name:'music.oumei' ,path:'oumei', component:Oumei },
{name:'music.guochan' ,path:'guochan', component:Guochan }
]
}
十八,vue-resource(了解)
- 可以安装插件,早期vue团队开发的插件
- 停止维护了,作者推荐使用axios
- options预检请求,是当浏览器发现跨域 + application/json的请求,就会自动发起
- 并且发起的时候携带了一个content-type的头
十九,axios
- https://segmentfault.com/a/1190000008470355?utm_source=tuicool&utm_medium=referral
- post请求的时候,如果数据是字符串 默认头就是键值对,否则是对象就是application/json
- this.$axios.get(url,options)
- this.$axios.post(url,data,options)
- options:{ params:{id:1}//查询字符串, headers:{ ‘content-type’:‘xxxxx’ },baseURL:’’ }
- 全局默认设置 :Axios.defaults.baseURL = ‘xxxxx’;
- 针对当前这一次请求的相关设置
二十,复习
- 路由操作的基本步骤
//引入对象
import VueRouter from 'vue-router';
//安装插件
Vue.use(VueRouter); //挂载属性的行为
//创建路由对象 并且配置路由规则
let router = new VueRouter({
routes:[
//一个个对象
{ name:'xxx',path:'/xxx',组件 }
]
});
//将路由对象放入到options中new Vue()
//new vue 启动
new Vue({
el:'#app',
render:c=>c(App),
router
})
import Vue from 'vue';//引入vue
import App from './app.vue';//引入app.vue 用它的内容来替换 <div id=app>
//构建vue实例
new Vue({
el:'#app',//渲染内容到目的地
render: h => h(App)//渲染内容
})
-
套路
- 1: 去哪里
- 2: 导航(配置路由规则)
{name:'bj',path:'/beijing',组件A}
- 3: 去了干嘛(在组件A内干什么)
- 在created事件函数中,获取路由参数
- 发起请求,把数据挂载上去
-
参数
- 查询字符串(#/beijing?id=1&age=2)
- 1: 去哪里
- 2: 导航(配置路由规则)
{name:'bj',path:'/beijing',组件A}
- 3: 去了干嘛(在组件A内干什么)
this.$route.query.id||age
- path(#/beijing/1/2)
- 1: 去哪里
- 2: 导航(配置路由规则)
{name:'bj',path:'/beijing/:id/:age',组件A}
- 3: 去了干嘛(在组件A内干什么)
this.$route.params.id||age
- 查询字符串(#/beijing?id=1&age=2)
-
编程导航
- 一个获取信息的只读对象($route)
- 一个具备功能函数的对象($router)
- 根据浏览器历史记录前进和后台
this.$router.go(1|-1);
- 跳转到指定路由
this.$router.push({ name:'bj' });
-
嵌套路由
- 让变化的视图(router-view)产生包含关系(router-view)
- 让路由与router-view关联,并且也产生父子关系
-
多视图
- 让视图更为灵活,以前一个一放,现在可以放多个,通过配置可以去修改
-
axios:
- 开始:
- 跨域 + 默认的头是因为你的数据是对象,所以content-type:application/json
- 有OPTIONS预检请求(浏览器自动发起)
- 最终:
- 当我们调整为字符串数据,引起content-type变为了www键值对
- 没有那个OPTIONS预检请求
- 总结: 跨域 + application/json 会引起OPTIONS预检请求,并且自定义一个头(提示服务器,这次的content-type较为特殊),content-type的值
- 服务器认为这个是一次请求,而没有允许content-type的头,
- 浏览器就认为服务器不一定能处理掉这个特殊的头的数据
- 抛出异常
- 在node服务器 response.setHeader(“Access-Control-Allow-Headers”,“content-type,多个”);
- formdata的样子: key=value&key=value
- 开始:
-
axios属性关系
- options: headers、baseURL、params
- 默认全局设置(大家都是这么用)
- Axios.defaults-> options对象
- 针对个别请求来附加options
- axios.get(url,options)
- axios.post(url,data,options)
二十一,axios
- 合并请求
- axios.all([请求1,请求2])
- 分发响应 axios.spread(fn)
- fn:对应参数(res)和请求的顺序一致
- 应用场景:
- 必须保证两次请求都成功,比如,分头获取省、市的数据
- 执行特点: 只要有一次失败就算失败,否则成功
二十二,拦截器
- 过滤,在每一次请求与响应中、添油加醋
- axios.interceptors.request.use(fn) 在请求之前
- function(config){ config.headers = { xxx }} config 相当于options对象
- 默认设置 defaults 范围广、权利小
- 单个请求的设置options get(url,options) 范围小、权利中
- 拦截器 范围广、权利大
二十三, token(扩展)
- cookie 和session的机制,cookie自动带一个字符串
- cookie只在浏览器
- 移动端原生应用,也可以使用http协议,1:可以加自定义的头、原生应用没有cookie
- 对于三端来讲,token可以作为类似cookie的使用,并且可以通用
- 拦截器可以用在添加token上
二十四, 拦截器操作loadding
- 在请求发起前open,在响应回来后close
二十五,监视
- watch 可以对(单个)变量进行监视,也可以深度监视
- 如果需求是对于10个变量进行监视?
- 计算属性computed 可以监视多个值,并且指定返回数据,并且可以显示在页面
- 都是options中的根属性
- watch监视单个
- computed可以监视多个this相关属性值的改变,如果和原值一样
- 不会触发函数的调用,并且可以返回对象