vue入门[2]常用指令一属性绑定 1.v-bind 动态绑定某些属性 2.v-bind 绑定 class(面试题有几

u=2751900835,1663591888&fm=26&fmt=auto.webp

一属性绑定

1.v-bind

动态绑定某些属性

<div id="app">
    <!-- <a v-bind:href="link">百度</a> -->
    <a :href="link">百度</a>
    <!-- v-bind:href  可以简写为 :href -->
    <button @click="goSina">切换为跳转到新浪</button>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        link:"http://baidu.com"
    },
    methods:{
        goSina(){
            this.link = "http://sina.com.cn"
        }
    }
})
</script>

2.v-bind 绑定 class(面试题有几率)

绑定class有两种方式：对象语法，数组语法。

<style>
     .blue{
         color:blue
     }
     .italic{
         font-style: italic;
     }
</style>

<div id="app">
    <h3 class="blue">蓝色</h3>
    <h3 :class="{'blue':isblue}">蓝色</h3>
    <h3 :class="{'blue':isblue,'italic':isItalic}">蓝色 倾斜</h3>
    <h3 :class=" isblue&&isItalic ? 'blue italic' : '' ">蓝色</h3>
    <h3 :class="['blue','italic']">蓝色倾斜</h3>
    <h3 :class="getItalic()">蓝色倾斜</h3>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        isblue:false/true,
        isItalic:false/true
    },
    methods:{
        getItalic(){
            return ['blue','italic']
        }
    }
})
</script>

3.v-bind 绑定style

<div id="app">
    <ul>
        <li style="background:skyblue;">标签</li>
        <li :style="{background:'pink',fontStyle:'italic'}">v-bind绑定样式</li>
        <li :style="{'background-color':bgColor,color:fontColor}">数据来自data</li>
        <li :style="colorObj">数据来自data</li>
        <li :style="[colorStyle,bgStyle]">数组</li>
        <li :style="[colorObj,italicObj]">数据来自data</li>
        <li :style="getStyle()">方法</li>
    </ul>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        bgColor:'orange',
        fontColor:'#cfc',
        colorStyle:{color:'blue'},
        colorObj:{background:'#cfc',color:'red'},
        italicObj:{fontStyle:'italic'},
        bgStyle:{background:'yellowgreen'}
    },
    methods:{
        getStyle(){
            return [this.colorStyle,this.bgStyle]
        }
    }
})
</script>

二循环遍历

v-for 和 key

当数组不发生变化时(一次性渲染),key可以选用index或者id
当数组会发生变化时,这个时候会引起html的重排,此时最好用id

<div id="app">
    <ul>
        <!--  key 在循环中作为唯一标识符 ,可以给元素挂载唯一的属性值 -->
        <li v-for='(item,index) in arr' :key="item.id">{{item.name}} <input type="text"></li>
        <!-- 
        index 在数组发生改变的时候,它自己也会变化,所以当数组是会变化的时候,尽量不要选择index作为key 
        -->
    </ul>
    <button @click="unshiftOne">往arr前面追加一项</button>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        arr:[
            {id:'1',name:'JS'},
            {id:'2',name:'Vue'},
            {id:'3',name:'React'},
        ]
    },
    methods:{
        unshiftOne(){
            this.arr.unshift({id:'m4',name:'JQ'})
        }
    }
})
</script>

........gif

三计算属性(面试几率)

<body>
    <div id="app">
        <ul>
            <li>名:{{firstname}}</li>
            <li>姓:{{lastname}}</li>
            <li>姓名: <input type="text" v-model="username"></li>
        </ul>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        firstname:"Michael",
        lastname:"Jackson"
        // data 里的数据是没办法调用data里面的数据的
    },
    // 计算属性
    computed:{
        username:{
            get(){
                return this.firstname + ' ' + this.lastname;
            },
            set(newVal){
                // 当username 的值发生改变的时候,会自动触发setter
                console.log(newVal);  //字符串: 'Michael Jackson'
                let arr = newVal.split(" "); //['Michael','Jack']
                this.firstname = arr[0];
                // this.lastname = arr[1]; //没判断会出现undefined
                this.lastname = arr[1] || "";  //可做判断可不做
            }
        }
    }
})
</script>

