VUE基础知识笔记

最新推荐文章于 2023-08-23 11:04:40 发布

暮光倾城~

最新推荐文章于 2023-08-23 11:04:40 发布

阅读量285

点赞数

本文链接：https://blog.csdn.net/qq_45456294/article/details/119595120

版权

VUE

vue双向绑定与事件处理（模型跟视图）
双向绑定v-model：视图中的数据发生改变，模型中的数据亦会发生改变，相反也是
事件处理v-on：click通过点击触发事件


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="test">
    <h2>这个人的名字是{{name}}</h2>
    <input type="text" v-model="num" /><input type = "button" value="增一" v-on:click = "num++"><input type = "button" value="减一" v-on:click = "num--">
    <h2>这个人有{{num}}个女朋友</h2>
  </div>
</body>
  <script type = "text/javascript">
  	var test = new Vue({
      el:"#test",
      data:{
      name:"徐伟康",
      num:1
    }
    });
  </script>
</html>

vue实例生命周期跟钩子函数
钩子函数：在创建vue实例的时候可以指定模板id、数据和方法，如果在实例化、渲染模板的过程中需要执行一些其他操作，可以使用钩子函数
钩子函数会在vue实例的各个生命周期阶段自动调用，具体有：beforeCreate，created，beforeMount，mounted，updated，beforeupdate，destory，beforeDestory
created钩子函数常用场景：用于初始化数据


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>钩子函数</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id="test">
      <h2>{{msg}}</h2>
  	</div>
</body>
  <script type= "text/javascript">
    var test = new Vue({
      el:"#test",
      data:{
        msg:""
      },
      created:function(){
   		this.msg = "hello world vue .created";
  		alert(this);
    }
   /*
   ECMAScript 6之后可以这样使用
   create(){
    }
    */
    });
  </script>
</html>

插值、v-text和v-html
插值：插值可以使用在需要显示vue实例数据的地方，可以在插值表达值中调用实例的数据属性和函数
v-text和v-html的作用：可以将数据在模板中进行显示
区别：v-html会对内容中出现的html标签进行渲染，而v-text会将内容作为普通文本输出到元素里面


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>钩子函数</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id="test">
      v-text: <p v-text = "msg"></p>
      v-html: <p v-html = "msg"></p>
      </p>
  	</div>
</body>
  <script type= "text/javascript">
    var test = new Vue({
      el:"#test",
      data:{
        msg:"<h2>徐伟康</h2>"
      },
    });
  </script>
</html>

v-model

双向选择，视图可以改变模型中的值，反之模型也可以改变视图中的值
多个checkbox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型，radio对应的值是input的value值，input和textarea默认对应的model是字符串，select单选对应字符串，多选对应的是数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model的使用</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id="test">
      <input type="checkbox" value="JAVA" v-model="msg"/>JAVA<br />
      <input type="checkbox" value="MYSQL" v-model="msg"/>MYSQL<br />
      <input type="checkbox" value="HTML" v-model="msg"/>HTML<br />
      <h2>
        你选择了：{{msg.join(",")}}
      </h2>
  	</div>
</body>
  <script type= "text/javascript">
    var test = new Vue({
      el:"#test",
      data:{
        msg:[]
      }
    });
  </script>
</html>

5.v-on的使用以及事件修饰符
在没有vue之前，页面可以通过onXxx响应事件;在vue中可以通过v-on指令响应事件
常用修饰符：
stop：阻止事件冒泡
pravent：阻止默认事件发生
capture：使用事件捕获模式
self：只有元素自身触发事件才执行（冒泡或者捕获的都不执行）
once：至执行一次

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on的使用</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id="test">
      <input type="button" value="增加" v-on:click="msg++" />
      <input type="button" value="减少" @click="decrement"/>
      <h2> 数值是：{{msg}}</h2>
      <hr />
        事件冒泡测试：<br />
      	 <div style="background-color: lightblue;width: 100px;height:100px" @click="print('这是div')">
     		 <button @click.stop="print('这是button')">点我</button>
      	 </div>
      <hr />
      阻止默认事件发生：<br />
      <a href="https://www.baidu.com"@click.prevent="print('这是超链接')">baidu</a>
  	</div>
</body>
  <script type= "text/javascript">
    var test = new Vue({
      el:"#test",
      data:{
        msg:1
      },
      methods: {
            decrement:function(){
			this.msg--;
        },
        	print:function(str){
              console.log(str);
            }
      }
    });
  </script>
</html>

6.v-for
便利对象
1 v-for=“value in object”
2 v-for="(value,key) in object"
3 v-for="(value,key,index) in object"
1个参数时,得到的是对象的值
2个参数时,第一个是值,第二个是键
3个参数时,第三个是索引,从0开始
便利数组
v-for=“item in items”
items:要遍历的数组,需要在vue的data中定义好。
item:循环变量
要索引时，索引也要写在参数中
v-for="(item,value) in items"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="test">
    <ul>
    <li v-for="(user,index) in users">
    	{{index}}--{user.name}}--{{user.age}}--{{user.gender}}
    </li>
      <hr />
      <li v-for="(value,key,index) in person">
      {{index}}--{{key}}--{{value}}
      </li>
    </ul>
  </div>
