Vue

最新推荐文章于 2023-02-21 13:55:44 发布

阳光的羊羊羊羊

最新推荐文章于 2023-02-21 13:55:44 发布

阅读量268

点赞数

本文链接：https://blog.csdn.net/yjyxw/article/details/106082182

版权

本文深入探讨Vue.js，介绍基本应用、事件绑定（v-on）、条件渲染（v-if/v-else-if/v-else）、数据绑定（v-model）、计算属性、v-for循环以及组件和路由的基础知识，包括指令的修饰符、键盘事件、双向绑定、自定义事件等，旨在帮助读者掌握Vue.js核心概念。

摘要由CSDN通过智能技术生成

基本应用，以代码展示：{ {}}拿属性

定义View
定义Model
创建一个Vue实例或"ViewModel"，它用于连接View和Model

在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

在这个示例中，选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{ { message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<link rel="stylesheet" href="new_file1.css">
	</head>
	<body>
		<div class="vue-app">
			<h1>{
  { name }}</h1>
			<!-- //两个大括号 直接就可以拿到元素 -->
			<h1>{
  { greet('afternoon') }}</h1>
			<a v-bind:href="website">开发</a>
			<input type="text" v-bind:value="job">
			<p v-html="websiteTag"></p>
		</div>
		
		<script type="text/javascript">
		//实例化vue对象
			new Vue({
				el:".vue-app",
				data:{
					name:"sad",
					job:"eat",
					website:"http//d/d",
					websiteTag:"<a href = 'http//d/d'>then</a>"
				},
				// 方法
				methods:{
					greet:function(time){
						return'goond'+this.name+time;
					}
				}
				
			});
			//el:element  需要获取的元素，一定是html中的跟容器元素
			//data:用于数据的存取
			//methods:存储方法
			//属性绑定 <a v-bind:href="website">开发</a>不能再v-bind后面加空格
			//	<input type="text" v-bind:value="job">
			//data-binding:给属性绑定对应的值
			//添加标签
		</script>
	</body>
</html>

Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：

v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令

Vue.js具有良好的扩展性，我们也可以开发一些自定义的指令，后面的文章会介绍自定义指令。

事件的绑定：v-on

v-on指令

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：

<a v-on:click="doSomething">

有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。

<body>
			<div class="vue-app">

				<button v-on:click="age++" style="width: 100px;height: 100px;"></button>
				<p> my age is {
  {age}}</p>
			</div>
		
		<script type="text/javascript">
		//实例化vue对象
			new Vue({
				el:".vue-app",
				data:{
				age:45
				},
				// 方法
				methods:{


				}
				
			});

绑定事件小案例：返回在容器中的x和y的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<link rel="stylesheet" href="new_file1.css">
		<style>
			.style{
				height: 100px;
				width: 100px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div class="vue-app">

			<button v-on:click="add(2)" style="width: 100px;height: 100px;">增长</button>
			<button v-on:dblclick="subtract(2)" style="width: 100px;height: 100px;">减少</button>
			<p> my age is {
  {age}}</p>
			<div class="style" v-on:mousemove="updataxy">{
  {x}},{
  {y}}</div>
		</div>

		<script type="text/javascript">
			//实例化vue对象
			new Vue({
				el: ".vue-app",
				data: {
					age: 45,
					x: 0,
					y: 0,
				},
				// 方法
				methods: {
					add: function(a) {
						this.age += a;
					},
					subtract: function(a) {
						this.age -= a

最低0.47元/天解锁文章

阳光的羊羊羊羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue

基本应用，以代码展示：{{}}拿属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link rel="stylesheet" href="new_fil
复制链接

扫一扫