computed 与 methods 区别

<body>
    <div id="app">
        <ul>
            <li>名:{{firstname}}</li>
            <li>姓:{{lastname}}</li>
            <li>[computed]姓名:{{username}}</li>
            <li>[computed]姓名:{{username}}</li>
            <li>[methods]姓名:{{username1()}}</li>
            <li>[methods]姓名:{{username1()}}</li>
        </ul>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            firstname: "Michael",
            lastname: "Jackson"
        },
        computed:{
            username(){
                console.log('computed');  //执行一次,因为com有缓存
                return this.firstname + ' ' + this.lastname;
            }
        },
        methods:{
            username1(){
                console.log('methods'); //调用多少次就执行多少次,因为methods没缓存
                return this.firstname + ' ' + this.lastname;
            }
        }
    })
</script>

四 v-model

v-model

v-model 是语法糖,它包含了v-bind 和 v-on 两个操作

v-bind 绑定input元素的value属性
v-on 指令绑定input元素的input事件

<body>
<div id="app">
    <!-- <input type="text" v-model="msg"> -->
    <!-- <input type="text" v-model="msg" v-on:input="iptChange"> -->
    <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value"> 
    <!-- 一排搞定 -->
    <h3>{{msg}}</h3>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        msg:"你好世界"
    },
    // methods:{
    //     iptChange(e){ //事件对象  元素 DOM对象
    //         // console.log(e.target.value);
    //         // 修改msg
    //         this.msg = e.target.value
    //     }
    // }
})
</script>

下拉选择框

<div id="app">
    <select v-model="result">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="watermelon">西瓜</option>
    </select>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        result:'banana'
    }
})
</script>

五数组操作

常用操作

push（数组最后添加数据）;
unshift（数组最前添加数据）;
shift（删除最前的元素）;
pop（删除最后的元素）;
slice（从begin开始(索引),到end结束,(包含begin,不包含end)）;
splice(替换现有元素或者原地添加新的元素) ;
concat（合并两个或多个数组）;

新增迭代方法：

forEach 和 map (forEach没有返回值,map有返回值) ;
filter (筛选数组中满足条件的所有元素);
reduce (累加)

六自定义过滤器

1.全局过滤器

<body>
<div id="app">
    <h3>{{price | filterMoney}}</h3>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
//全局过滤器
// Vue.filter(过滤器名称,配置项)
Vue.filter('filterMoney',(val)=>{
    return '$' + val.toFixed(2)+"元";
})
new Vue({
    el: "#app",
    data: {
        price:21.8
    }
})
</script>

2.局部过滤器

<body>
<div id="app">
    <h3>{{price | filterMoney}}</h3>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        price:38.8
    },
    filters:{
        filterMoney(val){
            return '￥' + val.toFixed(2)+"元";
        }
    }
})
</script>

七本地存储

1.localStorage 永久存储

// 添加数据；setItem的value值是字符串类型的数据
localStorage.setItem('name','七七')；
// 获取数据
localStorage.getItem('name'); // 七七
// 清空
localStorage.clear();

特点:

除非是主动删除，不然是不会自动删除的
一般浏览器存储的大小是5M

2.sessionStorage 临时存储

// 添加数据；setItem的value值是字符串类型的数据
sessionStorage.setItem('name','七七')；
// 获取数据
sessionStorage.getItem('name'); // 七七
// 清空
sessionStorage.clear();

特点:

关闭浏览器会自动清空数据
一般浏览器存储的大小是5M

3.cookie

第一次登陆后服务器返回数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求，浏览器自动会把上次请求存储的cookie数据自动带上给服务器，服务器根据**客户端的cookie**来判断当前是哪一个用户。大小只有4kb,存储量**很小**。

vue入门[2]常用指令

一 属性绑定