</body>
  <script type="text/javascript">
  	var test = new Vue({
      el:"#test",
      data:{
        users:[
          {"name":"向外看","age":13,"gender":"男"},
          {"name":"不久前","age":15,"gender":"女"},
          {"name":"需要吗","age":18,"gender":"男"}
        ]
        ,person:{"name":"xwk","age":18,"gender":"男"}
      }
      
    });
  </script>
</html>

v-if,v-show
v-if：条件不满足的时候，元素不在
v-show：条件不满足时只是对元素进行隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="test">
    <button @click="show=!show">点我</button>
    <h2 v-if="show">hello Vue</h2>
    <ul>
    <li v-for="(user,index) in users">
      <p v-if="user.gender=='女'" style="background-color:pink">{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}</p>
      <p v-else="user.gender=='男'" style="background-color:gray">{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}</p>
    </li>
    </ul>
    <hr/>
    <h2 v-show="show">
      你好 唯有一
    </h2>
  </div>
</body>
  <script type="text/javascript">
  	var test = new Vue({
      el:"#test",
      data:{
        show:true,
        users:[
          {"name":"向外看","age":13,"gender":"男"},
          {"name":"不久前","age":15,"gender":"女"},
          {"name":"需要吗","age":18,"gender":"男"}
        ]
      }
      
    });
  </script>
</html>

v-bind
可以对所有元素的属性设置vue实例的数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <style type="text/css">
    div {
      	width:100px;
        height:100px;
      	color:black;
    }
   .red {
      background-color:red;
    }
   .gray {
      background-color:gray;
    }
  </style>
</head>
<body>
  <div id="test">
    <button @click="color='red'">red</button>
    <button @click="color='gray'">gray</button>
    <div v-bind:class="color">
    点击按钮改变颜色{{name}}
    </div>
  </div>
</body>
  <script type = "text/javascript">
  	var test = new Vue({
      el:"#test",
      data:{
      	color:"red",
        name:"xwk"
    }
    });
  </script>
</html>

