Vue 学习总结笔记

Posted IT_Holmes

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 学习总结笔记相关的知识，希望对你有一定的参考价值。

文章目录

1. 使用Vue 写一个表单数据

在这提一句，在定义的checkbox中有一个属性为：checked，勾选了为true，没有勾选为false。

需要记住的几点：

1.@submit表单form一旦提交就会触发demo中的内容 ,提交后页面内容会自动跳转消失,这里我们可以用prevent来解决
2.label的for可以与input的id进行关联，点击账号就可以切换到input光标上面。
3.trim可以去除多余的空格，但是字符串中间的空格是无法去除的。
4.这里我们可以直接将input的type定义为number，达到输入数字的效果。在Vue提供给的v-model.number，在data中直接写成数字形式。
5.input设置为radio和name来设置单选和关联内容,注意v-model绑定的是value值，这里设置的是radio没有输入框，因此定义value值来传给data
6.这里如果我们不定义value属性,这里默认是得到的checked值,此外data中的hobby值必须是数组,不能定义字符串!!
7.我们在这定义v-model.lazy可以一口气输入完成内容，失去光标后，直接提交给data，而不是时时刻刻提交
8.这里的checkbox与上面不同,直接接受checked的值true或者false就可以了

上面内容配合下面源码定义：

<!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">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- @submit表单form一旦提交就会触发demo中的内容 ,提交后页面内容会自动跳转消失,这里我们可以用prevent来解决-->
        <form @submit.prevent="demo">
            <!-- label的for可以与input的id进行关联，点击账号就可以切换到input光标上面。 -->
            <!-- trim可以去除多余的空格，但是字符串中间的空格是无法去除的。 -->
            <label for="demo">账号：</label><input type="text" id="demo" v-model.trim="userInfo.account"><br>
            <label for="demo2">密码：</label><input type="password" id="demo2" v-model="userInfo.password"><br>
            <!-- 这里我们可以直接将input的type定义为number，达到输入数字的效果。 -->
            <!-- 在Vue提供给的v-model.number，在data中直接写成数字形式。 -->
            年龄：<input type="number" v-model.number="userInfo.age">
            <br>
            性别：
            <!-- input设置为radio和name来设置单选和关联内容 -->
            <!-- 注意v-model绑定的是value值，这里设置的是radio没有输入框，因此定义value值来传给data -->
            男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
            <br>
            爱好：
            <!-- 这里如果我们不定义value属性,这里默认是得到的checked值,此外data中的hobby值必须是数组,不能定义字符串!!-->
            学习<input type="checkbox" v-model="userInfo.hobby" value="学习">
            打篮球<input type="checkbox" v-model="userInfo.hobby" value="打篮球">
            打台球<input type="checkbox" v-model="userInfo.hobby" value="打台球">
            <br>
            所属校区
            <select v-model="userInfo.city">
                <option value="">请选择小区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shengzheng">深圳</option>
                <option value="guangdong">广东</option>
            </select>
            <br>
            其他信息：
            <!-- 我们在这定义v-model.lazy可以一口气输入完成内容，失去光标后，直接提交给data，而不是时时刻刻提交 -->
            <textarea v-model.lazy="userInfo.others"></textarea>
            <br>
            <!-- 这里的checkbox与上面不同,直接接受checked的值true或者false就可以了 -->
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a> 
            <button>提交</button>
        </form>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue(
            el:"#root",
            data:
                userInfo:
                    account:"",
                    password:"",
                    age:"",
                    sex:"",
                    hobby:[],
                    city:"beijing", //定义默认的话,可以直接写value的值.
                    others:"",
                    agree:""
                
            ,
            methods: 
                demo()
                    alert("数据已经提交");
                    console.log(JSON.stringify(this.userInfo));

                
            ,
        );
    </script>
</body>
</html>

2. Vue 过滤器

2.1 moment.js 和 day.js 的库

了解，一个专门处理日期的库，叫做moment.js。这个库对日期的操作很全面，但是体积很大。

还有一个轻量级的库叫做day.js。

day.js的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<script type="text/javascript" src="./js/dayjs.min.js"></script>
	</head>
	<body>
		
		<div id="root">
			<h2>显示格式化后的事件</h2>
			<h3>time时间戳转换后的是:fmtTime</h3>
			<h3>当前时间为:nowTime</h3>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			new Vue(
				el:"#root",
				data:
					//通过Date.now()方法获取到的时间戳。
					time:1642820009181,
				,
				computed:
					fmtTime()
						//这里就是调用了day.js库中的dayjs方法。
						//dayjs方法有个format函数来定义日期的格式化的。
						return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss");
					,
					nowTime()
						//也可以自己定义样式。
						return dayjs().format("YYYY年MM月DD日 HH时mm分ss秒");
					
				
			)
		</script>
		
	</body>
</html>

2.2 Vue的 过滤器的使用

" | " ,这个符号叫做管道符。

过滤器的实现过程：

配置单个对象内部过滤器，也就是局部过滤器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<script type="text/javascript" src="./js/dayjs.min.js"></script>
	</head>
	<body>
		
		<div id="root">
			
			<!-- 过滤器实现,就是通过 " | " 管道符实现的。 -->
			<h3>现在是：time | timeFormater</h3>
			
			<!-- 过滤器是可以传参数的,第一个参数永远都是管道符前面对应的值，之后就对应我们传的参数。 -->
			<h3>现在是：time | timeFormater('YYYY年MM月DD日')</h3>
			
			<!-- 
				多个过滤器，就是一层一层来，time先传给timeformater。
				timeformater再传给mySlice，依次类推。
			-->
			<h3>现在是：time | timeFormater('YYYY年MM月DD日') | mySlice</h3>
			
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			new Vue(
				el:"#root",
				data:
					//通过Date.now()方法获取到的时间戳。
					time:1642820009181,
				,
				//在vue实例对象本身，创建的过滤器叫做局部过滤器。
				//过滤器是通过filters，在里面定义函数的。
				filters:
					
					//这里的value值，就是前面插值语法中，管道符前面的time。
					timeFormater(value,str="YYYY年MM月DD日 HH时mm分ss秒")
						console.log("拿到的值：",value);
						return dayjs(value).format(str);
					,
					mySlice(value)
						return value.slice(0,4);
					
				
			)
		</script>
		
	</body>
</html>

还有一个全局过滤器，全局过滤器呢，就是所有的Vue实例对象或组件都可以使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<script type="text/javascript" src="./js/dayjs.min.js"></script>
	</head>
	<body>
		
		<div id="root">
			<!-- 过滤器实现,就是通过 " | " 管道符实现的。 -->
			<h3>现在是：time | timeFormater</h3>
			<!-- 过滤器是可以传参数的,第一个参数永远都是管道符前面对应的值，之后就对应我们传的参数。 -->
			<h3>现在是：time | timeFormater('YYYY年MM月DD日')</h3>
		</div>
		
		<div id="root2">
			<h2>msg</h2>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			
			//配置全局的过滤器：
			Vue.filter("timeFormater",function(value,str="YYYY年MM月DD日 HH时mm分ss秒")
				console.log("拿到的值：",value);
				return dayjs(value).format(str);
			)
			
			const vm = new Vue(
				el:"#root",
				data:
					//通过Date.now()方法获取到的时间戳。
					time:1642820009181,
				
			);
			
			const vm2 = new Vue(
				el:"#root2",
				data:
					msg:"hello ，world"
				
			)
		</script>
		
	</body>
</html>

注意：有一个误区，并不是过滤器只能用到插值语法中，Vue指令属性有的也可以使用，例如: v-bind；当然也有一些不能使用过滤器，例如:v-model。使用的状况也是一样。只不过很少在指令属性中使用而已。

总结：

3. v-text 指令

  • v-text属性会替换掉原先的文本内容，并且不会解析标签完完全全当成文本解析。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<div>name</div>
			<!-- 这样页面显示的就是name的值了 -->
			<div v-text="name">本来的内容</div>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			new Vue(
				el:'#root',
				data:
					name:'张三'
				
			)
		</script>
	</body>
</html>

4. v-html 指令 (谨慎使用！！！)

4.1 cookie 工作原理

关于cookie，在登录时，服务器会向浏览器发送cookies，作为判断标识。


Vue过滤器学习笔记（不定期更新）~~

Vue2.0学习笔记一 ：各种表达式

Spring MVC框架 学习笔记总结

vue视频学习笔记03

Vue 学习总结笔记

Vue 学习总结笔记