前端开发Vue基础篇：day02 Vue基础知识

最新推荐文章于 2025-02-11 21:30:00 发布

半晴Miko

最新推荐文章于 2025-02-11 21:30:00 发布

阅读量928

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/BanQin_Miko/article/details/121268076

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

模板语法的插值操作

(1)v-html 往标签内部插入html文本；

(2)v-text 往标签内部插入普通文本(解析不了标签)；

(3)v-pre 在界面上直接展示胡子语法；

(4)v-cloak 隐藏数据渲染到页面之前，胡子语法在界面上的展示。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-html="htmlTxt"></div>
    <div v-text="textTxt"></div>
    <div v-pre>{{123}}</div>
    <div v-cloak>hello {{textTxt}}</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      htmlTxt: '<p><strong>我是html</strong></p>',
      textTxt: 'Vue'
    }
  })
</script>
</html>

v-for中的key属性

<div id="app">
    <input type="text" v-model="txtVal"> <button @click="handleClick">按钮</button>
    <ul>
        <li v-for="i,k in list" :key="i">
            <input type="checkbox"> {{ i }}
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            list:['html', 'css', 'javascript', 'jquery'],
            txtVal:""
        },
        methods:{
            handleClick(){
                this.list.unshift(this.txtVal)
            }
        }
    })
</script>

官方推荐我们使用v-for时，给对应的元素或组件添加一个key属性。

为什么需要这个key属性呢

(1)这个其实和Vue的虚拟DOM的Diff算法有关系。

当某一层有很多相同节点时，也就是列表节点时，我们插入一个新的节点到列表中

(2)在B和C之间加一个F，Diff算法默认执行起来时这样的：

即把C更新成F，D更新成C，E更新成D，最后再插入一个新的E，这样的效率也太低了。

当我们使用key来为每一个节点做唯一标识：Diff算法会以key作为标识来识别此节点，找到正确的位置区插入新的节点，所以key的作用是为了高效的更新虚拟DOM。

注意：

(1)key属性是判断需不需要更新DOM节点的依据，这个key的值的内容变了，则需要更新DOM(删除后重建DOM)，内容没变则不需要操作到DOM节点；

(2)key的作用是为了高效的更新虚拟DOM。

reduce方法的使用

利用reduce方法遍历数组的每一个元素，reduce()调用结果最后返回一个最终值（最后一次return值）。

var arr = [
    {name: 'Vuejs入门', price: 99, count: 3},
    {name: 'Vuejs底层', price: 89, count: 1},
    {name: 'Vuejs从入门到放弃', price: 19, count: 5},
]

//数组名.reduce(回调函数，pre的初始值)
arr.reduce(function(pre, current){
    // reduce这个方法被调用时，会遍历arr这个数组的每一个元素，每遍历一个元素，就执行一次这里的代码
    // current表示当前正在遍历的这个元素
    // pre 是上一次的这个函数return的值
    // ！！！因为第一次遍历没有上一个return值，所以，交给了第二个参数，设置pre的初始值
    console.log(pre, current)
    return 10
},0)

//！！！并且reduce方法最终会返回最后一次的return值

控制台输出：

0 {name: "Vuejs入门", price: 99, count: 3}
10 {name: "Vuejs底层", price: 89, count: 1}
10 {name: "Vuejs从入门到放弃", price: 19, count: 5}

Vue的计算属性computed的使用

<div id="app">
    {{total}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            arr: [
                {name: 'Vuejs入门', price: 99, count: 3},
                {name: 'Vuejs底层', price: 89, count: 1},
                {name: 'Vuejs从入门到放弃', price: 19, count: 5},
            ]    
        },
        computed:{
            //computed里面的方法必须有返回值！这个return值将来在视图中被{{total}}引用
            total(){
                var a = this.arr.reduce(function(pre, current){

                    console.log(pre, current)

                    // var total = 当前这次的 price*count + 上一次的total
                    var total = current.price*current.count + pre
                    return total
                },0)
                return a
            }
        }

    })
</script>

computed内部方法有缓存的作用

以下代码total调用了三遍，却只执行了1遍，这是computed内部方法的缓存起了作用

<div id="app">
    {{total}}
    {{total}}
    {{total}}
    {{getTotal()}}
    {{getTotal()}}
    {{getTotal()}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            arr: [
                {name: 'Vuejs入门', price: 99, count: 3},
                {name: 'Vuejs底层', price: 89, count: 1},
                {name: 'Vuejs从入门到放弃', price: 19, count: 5},
            ]    
        },
        methods:{
            getTotal(){
                console.log("getTotal")
                var a = this.arr.reduce(function(pre, current){



                    // var total = 当前这次的 price*count + 上一次的total
                    var total = current.price*current.count + pre
                    return total
                },0)
                return a
            }
        },
        computed:{
            //computed里面的方法必须有返回值！这个return值将来在视图中被{{total}}引用
            total(){
                console.log("total")
                var a = this.arr.reduce(function(pre, current){

                    // var total = 当前这次的 price*count + 上一次的total
                    var total = current.price*current.count + pre
                    return total
                },0)
                return a
            }
        }

    })
</script>

computed内部方法的另一种写法(get和 set)

....
computed:{
    //computed里面的方法必须有返回值！这个return值将来在视图中被{{total}}引用
    total:{
        get(){
            console.log("total_get")
            var a = this.arr.reduce(function(pre, current){

                // var total = 当前这次的 price*count + 上一次的total
                var total = current.price*current.count + pre
                return total
            },0)
            return a
        },
            set(){
                console.log("total_set")
            },
    }
}
...


vm.total = 3   //触发调用set方法

总结：

1.定义：要用的属性不存在，要通过已有属性计算得来。

2.原理：底层借助了objcet.defineproperty方法提供的getter和lsetter。

3.get函数什么时候执行? (1)初次读取时会执行一次。 (2)当依赖的数据发生改变时会被再次调用。

4.优势:

与methods实现相比，内部有级存机制(复用)，效率更高，调试方便。

5.注意：

(1)计算属性最终会出现在vm上，直接读取使用即可。

(2)如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。

v-model的原理

v-model 本质上包含了两个操作：

(1)v-bind 绑定input元素的value属性

(2)v-on指令绑定input元素的input事件

即：:value="txtVal" 和 @input="handleInput"

<div id="app">
    <!-- <input type="text" v-model="txtVal"> -->
    <input type="text" :value="txtVal" @input="handleInput">
    <p>{{ txtVal }}</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            txtVal:""
        },
        methods:{
            handleInput(e){
                console.log(e)
                this.txtVal = e.target.value
            }
        }
    })
</script>

即：

<input type="text" v-model="textVal"/>
<!-- 等同于 -->
<input type="text" v-bind:value="textVal" v-on:input="textVal = $event.target.value"/>

数组常用的操作

push（返回数组长度）

unshift（返回数组长度）

shift（返回删除的值）

pop（返回删除的值）

splice、concat（返回新数组）

var arr = [1, 2, 3]
// 往数组最后一位添加一个数字
arr.push(4) // [1, 2, 3, 4]
// 删除数组最后一个数字
arr.pop()   // [1, 2, 3]
console.log(arr)
// 往数组第一位添加一个数字
arr.unshift(0)
console.log(arr)
// 删除数组第一个元素
arr.shift()
console.log(arr)
// splice
// 删除第一个元素
arr.splice(1, 2) 
console.log(arr)
arr.splice(1, 2, 2, 4, 5) 
console.log(arr)
// 合并数组
console.log([1, 6].concat([5, 7]))

reduce（计算）

filter（过滤）

map（集合）

var arr = [1, 2, 3]

// 计算总数
var ret1 = arr.reduce((pre, current)=>{
    pre += current
    return pre
}, 0)
console.log(ret1)  // 6

// filter (过滤)
var ret2 = arr.filter(item =>{
    return item > 2
})
console.log(ret2)  // [3]

// map 
var ret3 = arr.map(item =>{
    return {id:item}
})
console.log(ret3)   // [{id: 1}, {id: 2}, {id: 3}]

数组去重

var arr2 = [1, 2, 3, 1, 6, 2, 3]

//ES6
consoloe.log([...new Set(arr2)])
console.log(Array.from(new Set(arr2)))

var newArray = [];
for(var i=0; i<arr2.length; i++){
    if(newArray.indexOf(arr2[i])==-1){
        newArray.push(arr2[i])
    }
}
console.log(newArray)

var newArray2 = [];
var obj = {};
for(var i=0; i<arr2.length; i++){
    if(!obj[arr2[i]]){ //如果不在obj中，就表示不重复的数据，就在对象中添加键值对

        obj[arr2[i]] = arr2[i]
        newArray2.push(arr2[i])
    }
}
console.log(newArray2)

Vue的过滤器和全局过滤器

使用

Vue的过滤器用来对数据展示之前做一定的处理

<div id="app">
    <!-- {{ 变量名 | 过滤器名 }} -->
    <p>{{ num | formatNum }}</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            num:10
        },
        filters:{
            formatNum(val){   // 这个形参接收 | 符号前面的变量数据
                return val + 50  //return后面的值就是将来展示在页面上的值(即过滤之后的值)
            }
        }
    })
</script>

过滤一个时间戳：

<div id="app">
    <!-- {{ 变量名 | 过滤器名 }} -->
    <p>{{ timestamp | formatDate }}</p>
</div>
<script>
    // var timestamp = new Date().getTime()  // 获取时间戳
    // console.log("日期是：",timestamp)
    var vm = new Vue({
        el:"#app",
        data:{
            timestamp:new Date().getTime()
        },
        filters:{
            formatDate(val){   // 这个形参接收 | 符号前面的变量数据

                var now = new Date(val)
                var year=now.getFullYear(); 
                var month=now.getMonth()+1; 
                var date=now.getDate(); 
                var hour=now.getHours(); 
                var minute=now.getMinutes(); 
                var second=now.getSeconds(); 
                return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 

            }
        }
    })
</script>

全局过滤器

多个app共用的过滤器可以作为全局过滤器来书写

<div id="app">
    <!-- {{ 变量名 | 过滤器名 }} -->
    <p>{{ timestamp | formatDate }}</p>
</div>
<div id="app2">
    <!-- {{ 变量名 | 过滤器名 }} -->
    <p>第二个： {{ timestamp | formatDate }}</p>
</div>
<script>

    //全局过滤器
    // Vue.filter("过滤器名字",(val)=>{})
    Vue.filter("formatDate",(val)=>{
        var now = new Date(val)
        var year=now.getFullYear(); 
        var month=now.getMonth()+1; 
        var date=now.getDate(); 
        var hour=now.getHours(); 
        var minute=now.getMinutes(); 
        var second=now.getSeconds(); 
        return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
    })

    var vm2 = new Vue({
        el:"#app2",
        data:{
            timestamp:new Date().getTime()
        }
    })
    // var timestamp = new Date().getTime()  // 获取时间戳
    // console.log("日期是：",timestamp)
    var vm = new Vue({
        el:"#app",
        data:{
            timestamp:new Date().getTime()
        },
        // filters:{
        //     formatDate(val){   // 这个形参接收 | 符号前面的变量数据

        //         var now = new Date(val)
        //         var year=now.getFullYear(); 
        //         var month=now.getMonth()+1; 
        //         var date=now.getDate(); 
        //         var hour=now.getHours(); 
        //         var minute=now.getMinutes(); 
        //         var second=now.getSeconds(); 
        //         return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 

        //     }
        // }
    })
</script>

以上就是Vue入门第二天的全部内容了。

资料文档地址：前端开发Vue基础篇：Day02Vue基础知识.pdf