9.计算属性的使用
computed计算属性的应用场景：可以应用在插值或者指令表达式复杂的时候，可以将一些属性数据经过方法处理之后返回（跟方法中的名字不能重复）
计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="test">
    <h2> 
    	你的生日是：
      	{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
    </h2>
    <hr />
    <h2>
      你的生日是：
      {{birth}}
    </h2>
  </div>
</body>
  <script type="text/javascript">
  	var test = new Vue({
       el:"#test",
       data:{
         birthday:1429032123201
       },
      computed:{
      birth(){
        const date = new Date(this.birthday);
        return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDay();
      }
    }
    });
  </script>
  
  
</html>

10.watch基本和深度监控
使用场景：可以监控视图中数据的变化而做出响应;如：下拉框列表中，当如果选择了对应的下拉框选项之后，要根据最新值去加载一些其他数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="test">
   	<input type="text" v-model="name"/>
    <hr />
    <input type="text" v-model="person.name" /><br>
    <input type="text" v-model="person.age" /><button @click="person.age++">+</button>
  </div>
</body>
  <script type="text/javascript">
  	var test = new Vue({
       el:"#test",
       data:{
         name:"向外看",
         person:{"name":"xwk","age":18} 
       },
      watch:{
      name(newValue,oldValue){
      	console.log("新值:"+newValue+"旧值:"+oldValue);
    },
        person:{
        //开启深度监控，监控对象中的属性值变化
        deep: true,
        //可以获取到最新的对象属性数据
        handler(obj){
      		console.log("name ="+obj.name+";age ="+obj.age);
    }
      }
    }
    });
  </script>
  
  
</html>

组件使用
组件的使用场景：在项目需要重用某个模块（头部、尾部、新闻…）的时候，可以将模块抽取成组件，其他页面中注册组件并使用.

全局注册：在任何vue实例中都可以引用，如：一般网站的头部导航菜单
局部注册：可以在有需要的页面引入组件，如：商城网站首页页面中各种活动模块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="test">
    <!-- 使用组件 -->
    <counter></counter>
    <counter></counter>
    <counter></counter>
   
  </div>
</body>
  <script type="text/javascript">
    //定义组件
    const counter = {
      template:"<button @click='num++'>你点击了{{num}}次</button>",
      data(){
        return {num:0}
      }
    };
    //全局注册组建：在所有的vue实例中都可以使用组建
    //参数1：组件名称，参数2：具体的组件
    //Vue.component("counter",counter);
    
  	var test = new Vue({
       el:"#test",
    	//局部注册组件
      components:{
      	counter:counter
    }
    });
  </script>
  
  
</html>

父子组件传递数据

简单传递数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="test">
 <!-- 使用组件 -->
    <introduce :title="msg"></introduce>
  </div>
</body>
  <script type="text/javascript">
   //定义组件
    const introduce = {
      template:"<h2>{{title}}</h2>",
      //接受父组件的属性
      props:["title"]
    };
    
    Vue.component("introduce",introduce);
  	var test = new Vue({
       el:"#test",
    	//局部注册组件
      data:{
        msg:"父组件的msg属性数据内容"
      }
    });
  </script>
</html>

数组传递

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="test">
 <!-- 使用组件 -->
    <my-List :items="lessons"></my-List>
  </div>
</body>
  <script type="text/javascript">
   //定义组件
    const myList = {
      template:`
      <ul>
      <li v-for="item in items" :key="item.id">{{item.id}}--{{item.name}}</li>
     </ul>
	`,
      //定义接受父组件的属性
      props:{
        items:{
        	//数据类型，如果是数组则是Array，如果是对象则是Object
          type:Array,
          //默认值
          default:[]
      }
      }
    };
    
  	var test = new Vue({
       el:"#test",
    	data:{
          msg:"父组件的msg属性内容",
          lessons:[
            {"id":1,"name":"向外看"},
            {"id":2,"name":"不久前"},
            {"id":3,"name":"来源于"}
          ]
        },
      components:{
        myList
      }
    });
  </script>
</html>

子组件向父组件通信

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<div id="app">
    <h2>num = {{num}}</h2>
    <!--使用组件-->
    <counter @plus="numPlus" @reduce="numReduce" :snum="num"></counter>
</div>
<script type="text/javascript">

    //定义组件
    const counter = {
        template:`
            <div>
            <button @click='incrNum'>+</button>
            <button @click='decrNum'>-</button>
            </div>
        `,
        props:["snum"],
        methods:{
            //递增
            incrNum(){
                //调用到父组件中的方法
                return this.$emit("plus");
            },
            decrNum(){
                //调用到父组件中的方法
                return this.$emit("reduce");
            }
        }
    };

    //全局注册组件：在所有的vue实例中都可以使用组件
    //参数1：组件名称，参数2：具体的组件
    //Vue.component("counter", counter);

    var app = new Vue({
        el:"#app",
        components:{
            counter: counter
        },
        data:{
            num:0
        },
        methods:{
            numPlus(){
                this.num++;
            },
            numReduce(){
                this.num--;
            }
        }
    });
</script>

</html>

axios
axios的用途及了解常见方法
axios的作用：发送异步请求获取数据。常见的方法：get，post;在发送的时候可以指定参数（地址、请求方式和请求头部信息）;返回数据结构（data/status/statusText/headers/config）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
        <div id="app">
           <div> {{info.name}}</div>
        </div>
</body>
    <script >
            var  app =  new Vue({
                el:"#app",
                data(){
                    return{
                        info:{
                            name:null
                        }
                    }
                },
                mounted(){
                    axios.get('data.json').then(response=>(this.info=response.data))
                }
            });
    </script>
</html>

json数据

{
    "name": "xwk",
    "age":18,
    "address":{
        "street":"qslt",
        "city": "suzhou",
        "country" :"china"
    }
}

插槽slot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
        <div id="app">
                <todo>
                        <todo-title slot="todo-title" :title="title"></todo-title>
                        <todo-items slot="todo-items" v-for = "item in todoItems" :item="item"></todo-items>
                </todo>
        </div>
</body>
    <script type="javascript">
        Vue.component("todo",{
            template:
            '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                        <slot name="todo-items"></slot>\
                    </ul>\
                </div>'
        });
        Vue.component("todo-title",{
            props: ['title'],
            template:'<div>{{title}}</div>'
        });
        Vue.component("todo-items",{
            props: ['item'],
            template:'<div>{{item}}</div>'
        });
        var app = new Vue({
            el:"#app",
            data:{
                title:"xwk",
                todoItems: ['1','2','3']
            }
        });
           


    </script>
</html>

自定义事件内容分发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
        <div id="app">
                <todo>
                        <todo-title slot="todo-title" :title="title"></todo-title>
                        <todo-items slot="todo-items" v-for = "(item,index) in todoItems" :item="item" :index="index" @remove="removeItems(index)" ></todo-items>
                </todo>
        </div>
</body>
    <script >
        Vue.component("todo",{
            template:
            '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                        <slot name="todo-items"></slot>\
                    </ul>\
                </div>'
        });
        Vue.component("todo-title",{
            props: ['title'],
            template:'<div>{{title}}</div>'
        });
        Vue.component("todo-items",{
            props: ['item','index'],
            template:'<li>{{item}}<button @click="remove">delete</button></li> ',
            methods: {
                remove :function (index) {
                    this.$emit('remove', index);
                }
            }
        });
        var app = new Vue({
            el:"#app",
            data:{
                title:"xwk",
                todoItems: ['1','2','3']
            },
            methods: {
                removeItems : function(index){
                    this.todoItems.splice(index,1);
                }
            }
        });
    </script>
</html>

暮光倾城~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE基础知识笔记

VUEvue双向绑定与事件处理（模型跟视图）双向绑定v-model：视图中的数据发生改变，模型中的数据亦会发生改变，相反也是事件处理v-on：click通过点击触发事件<!DOCTYPE html><html><head><meta charset="utf-8"><title>文档标题</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue
复制链接

扫一扫