[JavaScript知识库] VUE基础知识笔记

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> VUE基础知识笔记 -> 正文阅读

[JavaScript知识库]VUE基础知识笔记

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>