vue 初始复习

Posted 2021-01-18 lia-633

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