1.1 Vue的安装

最新推荐文章于 2023-09-20 21:51:15 发布

XinXun

最新推荐文章于 2023-09-20 21:51:15 发布

阅读量129

点赞数

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

本文链接：https://blog.csdn.net/zpxinxun/article/details/115016123

版权

Vue 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

Vue下载地址：https://cn.vuejs.org/，有两个版本可以选择。

Vue开发环境版本：包含了有帮助的命令行警告；
Vue生产环境版本：优化了尺寸和速度。

Vue的安装方式（3种）

方式一：直接CDN引入

开发版本：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产版本：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

方式二：下载和引入

开发版本：https://cn.vuejs.org/js/vue.js

生产版本：https://cn.vuejs.org/js/vue.min.js

方式三：NPM安装

Vue初体验

Vue是一种声明式编程范式，与JQuery命令式编程范式不同
创建Vue对象(初始化)，传入的参数也是对象类型
let、const是ES6的语法。let定义变量，const定义常量。
在浏览器console中可以通过app.message访问或修改数据

<div id="app">{{message}}</div>
<script type="text/javascript">
	const app=new Vue({
		//el指定要挂载的元素
		el:'#app',
		data:{
			message:'您好，Vue'
		}
	})
</script>

Vue通过数组列表显示

v-for指令的使用

<div id="app">
	<ul>
	    <li v-for="item in movies">{{item}}</li>
	</ul>
</div>
<script type="text/javascript">
	const app=new Vue({
		//el指定要挂载的元素
		el:'#app',
		data:{
			movies:['星球穿越','盗梦空间','人潮汹涌','你好，李银河']
		}
	})
</script>

数组可以通过使用movies.push('银河补习班')进行添加

小案例:计数器

v-on监听事件

<div id="app">
	<h2>当前计数:{{counter}}</h2>
	<button type="button" v-on:click="counter++">+</button>
	<button type="button" v-on:click="counter--">-</button>
</div>
<script type="text/javascript">
	const app=new Vue({
		//el指定要挂载的元素
		el:'#app',
		data:{
			counter:0
		}
	})
</script>

Vue的methods属性,可以定义方法
方法中访问data中数据使用this
HTML标签中使用data数据不用加{{}}

<div id="app">
	<h2>当前计数:{{counter}}</h2>
	<button type="button" v-on:click="add">+</button>
	<button type="button" v-on:click="sub">-</button>
</div>
<script type="text/javascript">
	const app=new Vue({
		//el指定要挂载的元素
		el:'#app',
		data:{
			counter:0
		},
		methods:{
			add:function(){
				this.counter++
			},
			sub:function(){
				this.counter--
			}
		}
	})
</script>

语法糖:@click等同于v-on:click

<div id="app">
	<h2>当前计数:{{counter}}</h2>
	<button type="button" @click="add">+</button>
	<button type="button" @click="sub">-</button>
</div>
<script type="text/javascript">
	const app=new Vue({
		//el指定要挂载的元素
		el:'#app',
		data:{
			counter:0
		},
		methods:{
			add:function(){
				this.counter++
			},
			sub:function(){
				this.counter--
			}
		}
	})
</script>

如果1.用于事件监听；2.方法没有参数，那么可以省略方法的括号(),如果不省略效果相同。但{{}}使用方法必须添加括号()
如果函数定义的有形参。调用方法时没有传递参数，但没有省略括号，那么形参的值为undefined；省略了括号那么会把览器默认生成的event以参数的形式传递给形参
如果需要event的同时又需要其它参数，则需要手动获取浏览器产生的event对象。方式为$event,代码如下：@click="abc(123,$event)"

v-on的修饰符

stop 禁止事件冒泡

<body>
	<div id="app">
		<div @click="clickDiv">
			<!-- v-on修饰符stop，防止事件冒泡 -->
			<button type="button" @click.stop="clickBtn">修饰符</button>
		</div>
	</div>
	<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const app=new Vue({
			el:'#app',
			methods:{
				clickBtn(){
					console.log('点击了按钮')
				},
				clickDiv(){
					console.log('触发了div点击事件')
				}
			}
		})
	</script>
</body>

prevent 阻止默认行为（表单按钮提交场合）

<div id="app">
	<form action="baidu" method="post">
		<!-- prevent阻止了默认行为 -->
		<input type="submit" value="提交" @click.prevent="submitClick"/>
	</form>
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const app=new Vue({
		el:'#app',
		methods:{
		submitClick(){
			console.log('这是按钮自定义事件')
		    }
	    }
	})
</script>

once 只触发一次事件
[keyAlias|keyCode] 监测键盘某一键是否敲击（上）

事件keyup和keydown分别代表键弹起和键按下。一般keyup使用的多

<div id="app">
	<input type="text" @keyup.enter="clickKey" />
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const app=new Vue({
		el:'#app',
		methods:{
			clickKey(){
				console.log('按下了回车键')
			}
		}
    })
</script>

Vue的虚拟DOM机制

Vue在将接管的元素渲染到页面前会要经过虚拟DOM环节，出于性能考虑，虚拟DOM会尽可能复用已经存在的元素，而不是重新创建新的元素。

对于重用的元素会根据属性的不同进行修改后渲染，但用户输入的内容不会清空，可以给元素增加key属性，key属性不同在虚拟DOM中就不会进行复用。

XinXun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.1 Vue的安装

Vue下载地址：https://cn.vuejs.org/，有两个版本可以选择。Vue开发环境版本：包含了有帮助的命令行警告； Vue生产环境版本：优化了尺寸和速度。Vue的安装方式（3种）方式一：直接CDN引入开发版本：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>生产版本：<script src="https://cdn.jsdelivr.net/npm/vue@2.
复制链接

扫一扫