vue 初始复习
vue 初始复习
- data 中的数据最终都是挂载到 vm 实例中
- template 属性会整个代替 app 的内容
- el 的优先级高于.$mount
指令
- v-text:相当于小胡子{{}} -->v-text='name'
- v-html:可以渲染字符串中的标签 -->v-html='name'
- v-once:该标签只渲染一次 -->后面不加内容
- v-cloak:解决网速慢时显示小胡子的问题 -->后面不加内容
- v-pre:有这个属性的元素,vue 不会对该元素及所有子元素进行 DOM 编译,只是理解成普通的 DOM 结构
- v-model:用于 input 标签
对象
想要触发视图更新:两个前提:1.该属性有 get 和 set 方法 2.该属性在 html 模板中有用到 四个方法:1.自定义一个无关变量 2.创建一个新对象 3.上来就写死 4..$set(target,key,value)
数组
- v-for:可以循环数组|对象|字符串|数字
- 数组:
v-for="(val,i) in arr"
val 属性值 i 索引 - 对象:
v-for="(val,i,a) in obj"
val 属性值 i 属性名 a 对应索引 - 字符串:
<ul>
<li v-for="val in obj.a">{{val}}</li>
</ul>
<ul>
<li v-for="val in 'sssssss'">{{val}}</li>
</ul>
- 数字:
v-for="val in 10"
事件
<button v-on:click="fn">点点点点</button>
<button @click="fn">点点点点</button>
- data里的fn,this指window
- methods里的fn,this指实例 Vue
<button v-on:click="fn">点点点点</button><button @click="fn()">点点点点</button>
不加括号时,默认把事件对象传给对应函数,加小括号,用$event
来获取函数对应的事件对象 加括号时,括号里写什么就给该函数传递什么参数,不会默认传递事件对象
button弹索引小案例
todoList小案例
this.msg = this.msg.trim();
//去除首尾空格<input type="text" v-model="msg" @keyup="fn">
键盘事件@keyup.enter='fn' 只有按键是enter才会触发fn
按键修饰符@keyup.13 只有按键的keyCode是13才会触发fn
v-model之checkbox
<input type="checkbox" v-model="val" value="1">🍉西瓜
<input type="checkbox" v-model="val" value="2">🍓草莓
<input type="checkbox" v-model="val" value="3">🍌香蕉
<input type="checkbox" v-model="val" value="3">🍊橙子
<input type="checkbox" v-model="val" value="3">🍍菠萝
- 一个checkbox时,要不就是true,要不就是false
- 多个checkbox时,我们绑定同一个变量,并且这个变量需要是同一个数组;并且每一个input必须有value值
- ary中的每一项都是选中的input中的value值
- ary里的初始值为对应的value值时,可以默认选中
v-model之radio
<input type="radio" v-model="sex" value="0">男
<input type="radio" v-model="sex" value="1">女
- sex的值是选中的input的value值
- sex的初始值为默认value时,可以默认选中该对应项
v-model之select
<select name="" id="" v-model="val" @change="fn"><!--onchange事件-->
<option value="" disabled>请选择</option>
<option value="1">🍎苹果</option>
<option value="2">🍌香蕉</option>
<option value="3">🍊橙子</option>
<option value="4">🍇葡萄</option>
<option value="5">🍉西瓜</option>
</select>
- v-model绑定的值 是用户选中的option的value值;每一个option都有一个对应的value
- 用户选中某个option,会触发select框的change事件,当我们需要有一个默认选中option时,只要把val的默认值给对应的option的value值即可
- 当我们有提示用户的选项时,添加一个value为空的option即可,并把初始的val设置成空字符串,不想让用户选中该提示,给该提示加disabled属性即可
axios
常用的请求接口的东西
- OPTIONS https://www.souyidai.com/soeasy/invest/onlinelistnet::ERR_SPDY_PROTOCOL_ERROR
- 相当于敲门的,若后台开门,带着数据 跨域会碰见
axios的方法和post 请求拦截 和 响应拦截
<!--
axios 的get 和 post 怎么用?怎么传参 即可
axios.defaults.baseURL = '' // 设置基础路径
axios.get(url,{params:参数对象})
.then((data)=>{})
.catch((err)=>{console.log(err)})
axios.post(url,参数对象).then().catch()
//请求拦截器
axios.interceptors.request.use((config)=>{
config.data.pc = true;
return config
},(err)=>{
return Promise.reject(err)
})
//响应拦截器
axios.interceptors.response.use((res)=>{
return res.data
},(err)=>{
return Promise.reject(err)
})
-->
v-bind
简写:
:src="val"
用来处理行内属性