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" 用来处理行内属性