Vue.js 2.0 学习日记 (一)

原创已于 2022-08-01 09:22:09 修改 · 296 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#学习日记 #Vue2.0 #Vue学习日记

于 2019-07-07 23:46:20 首次发布

Vue.js 同时被 3 个专栏收录

8 篇文章

订阅专栏

Vue

6 篇文章

订阅专栏

Vue学习日记

4 篇文章

订阅专栏

本文深入解析Vue.js框架中的关键指令与特性，包括v-model的双向绑定、v-on的事件监听、v-for的循环渲染、v-bind的属性绑定等。同时探讨了计算属性、侦听器、条件渲染指令v-if与v-show的区别，以及类和样式绑定的高级用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019-07-07

1. v-model ##这是双向绑定的事件，例如：

<input type="text" v-model="inputValue">
/*text文本框向data取数据，并双向绑定*/

2. v-on:click ##这是点击事件，例如：(v-on:click 可简写成@click)

<button v-on:click="handleBtnClick">提交</button>
/*点击事件，执行 handleBtnClick 函数*/

3. v-for ##这是循环函数

<ul>
	<li v-for="item in list">{{item}}</li>
</ul>
/*循环输出列表*/

4. v-bind ##父组件向子组件传值, (v-bind 可简写成 : ，例如： :content, :index, :item)

<todo-item v-bind:content="item"></todo-item>
Vue.component("TodoItem",{
	props: ['content'],
	template: "<li>{{content}}</li>"
})
/*使用props接受父组件传过来的值*/

5. 创建全局组件

Vue.component("TodoItem",{
	props: ['content'],
	template: "<li>{{content}}</li>"
})
/*创建全局组件*/

6. 创建局部组件

var TodoItem = {
	props: ['content'],
	template: "<li>{{content}}</li>"
}
var app = new Vue({
	components: {
		TodoItem: TodoItem, // 可以简写成TodoItem
	}
})
/*创建局部组件*/

7. 数组也可以是一个对象

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

8. v-text ##往元素里面添加text文本

<div id="app" v-text="name"></div>

var vm = new Vue({
	el: '#app',
	data: {
		name: 'hello'
	}
})

//输出hello

9. v-html ##往元素里面添加html内容

<div id="app" v-html="name"></div>

var vm = new Vue({
	el: '#app',
	data: {
		name: '<h1>hello<h1>'
	}
})

//输出hello的h1样式

10. 计算属性（有缓存机制）

<div id="app">
	{{fullName()}}
</div>
var vm = new Vue({
	el: '#app',
	data: {
		firstName: "one",
		lastName: "two"
	},
	computed: {
		fullName: function() {
			return this.firstName + " " + this.lastName
		}
	}
})

11. 方法（无缓存机制）

<div id="app">
	{{fullName()}}
</div>
var vm = new Vue({
	el: '#app',
	data: {
		firstName: "one",
		lastName: "two"
	},
	methods: {
		fullName: function() {
			return this.firstName + " " + this.lastName
		}
	}
})

12. 侦听器（有缓存机制）与computed计算属性类似

<div id="app">
	{{fullName()}}
</div>
var vm = new Vue({
	el: '#app',
	data: {
		firstName: "one",
		lastName: "two"
	},
	watch: {
		firstName: function() {
			this.fullName = this.firstName + " " + this.lastName
		},
		lastName: function() {
			this.fullName = this.firstName + " " + this.lastName
		}
	}
})

13. 计算属性的get和set ##可以进行额外的操作

<div id="app">
	{{fullName}}
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			firstName: "one",
			lastName: "two"
		},
		computed: {
			fullName: {
				get: function() {
					return this.firstName + " " + this.lastName
				},
				set: function(value) {
					var arr = value.split(" ");//用空格，将fullName打散，分为两个数组
					this.firstName = arr[0];
					this.lastName = arr[1];
				}
			}
		}
	})
</script>

14. class的对象绑定

<style type="text/css">
		.activated {
			color: blue
		}
	</style>
</head>
<body>
<div id="app">
	<div @click="handleDivClick"
		:class="{activated: isActivated}"//让activated是否添加到div中的class名，由isActivated决定
	>
		hello
	</div>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			isActivated: false
		},
		methods: {
			handleDivClick: function() {
				this.isActivated = !this.isActivated;
			}
		}
	})
</script>
</body>

15. class的数组绑定

<div id="app">
	<div @click="handleDivClick"
	:class="[activated]"
	>
		hello
	</div>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			activated: ""
		},
		methods: {
			handleDivClick: function() {
				this.activated = this.activated === "activated" ? "" : "activated"
				
			}
		}
		
	})
</script>

16. class的数组对象绑定

<div id="app">
	<div :style="[styleObj, {fontSize: '20px'}]"
			@click="handleDivClick"
	>
		hello
	</div>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			styleObj: {
				color: "red"
			}
		},
		methods: {
			handleDivClick: function() {
				this.styleObj.color = this.styleObj.color === "red" ? "black" : "red";
			}
		}
		
	})
</script>

17. v-if 与 v-show的对比（都是决定是否显示元素）

<div id="app">
	<div v-if="show">{{message}}</div>//v-if会直接移除，重新显示会重新挂载dom，性能不如v-show
	<div v-show="show">{{message}}</div>//直接添加样式display:none，性能好一点
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			message: "hhhh",
			show: false
		}
		
	})
</script>

18. v-if 与 v-else (需要紧贴着使用，中间不能加其他元素)

<div id="app">
	<div v-if="show">{{message}}</div>
	<div v-else>Bye World</div>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			message: "hhhh",
			show: false
		}
		
	})
</script>

19. v-if 与 v-else-if 与 v-else

<div id="app">
	<div v-if="show === 'a'">{{message}}</div>
	<div v-else-if="show === 'b'">ZeZeZe</div>
	<div v-else>Bye World</div>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			message: "hhhh",
			show: 'a'
		}
	})
</script>

20. Vue的小bug例子

<div id="app">
	<div v-if="show">
		用户名: <input key="username" />//加一个key值，则会重新渲染，否则会复用，则导致切换的时候input内容没有改变。
	</div>
	<div v-else>
		邮箱: <input key="email" />
	</div>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			message: "hhhh",
			show: true
		}
		
	})
</script>