vue基础入门笔记

最新推荐文章于 2023-08-21 20:16:49 发布

原创最新推荐文章于 2023-08-21 20:16:49 发布 · 575 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

27 篇文章

订阅专栏

js获取元素值方式：

document.getElementById("xxidxx").innerHTML

插值：

{{msg}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<!--mvvm-->
<body>
    <div id="app">
        <!--三种类型-->
        <!--1、直接赋值-->
        <p>{{msg}}</p>

        <!--根据bool条件判断赋值-->
        <!-- 三元运算符 -->
        <p>{{true?"yes":"no"}}</p>

        <!--计算-->
        <p>{{3.1415926*2165}}</p>
    </div>
    <script>
        var vm=new  Vue({
            el:'#app',
            data:{
                msg:'aaaaaaaaa'
            }
        })
    </script>
</body>


</html>

按钮事件绑定：

v-on:click和methods:

event.keyCode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">

        <p>{{msg}}</p><br>
        <button  v-on:click="fun1('click')">vue click</button>

    </div>
    <script>
        var vm=new  Vue({
            el:'#app',
            data:{
                msg:'msg vue'
            },
            methods:{
                fun1:function (message) {
                    alert(message);
                    this.msg=message

                }
            }

        })
    </script>
</body>
</html>

输入，键盘按键：

v-on:keydown

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:keydown</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			Vue:<input type="text" v-on:keydown="fun($event)">
			<hr/>
			传统JS：<input type="text"  onkeydown="showKeyCode()"/>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
			    /* $event 它是vue中的事件对象  和我们传统js的event对象是一样的  */
			    fun:function(event){
                    var keyCode = event.keyCode;
					/*输入的为数字控制,字节码为48-57*/
                    if(keyCode < 48  || keyCode > 57){
                        //不让键盘的按键起作用
                        event.preventDefault();
                    }
				}
			}
		});


		//传统js的键盘按下事件
		function showKeyCode(){
			//event对象和我们的document对象以及window对象是一样的，可以不用定义直接使用
			var keyCode = event.keyCode;
			if(keyCode < 48  || keyCode > 57){
				//不让键盘的按键起作用
				event.preventDefault();
			}
			// alert(keyCode);
			// if(event.keyCode == 13){
			//     alert("你按的是回车");
			// }
		}
	</script>
	
	

</html>

鼠标控制,事件传播：移入移出，以及阻止div关联事件的触发例如文本域textarea，无需触发div

v-on:mouseover

event.stopPropagation();

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:mouseover</title>
		<style>
			#div {
				background-color: red;
				width:300px;
				height:300px;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<div @mouseover="fun1" id="div">
				<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
			</div>

			<!--<div onmouseover="divmouseover()" id="div">
				<textarea onmouseover="textareamouseover()">这是一个文件域</textarea>
			</div>-->
		</div>
	</body>
	<script>
		//view model
        /**
		 * @事件名称  就是  v-on:事件名称的简写方式
		 * @mouseover它就等同于v-on:mouseover
         */
		new Vue({
			el:"#app",
			methods:{
				fun1:function(){
				    alert("鼠标悬停在div上了");
				},
				fun2:function(event){
				    alert("鼠标悬停在textarea上了");
                    event.stopPropagation();
				}
			}
		});


		//传统的js方式
		function divmouseover(){
		    alert("鼠标移动到了div上了");
		}

		function textareamouseover(){
		    alert("鼠标移动到了textarea上了");
		    event.stopPropagation();
		}
	</script>

</html>

表单验证

@submit.prevent

//表单验证必须有一个明确的boolean类型返回值
//在应用验证方法时必须加上 return  方法名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
       <!-- <form action="www.baidu.com" method="get" @submit.prevent="return fun1()">
            姓名：<input type="text" name="username"/><br>
            密码：<input type="text" name="password"/><br>
            <input type="submit" value="表单提交"/>
        </form>-->
        <form action="www.baidu.com" method="get" onsubmit="return fun1">
            姓名：<input type="text" name="username"/><br>
            密码：<input type="text" name="password"/><br>
            <input type="submit" value="表单提交"/>
        </form>
    </div>


<script>
    var vm=new Vue({
        el:'#app',
        methods:{
            fun1:function () {
                alert("22");
                return true;
            }
        }
    })

</script>
</body>
</html>

@mouseover.stop

event.stopPropagation();和@mouseover.stop相等，阻止事件传播

v-on:按键修饰符

如按了回车键，删除键等出发function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

<div id="app">
    根据按键盘按键转字节码触发方法：<input type="text" name="code" @keydown.enter="fun1()"/>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        methods:{
            fun1:function () {
                alert("@keydown.enter")
            }
        }
    })
</script>
</body>
</html>

v-text 和 v-html的区别

等同于

传统js的innerText和innerHTML

text不会去解析标签，html会解析渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <div v-text="msg"></div>
        <div v-html="msg"></div>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"<p>my vue message</p>"
            }
        })
    </script>
</body>
</html>

补充传统js方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-text="message"></div>
			<div v-html="message"></div>
			<!--<div id="div1"></div>
			<div id="div2"></div>-->
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			    message:"<h1>Hello Vue</h1>"
			}
		});

		//传统js的innerText和innerHTML
		window.onload = function(){
		    document.getElementById("div1").innerHTML="<h1>Hello</h1>";
            document.getElementById("div2").innerText="<h1>Hello</h1>";
		}
	</script>
</html>

v-bind的使用：用于设置html标签属性
不能用插值表达式，语法错误

v-bind可以省略，但是冒号：不能省略
v-bind:size等价于   :size="mySize"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <!--html标签，传统方式，设置属性-->
        <h3><font size="5" color="#7fffd4">aaaaa</font></h3>

        <!--vue插值表达式方式，语法错误-->
        <!--<h3><font size="{{mySize}}" v-bind:color="{{col}}">bbb</font></h3>-->
        <!--vue正确方式 v-bind可以省略-->
        <h3><font v-bind:size="mySize" v-bind:color="col">ccc</font></h3>
        <h3><font :size="mySize" :color="col">dddddddd</font></h3>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                col:"red",
                mySize:8
            }
        })
    </script>
</body>
</html>

取vue对象数据

v-model

分输入框和非输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

    <div id="app">
        <!--非输入标签-->
        <p>{{user.username}}</p><br>
        <p>{{user.password}}</p><br>

        <!--普通模式-->
        <input type="text" name="username1" value="11"><br>
        <!--输入标签赋值-->
        <input type="text" name="username2" v-model:value="user.username"><br>
        <input type="text" name="password" v-model:value="user.password">

    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                user:{
                    username:"zhangsan",
                    password:"abc132"
                }

            },
            methods:{}
        })
    </script>
</body>
</html>

v-for遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">索引：{{index}},元素：{{item}}</li>
        </ul>

    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                arr:["zhangsan","lisi","wangwu"]
            }
        })
    </script>
</body>
</html>

v-for遍历对象

例1：单个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for遍历数组</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(key,value) in prd">{{key}}===>{{value}}</li>
        </ul>
    </div>

<script>
    new Vue({
        el:"#app",
        data:{
            prd:{
                username:"zhangsan",
                password:"das",
                age:12,
                adress:"hangzhou"
            }
        }
    })
</script>
</body>
</html>

例2：对象数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象数组</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <table border="1">
            <tr>
                <td>索引</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
            </tr>
            <tr v-for="(product,index) in products">
                <td>{{index}}</td>
                <td>{{product.username}}</td>
                <td>{{product.age}}</td>
                <td>{{product.adress}}</td>
            </tr>
            <!--<li v-for="(product,index) in products"></li>-->
        </table>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                products:[
                    {username:"zhang1",age:19,adress:"shanghai"},
                    {username:"lisi",age:12,adress:"hangzhou"},
                    {username:"xiongda",age:13,adress:"guangzhou"},
                    {username:"xionger",age:11,adress:"beijing"},

                ]
            }
        })
    </script>
</body>
</html>

v-if操控dom元素的显示隐藏
v-if与v-show动态控制dom元素显示隐藏

手段：

v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

编译过程：

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

设置都为true时编译：

切换v-if:

编译后<h3>标签直接被删除：

切换v-show:

编译后：v-show的<h3>标签还在，style变成了display:none 即不显示

总结：

编译条件：

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
性能消耗：

v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
使用场景：

v-if适合运营条件不大可能改变；v-show适合频繁切换。

vuejs生命周期

1.vue的生命周期

简单的说生命周期就是事物从产生到消失的一个时间过程。那么vue的生命周期就是从其被创建到销毁的过程，其中包含了开始创建、初始化数据、编译模板、挂载dom（渲染），渲染->更新->渲染、销毁（卸载）等一系列过程。

那么其中的钩子函数都担负着自己的职责，较为常用的就是created和mounted函数，可以在函数中编写相关的业务逻辑。

2.钩子函数

beforeCreate

在实例初始化之后，数据观测和事件、生命周期初始化配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测，属性和方法的运算，事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用，此时有了虚拟DOM。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子，渲染为真实DOM。

beforeUpdate

在数据更新之前时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

值得注意的是：该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。此时，实例仍然是可用的。

destroyed

vue 实例销毁后调用。调用后，vue 实例指示的所有东西都会解绑，所有的事件监听器会被卸载移除，所有的子实例也会被销毁。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>vuejs生命周期</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				message: 'hello world'
			},
			beforeCreate: function() {
				console.log(this);
				showData('创建vue实例前', this);
			},
			created: function() {
				showData('创建vue实例后', this);
			},
			beforeMount: function() {
				showData('挂载到dom前', this);
			},
			mounted: function() {
				showData('挂载到dom后', this);
			},
			beforeUpdate: function() {
				showData('数据变化更新前', this);
			},
			updated: function() {
				showData('数据变化更新后', this);
			},
			beforeDestroy: function() {
				vm.test = "3333";
				showData('vue实例销毁前', this);
			},
			destroyed: function() {
				showData('vue实例销毁后', this);
			}
		});

		function realDom() {
			console.log('真实dom结构：' + document.getElementById('app').innerHTML);
		}

		function showData(process, obj) {
			console.log(process);
			console.log('data 数据：' + obj.message)
			console.log('挂载的对象：')
			console.log(obj.$el)
			realDom();
			console.log('------------------')
			console.log('------------------')
		}
		// vm.message = "good...";
		vm.$destroy();
	</script>

</html>