资讯详情

vue笔记

<body> <div id="first" class="aa">    <h1>{ 
       { 
       msg}}</h1>    <h1>{ 
       { 
       context.toUpperCase()}}</h1>    <h1>{ 
       { 
       msg}}</h1>    <h1>{ 
       { 
       num 1}}</h1> </div> </body> </html>   <script src="js/vue.js"></script>  <script>     new Vue({ 
                /*el:"#first",*/         el:".aa",         data: { 
                    msg:"赵翔",             context:"abc",             num:123         },     }); </script>

推荐使用id选择器 绑定在<div>上 { {}取值 也可以进行逻辑运算 算术运算 方法调用

data属性

用来Vue实例定义一系列数据

对象

<script>    
new Vue({ 
               
	el:"#app", 
	data:{ 
               
		user:{ 
        id:1,name:"赵翔",age:22},  
	},  
});
</script>

获取：{ 
        { 
        user}}		{ 
        { 
        user.id}}

数组

school:["北京","天津","南京"]

获取数组：
<h3>{ 
        { 
        school}}</h3>
<h3>{ 
        { 
        school[0]}}</h3>
<h3>{ 
        { 
        school[0].length}}</h3>

v-text 和 v-html 指令的使用

作用：用来获取data中数据

<h1 v-text="hello"></h1>

{ 
        { 
        }} 又叫插值表达式
{ 
        { 
        }} 取值和v-text的区别：   
1、{ 
        { 
        }} 取值不会将标签原始数据情空  v-text取值会清空标签原始数据  
2、{ 
        { 
        }} 取值存在插值闪烁  v-text或者v-html不存在插值闪烁
	网络较差情况下会出现加载缓慢的情况

区别

1、使用v-text取值 是将获取数据直接渲染到指定标签中
2、使用v-html取值 是先将获取的数据进行html标签解析，解析后再渲染到指定标签

结果：

你好

你好

v-on

js中事件（event）：时间三要素：       
事件源（页面中发生特定动作的html标签）   
事件（发生的特定动作 单机事件onclick 双击事件ondblclick） 监听器（事件处理程序 一般在js中指的是处理函数 function(){ 
        }）   

v-on指令  用来给页面绑定事件    
1、在对应的标签上使用v-on：事件名="处理事件函数名"


<button v-on:click="test">点我</button>
   methods:{ 
          //用来vue实例绑定一些函数 方法
            test:function () { 
        
                alert("我爱你");
            }
        }

this获取data属性，再 . 来获取对应的属性来获取数据

可以通过this再调用其他的method

<div id="app">    
<button v-on:click="test" v-on:click="aa">点我</button> 
<h3>{ 
        { 
        count}}</h3>
</div>

<script>
    new Vue({ 
        
        el:"#app",
        data:{ 
        
            content:"我爱你",
            count:0
        },
        methods:{ 
        
            test:function () { 
        
                //如何在vue定义方法中获取data的数据
                //点击按钮获取count+1后的值
                console.log(this.count);
                this.count++;
                this.aa();
            },
            aa:function () { 
        
                console.log("aa")
            }
        }
    });
</script>

<button v-on:click="add2">点我每次加1  并且在content后面加字符串“你好”</button>
<button v-on:click="add3(10,'爱')">点我每次传参加  并且在content后面加字符串 传参</button>
<button v-on:click="add4({count:2,msg:'i love u'})">点我每次传对象</button>

 add2:function () { 
        
                this.count++;
                this.content+="你好";
            },
            add3:function (param,msg) { 
        
                this.count+=param;
                this.content+=msg;
            },
            add4:function(object){ 
        
                this.count+=object.count;
                this.content+=object.msg;
            }

v-on简化写法

@事件名：事件处理函数名

v-on:click="add2" ====> @click:"add2"

<button @click="test">点我简化v-on</button>
  test(){ 
        
            this.count+=4;
            }
# 这里也可以对函数进行简化 省略		：function

v-if 和 v-show

v-if    v-show  用来控制标签是否展示还是隐藏
    语法：  
    v-if="true|false"   v-show="true|false"   
        true显示 false隐藏    
可以写死，也可以在vue的data中获取boolean值来进行动态绑定

区别：   
1、v-if 	   底层通过控制dom树上元素节点实现  页面标签展示和隐藏   
2、v-show   底层通过控制标签css中display属性实现标签展示和隐藏
    
v-if有更高的切换开销 而v-show有更高的初始渲染开销
    所以，如果需要非常频繁的切换，就使用v-show
    如果在运行时条件很少改变，则使用v-if较好


<h3 v-if="msg">你好</h3>
<h3 v-show="msg">你好</h3>
    
     msg:false
         
//结果
<h3 style="display: none;">你好</h3>
         
         v-if直接在dom中砍掉了
         v-show会保留css样式

​

v-if和v-show案例

<h2 v-if="isShow">{ 
        { 
        msg}}</h2>
    <button @click="show">点我显示h2</button>
    <button @click="hide">点我隐藏h2</button>
    <button @click="change">点我显示|隐藏h2</button>
    
  //可以直接在click中直接获取data的属性进行操作 
<button @click="isShow =! isShow">点我显示|隐藏h2</button>
      new Vue({ 
        
        el:"#app",
        data:{ 
        
            count:0,
            msg:"hello ,vue",
            isShow:true
        },
        methods:{ 
        
            show(){ 
        
                this.isShow = true;
            },
            hide(){ 
        
                this.isShow = false;
            },
            change(){ 
        
                this.isShow =!this.isShow;
            }
        }
    });

v-bind 绑定

  <!--            v-bind:绑定 作用：将html中标签交给vue实例进行管理            好处：可以通过修改vue实例中绑定的属性达到动态修改标签属性的效果        -->
<!--<img src="https://inews.gtimg.com/newsapp_bt/0/11919291288/641" width="300px" height="300px"/>-->
      
      
      //使用v-bind绑定
      <img v-bind:src="src" width="300px" height="300px"/>
           data:{ 
        
   src:"https://inews.gtimg.com/newsapp_bt/0/11919291288/641"
        },

动态修改图片大小

<img v-bind:src="src" v-bind:width="width" v-bind:height="height"/>
<button @click="change">点我更换图片</button>  
    
     data:{ 
                			src:"https://inews.gtimg.com/newsapp_bt/0/11919291288/641",
            width:200,
            height:200,
        },
        methods:{ 
        
            change(){ 
        
                this.src="https://img2.baidu.com/it/u=738461655,2322345278&fm=253&fmt=auto&app=120&f=JPEG?w=641&h=427";
                this.height = 400;
                    this.width = 400;
            }
        }

v-bind class 样式绑定

可以使用三目运算符实现动态绑定

<div v-bind:class="css?'aa':'bb'"></div>
 <button @click="changeAA">点击更换AA样式</button>
    <button @click="changeBB">点击更换BB样式</button>
    
      methods: { 
        
           changeAA() { 
        
                this.css = true;
            },
            changeBB() { 
        
                this.css = false;
            }

v-bind 简化写法

省略v-bind 只留下 ：

<div :class="css" @mouseover="css='aa'" @mouseout="css='bb'"></div>

v-for【重要】

1、遍历对象

<span v-for="value,key,index in user">  
    [{ 
        { 
        index}} { 
        { 
        key}} { 
        { 
        value}}]</span>
    
    语法：v-for:"value key index in 变量名"
    这里v-for中的顺序要反过来写
    
     user:{ 
        id:22,name:"赵翔",age:22}

2、遍历数组

<h1>遍历数组</h1>
    <ul>    
    	<li v-for="item,index in school">        		            			{ 
        { 
        index+1}}----{ 
        { 
        item}}</li> 
            </ul>

遍历数组对象

<table border="1px" width="100%">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
//每次遍历出来是一个user对象 :key="user.id" 为了给vue更好的提示
        <tr v-for="user,index in users" :key="user.id">
            <td>{ 
        { 
        user.id}}</td>
            <td v-text="user.name"></td>
            <td v-html="user.age"></td>
        </tr>
    </table>
                     

users:[   
    { 
        id:1,name:"zx",age:22},
    { 
        id:2,name:"zx",age:22}, 
    { 
        id:3,name:"zx",age:22},  
    { 
        id:4,name:"zx",age:22},
]

v-model

作用：用来将html标签的value属性绑定，交给vue实例进行管理（主要用在表单元素上，最能体现双向绑定机制的一个指令 mvvm）

​ v-bind是绑定除了value以外的所有属性

<input type="text" v-model="msg">
    
          msg:"你好"
              效果就是直接将你好放在input文本框中

<form action="">   
    用户名:<input type="text" v-model="user.username"><br> 
        密码:<input type="text" v-model="user.password"><br>  
            邮箱:<input type="text" v-model="user.email"><br>   
                qq:<input type="text" v-model="user.qq"><br> 
<input type="button" @click="reg" value="注册"/><br></form>
                    
          这里输入到文本框的数据会被v-model绑定value交给vue实例处理      
                    data:{ 
        
           user:{ 
        }
        },
                    methods:{ 
        
            reg(){ 
        
                console.log(this.user)

                //发送ajax请求
                $.post(url,this.user);
            }
        }

购物车

<div id="app">   
    <h1>{ 
        { 
        message}}</h1>
    <table border="1"> 
    <tr>     
        <td>编号</td>  
        <td>名称</td>   
        <td>价格</td>   
        <td>购买数量</td>    
        <td>小计</td>  
    </tr>       
    <tr v-for="item,index in items" :key="item.id">
        <td>{ 
        { 
        item.id}}</td>
        <td>{ 
        { 
        item.name}}</td> 
        <td>{ 
        { 
        item.price}}</td> 
        <td><input type="button" value="-" @click="minus(index)">&nbsp;&nbsp;{ 
        { 
        item.count}}&nbsp;&nbsp;<input type="button" value="+" @click="addCount(index)"></td>  
            <td>{ 
        { 
        (item.count * item.price).toFixed(2)}}</td>
            </tr>
            </table> 
            <h3>总价为：{ 
        { 
        (totalPrice()).toFixed(2)}}</h3>
        </div>
            </body>
     </html>
<script src="js/vue.js"></script><script> 
      new Vue({ 
         
          el:"#app",   
          data:{ 
            
         	 message:"购物车", 
          	 items:[     
                 { 
        id:1,name:"iphone12",price:2000.9,count:1},  
                 { 
        id:2,name:"iphone13",price:3000.2,count:1}   
             ],  
          },  
          methods:{ 
          
              addCount(index){ 
          
                  this.items[index].count++; 
              },     
              minus(index){ 
         
                   

        标签： gwk40温度传感器
 
锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台