Vue.js的基本使用01

最新推荐文章于 2022-06-09 11:18:34 发布

Zeroya52

最新推荐文章于 2022-06-09 11:18:34 发布

阅读量120

点赞数

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_41328653/article/details/105286338

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue.js-01

转载自某大佬笔记，大佬没有发布过，所以没链接

新建项目 (普通项目即可)
创建目录，引入Vue.js (开发用vue.js,上线用vue.min.js)
创建Vue对象
双向数据绑定：v-model
显示数据：{{xxx}}

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg"/>
			<!-- v-model的数据来源是Vue实例的数据
			而非表单元素设定的初始值 -->
			<p>Hello {{msg}}</p>
			<!-- {{}}可以将我们双向绑定的数据实时显示出来 -->
		</div>
		
		<script src="lib/vue.js"></script>
		<script>
			const vm=new Vue({
				el:'#app',  //指定根元素(选择器)
				data:{  //初始化数据(页面可以访问)
					msg:'Vue'
				}
			})
		</script>
	</body>
</html>

生命周期

在这里插入图片描述
vue2.0后生命周期钩子函数：
beforeCreate 创建前 el和data没有初始化
created 创建后 el没有初始化，data完成初始化
beforeMount 挂载前 el和data完成初始化
mounted 挂载后 完成挂载，实现渲染

(将data的值修改之后才能触发update的操作)
beforeUpdate 更新前
updated 更新后

beforeDestroy 销毁前 实例销毁之前调用，主要解绑一些使用addEventListener监听的事件
destroyed 销毁后 vue实例被销毁

过滤器

Vue.js 支持在{ { } } 插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的。通过给Vue实例添加选项filters来设置。

案列

<body>
<div id="app">
    {{date | formatDate}}
</div>
<script>
	//在月份 日期 小时等小于10
	var padDate= function(value){
		return value < 10 ? '0' + value : value;
	}
    var vm = new Vue({
        el : '#app',
        data:{
            date:new Date()
        },
		filters:{
			formatDate:function(value){//准备过滤的数据
				var date=new Date(value);
				var year=date.getFullYear();
				var month=padDate(date.getMonth()+1);
				var day=padDate(date.getDate());
				var hour=padDate(date.getHours());
				var min=padDate(date.getMinutes());
				var seconds=padDate(date.getSeconds());
				return year+"-"+month+"-"+day+" "+hour+":"+min+":"+seconds;
			}
		},
		mounted:function(){
			var _this=this;//声明变量指向Vue实例this,保持一致
			this.timer=setInterval(function(){
				_this.date=new Date();
			},1000)
		}
    }),
		beforeDestroy:function(){
			if(this.timer){
				clearInterval(this.timer);
			}
		}
</script>
</body>

过滤器还可以串联，和接收参数

<!-- 串联 -->
{{ message | filterA | filterB }}
<!-- 接收参数 -->
{{ message | filterA('arg1','arg2')}
这里的字符串 arg1和arg2将分别传给过滤器的第二个和第三个参数，因为第一个参数是数据本身

Vue.js常用指令

v-if 条件渲染指令，根据表达式的布尔值判断是否渲染该元素

<body>
<div id="app">
    <p v-if="man">男</p>
	<p v-if="woman">女</p>
	<p v-if="age>20">年龄：{{age}}</p>
</div>
<script>
    var vm = new Vue({
        el : '#app',
        data:{
            man:false,
			woman:true,
			age:21
        }
    })
</script>
</body>

v-show 条件为true才显示，条件为false则相当于display:none;的效果。

<body>
<div id="app">
    <p v-show="man">男</p>
	<p show="woman">女</p>
	<p v-show="1<3">正确才显示</p>
	<p v-show="4<3">错误不显示</p>
</div>
<script>
    var vm = new Vue({
        el : '#app',
        data:{
            man:false,
			woman:true
        }
    })
</script>
</body>

v-if和v-show的区别：

v-if 动态的添加或删除DOM元素，如果第一次为true，才编译，否则不编译
v-show 通过display样式控制显隐，第一次无论为true或false，都编译

v-else 要和v-if和v-show一起使用，当v-if和v-show为true的时候，v-else就不显示，反之显示。

v-for 遍历数组元素

<body>
<div id="app">
    <table>
		<tr>
			<th>姓名</th>
			<th>性别</th>
		</tr>
		<!-- s表示需要遍历数组时的变量，名字随意取 -->
		<tr v-for="s in sexs">
			<td>{{ s.name }}</td>
			<td>{{ s.sex }}</td>
		</tr>
	</table>
</div>
<script>
    var vm = new Vue({
        el : '#app',
        data:{
            sexs:[{
				name:'一',
				sex:'男'
			},{
				name:'二',
				sex:'女'
			},{
				name:'三',
				sex:'女'
			}]
        }
    })
</script>
</body>

v-bind 动态更新HTML元素上的属性,比如id，class

<body>
<div id="app">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgUrl">
</div>

<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'http://www.swedu.net',
            imgUrl: 'http://xxx.xxx.xxx/img.png'
        }
    })
</script>
</body>

v-on 用来绑定事件监听器

<body>
<div id="app">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClick">点击隐藏</button>
</div>
<script src="../lib/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClick: function () {
                //this相当于Vue实例本身
                this.show = false;
            }
        }
    })
</script>
</body>

Vue.js 的 v-bind和v-on指令都提供了语法糖，即缩写。

v-bind可以直接用冒号":"来缩写

    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgUrl">
    <!-- 缩写为-->
    <a :href="url">链接</a>
    <img :src="imgUrl">

v-on 可以直接用"@"来缩写

 <button v-on:click="handleClick">点击隐藏</button>
 <!-- 缩写为-->
 <button @click="handleClick">点击隐藏</button>

Zeroya52

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js的基本使用01

新建项目 (普通项目即可)创建目录，引入Vue.js (开发用vue.js,上线用vue.min.js)创建Vue对象双向数据绑定：v-model显示数据：{{xxx}}<html> <head> <meta charset="utf-8"> <title></title> </head> &lt...
复制链接

扫一扫

专栏目录