计算属性
计算属性
低调的AckMan 发表于10个月前
计算属性
  • 发表于 10个月前
  • 阅读 9
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

<html>
	<head>
		<title>VUE.JS实例</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
		<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
		<script src="C:/Users/Administrator/Desktop/jar/jquery-1.11.2.min.js"></script>
	</head>
	<body>
		<!-- mustache语法{{}} -->
		<div id = "example1">
			{{message1}}
		</div>
		<!-- 计算缓存(基于它们的依赖进行缓存的) -->
		<div id = "example2">
			<p>Original message: "{{ message }}"</p>
			<p>Computed reversed message: "{{ reversedMessage }}"</p>
		</div id = "example3">
		<!-- 方法不缓存 -->
		<div>
			<p>Original message: "{{ message2 }}"</p>
			<p>Reversed message: "{{ reversedMessage() }}"</p>
		</div>
		<!-- 回调 -->
		<div id = "example4">
			<p>{{fullname}}</p>
		</div>
		<!-- watch -->
		<div id = "watch-example">
			<p>
				Ask a yes/no question:<input v-model="question">
			</p>
			<p>
				{{ answer }}
			</p>
		</div>
		<script>
			// el代表VUE挂载的元素节点
		
			result1 = new Vue({
				el : '#example1',
				data : {message1 : 'content'}
			});
			// result2.message='content'
			result2 = new Vue({
				el : '#example2',
				data : {
					message : 'Hello'
				},
				// 计算属性(缓存结果)
				computed : {
					reversedMessage : function (){
						return this.message.split('').reverse().join('')
					}
				}
			});
			result3 = new Vue({
				el : '#example3',
				data : {
					message2 : 'Hello2'
				},
				// 方法属性(不缓存结果)
				methods: {
					reversedMessage : function(){
					  return this.message2.split('').reverse().join('');
					}
				}
			});
			result4 =  new Vue({
				el : '#example4',
				data : {
					firstname : 'wang',
					middlename : 'bing',
					lastname : 'an'
				},
				// computed默认让变量有函数
				computed : {
					fullname :{
						// 默认为getter
						get : function (){
							return this.firstname+this.middlename+this.lastname
						},
						// settr result4.fullname='A B C'
						set : function(newValue){
							names = newValue.split('');
							firstname = names[0],
							middlename = names[1],
							lastname = names[2]
						}
					}
				}
			});
			
			result5 = new Vue({
				el : '#watch-example',
				data : {
					question : '',
					answer : 'I cannot give you an answer until you ask a question!'
				},
				watch : {
					// 如果question发生改变,这个函数就会运行
					question : function(newQuestion){
						this.answer = 'Waiting for you to stop typing...',
						this.getAnswer();
					}
				},
				method : {
					// _.debounce (function(){},等待的毫秒数)是一个通过lodash限制操作频率的函数。
					// 在这个例子中,我们希望限制访问yesno.wtf/api的频率
					// ajax请求直到用户输入完毕才会发出
					// 学习更多关于 _.debounce function (and its cousin_.throttle), 参考: https://lodash.com/docs#debounce
					getAnswer : _.debounce(
						function(){
							vm = this
							if(this.question.indexOf('?') === -1){
								vm.answer = 'Questions usually contain a question mark. ;-)'
								return
							}
							vm.answer = 'Thinking...'
							axios.get('https://yesno.wtf/api')
								.then(function(response){
									vm.answer = _.capitalize(response.data.answer)
								})
								.catch(function(error){
									vm.answer = 'Error! Could not reach the API. ' + error
								})
						},
						// 这是我们为用户停止输入等待的毫秒数   
						500
					)
				}
			});
		</script>
	</body>
</html>

 

标签: Vue.js
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
低调的AckMan
粉丝 44
博文 317
码字总数 134757
×
低调的AckMan
谢谢观众老爷们的赏赐,小弟我会再接再厉的!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: