Vue基础(二)

2021/02/08 10:46
阅读数 33

一、模板语法的插值操作(其他不常用指令)

  • v-html 往标签内部插入html文本

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

  • v-pre 在界面上直接展示胡子语法

  • v-cloak 隐藏数据渲染到页面之前,胡子语法在界面上的展示

  <div id="app">
         <!-- <p>{
   
   {str1}}</p> -->
		 <!-- v-html 让浏览器认识str1中的html标签 -->
		 <!-- <p v-html="str1"></p> -->
		 <!-- <p v-text="str1"></p> -->
		 <!-- v-pre 让胡子语法不做解析 直接做{
   
   {}}这种格式 -->
		 <!-- <p v-pre>{
   
   {str1}}就是胡子语法的格式</p> -->
		 
		 <!-- 由于网络延迟,最开始可能会让用户看到胡子语法的格式,但是我们不希望用户看到
		 做法: 把胡子语法给隐藏起来 -->
		 <p v-cloak>{
  
  {str1}}</p>
    </div>
    <script>        
           setTimeout(function() {
    
    
			   new Vue({
    
    
			       el:"#app",
			       data:{
    
    
			           str1:"<span>这是span标签</span>"
			       }
			   })
		   }, 1500)
               
    </script>

二、v-for中的key属性

	<div id="app">
        <button @click="add">按钮</button>
        <ul>
            <!-- :key 的值就是浏览器判断是否需要进行DOM的更新的依据。
                如果这个依据在在操作前后没有发生变化, 浏览器不会进行DOM更新
                如果某些元素的这个依据发生改变,浏览器就会对其进行DOM更新

                :key的作用:  减少了不必要的DOM操作,提高了更新效率
            -->
            <li v-for="i,key in list" :key="i.id">{
  
  {i.name}}</li>
        </ul>
    </div>
    <script>
        new Vue({
    
    
            el:"#app",
            data:{
    
    
                list:[
                    {
    
    id:1,name:'html'},
                    {
    
    id:2,name:'css'},
                    {
    
    id:3,name:'javascript'},
                    {
    
    id:4,name:'JQuery'},
                ],
            },
            methods:{
    
    
                add(){
    
    
                    this.list.unshift({
    
    id:5,name:'Vue'});
                }
            }
        })
    </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}

理解了上面的案例之后,就可以提一个需求:计算上面购物车的总价(每一个 price*count 的和),

        var arr = [
            {
   
   name: 'Vuejs入门', price: 99, count: 3},
            {
   
   name: 'Vuejs底层', price: 89, count: 1},
            {
   
   name: 'Vuejs从入门到放弃', price: 19, count: 5},
        ]
		
		let total = arr.reduce(function(pre, current) {
   
   
			// 每一次返回  上一次的价格+(这次的单价*这次的数量)
			return pre + current.price * current.count
		}, 0)
      console.log(total);

备注:上面这个reduce()方法和Vue本身没有关系,纯粹是一个js数组的方法。

四、(重点)Vue的计算属性computed 的使用

	  <div id="app">
        总价为: {
  
  {total}}
    </div>
    <script>
        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:{
    
    
				// total是属性名,是我们自己写的名字
				// 计算属性的函数中需要有返回值,在页面中{
    
    {total}}就是这个返回值
				total(){
    
    
					let ret =  this.arr.reduce(function(pre, current){
    
    
						return pre + current.price * current.count
					},0)
					return ret
				}	
			}
        })
    </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 = 100   //触发调用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是一个事件,表示这个input元素的值发生改变的时候
			 v-model的原理: 由:value标签属性和@input事件配合完成
			 :value属性 值就是 默认值的属性值
		 -->
        <input type="text" :value="txtVal" @input="changeVal" />
		<p>{
  
  {txtVal}}</p>
    </div>  
    <script>
        new Vue({
    
    
            el:'#app',
            data:{
    
    
                txtVal: "默认值"
            }, 
			methods:{
    
    
				changeVal(e) {
    
    
					// console.log(e.target.value);
					// 修改txtVal的值
					// this.txtVal = 用户输入的内容
					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"/>

八、(重点)数组常用的操作(方法)

8.1、常用方法使用

push       pop       unshift       shift       splice       concat

 var arr = [1, 2, 3]

         let length =  arr.push(4); // 给最后面添加元素,返回数组长度
         
		 let length = arr.unshift(5); // 给最前面添加元素,返回数组长度
		 
		 let last = arr.pop(); // 删除最后一个元素, 返回被删除的元素
		 
		 let first = arr.shift() // 删除第一个元素, 返回被删除的元素
		 
		// let ret = arr.splice(要操作的元素的下标, 要删除的个数, 要增加的元素)
		 let ret = arr.splice(2,1 ,7,8,9 ) // 返回的是删除的元素组成的数组			
		 console.log(arr, ret)
		
		let ret = arr.concat([7, 8, 9, 10])
		console.log(arr,ret); // 返回合并后的新数组
		
		console.log([...arr, ...[7,8,9,10]]);

8.2、filter、map

 var arr = [1, 2, 3];
		
		// filter
		let newArr = arr.filter((item, index, self) => {
   
   
			
			// 遍历数组中每一个元素,每遍历一次元素就执行1遍
			// item 就是当前遍历到的元素
			// return 过滤条件  (满足我们需求的条件)
			// index 表示当前遍历到的这个元素的索引
			// self 表示当前遍历到的这个数组arr
			return item > 2
		})
		console.log(newArr);


       // map
	   let newArr2 = arr.map(item => {
   
   
		   // 遍历数组中每一个元素,每遍历一次元素就执行1遍
		   // item 就是当前遍历到的元素
		   // return {id:item}
		   return item*2
	   })
	   console.log(newArr2);

8.3、数组去重

<script>
			var arr2 = [1, 2, 3, 1, 6, 2, 3]

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


			// 古老方法
			let newArr = [];
			for (var i = 0; i < arr2.length; i++) {
   
   
				if (newArr.indexOf(arr2[i]) == -1) {
   
   
					newArr.push(arr2[i])
				}
			}
			
			// filter方法
			
			// 第1个元素-不重复元素 arr2.indexOf(1) 0  0
			// 第2个元素-不重复元素 arr2.indexOf(2) 1  1
			// 第3个元素-不重复元素 arr2.indexOf(3) 2  2
			// 第4个元素-重复元素 arr2.indexOf(1)   0  3
			// 第5个元素-不重复元素 arr2.indexOf(6) 4  4
			let newArr2 = arr2.filter((item, index, self) => {
   
   
				// return 满足的条件 (不重复的数据的特点)
				// console.log(self);
				return self.indexOf(item) == index
			})
			console.log(newArr2);
		</script>

九、(重点)Vue的过滤器和全局过滤器

9.1、过滤器的使用

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>

9.2、全局过滤器

多个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>

十、图书购物车例子

在这里插入图片描述

<div id="app">
        <table>
            <thead>
                <tr >
                    <th v-for="(title, tidx) in titles" :key="tidx">{
  
  {title}}</th>
                  
                </tr>
            </thead>
            <tbody>
                <tr v-for="(book,bidx) in books" :key="book.name">
                    <td>{
  
  {bidx}}</td>
                    <td>{
  
  {book.name}}</td>
                    <td>{
  
  {book.price}}</td>
                    <td>{
  
  {book.date}}</td>
                    <td>
                        <button @click="sub(bidx)">-</button>
                        {
  
  {book.num}}
                        <button @click="add(bidx)">+</button>
                    </td>
                    <td>
                        <button @click="remove(bidx)">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>总价格:{
  
  {total}}</div>
    </div>
    <script>
        new Vue({
    
    
            el: '#app',
            data: {
    
    
                titles: ['编号', '书籍名称', '出版日期', '价格', '数量', '操作'],
                books: [
                    {
    
    
                        name: '算法导论',
                        date: '2006-9',
                        price: 85,
                        num: 1
                    },
                    {
    
    
                        name: 'UNIX编程艺术',
                        date: '2006-2',
                        price: 59,
                        num: 1
                    },
                    {
    
    
                        name: 'Vue程序设计',
                        date: '2008-10',
                        price: 35,
                        num: 1
                    },
                    {
    
    
                        name: '颈椎康复',
                        date: '2006-3',
                        price: 129,
                        num: 1
                    },
                ]
            },
            // 定义方法的地方
            methods: {
    
    
                add(idx) {
    
    
                    console.log(idx)
                    this.books[idx].num++
                },
                sub(idx) {
    
    
                    if (this.books[idx].num) {
    
    
                        this.books[idx].num--
                    }
                    
                },
                // 移除方法
                remove(idx) {
    
    
                    // 修改 增加 删除(下标, 删除数量, .....增加的元素)
                    this.books.splice(idx, 1)
                }
            },
            // 计算属性
            computed:{
    
    
                total() {
    
    
                    return this.books.reduce((pre, current) => {
    
    
                        return pre + current.price * current.num
                    }, 0)//总价格
                }
            }
        })
    </script>

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部