Vue基础入门

最新推荐文章于 2024-04-29 10:07:33 发布

HexString

最新推荐文章于 2024-04-29 10:07:33 发布

阅读量318

点赞数

分类专栏： Java基础

本文链接：https://blog.youkuaiyun.com/HexString/article/details/104557766

版权

Java基础专栏收录该内容

16 篇文章

订阅专栏

Vue的安装

一下内容都是来自乐优商城笔记

安装node环境：: link.
node自带npm，在控制台输入 npm -v查看版本号
npm install nrm -g 安装nrm
nrm ls 查看npm 的仓库列表，带*的就是当前选中的镜像仓库
nrm use taobao 指定要使用的镜像源
nrm test npm 测试速度

下载vue
https://github.com/vuejs/vue
在idea中点开Terminal控制台，进入到要编写的项目
npm init -y 初始化
npm install vue --save 安装vue

<body>
	<div id="app">
		<h2>{{name}}</h2>
	<div>
</body>
<script scr="node_modules/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
		el:"#app",		//el就是该vue实例要渲染的页面元素
		data:{
			name: "乐优商城"		//要渲染的数据
		}
	}

v-model=“name”
这个是数据绑定
@click="" 点击事件
钩子函数
beforeCreated:Vue实例化的时候调用
created:创建实例之后调用
beforeMount:页面加载完成之后调用，
beforeDestroy:销毁实例前调用
destroyed:销毁实例时调用
v-text:将数据输出到元素的内部，就相当于{{}}
v-html:将数据输出到元素的内部，就相当于{{}}，有Html渲染
——————————————————————————————————————————————————
事件修饰符

.stop:阻止事件冒泡到父元素
.prevent:阻止默认事件发生
.capture:使用事件捕获模式(这个不太清楚是什么意思)
.self:只有元素自身触发事件才执行（冒泡或者捕获都不执行）
.once:只执行一次
	<!--右击事件-->
比如：v-on:contextmenu.prevent="num++"

按键修饰符：

<!--只有在“keyCode”是13时调用vm.submint()-->
		v-on:keyup.13="submit"
	.enter
	.tab
	.delete(删除和退格)
	.esc
	.space
	.up
	.down
	.left
	.right

遍历

v-for="item in items"
v-for="(item,index) in items"
遍历对象
v-for="(value,key,index) in object"
	Object:{name:'乐优',age:15}
key值
<li v-for="(item,index) in items" :key=index></li>

v-if        v-else     v-else-if  直接注释掉    
v-show元素的Css属性为display
v-bind可以同于class和style