学习vue的第一天叮咚~~~~~~~~~~~~~~

最新推荐文章于 2023-03-13 08:00:02 发布

可爱爆仙女儿

最新推荐文章于 2023-03-13 08:00:02 发布

阅读量183

点赞数

分类专栏： input标签变宽闪烁

本文链接：https://blog.csdn.net/qq_40177359/article/details/100556586

版权

input标签变宽闪烁专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<head>
	<meta charset="utf-8" />
	<title></title>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
	<div id="app">
		{{ message }}
	</div>
	<div id="app-2">
		<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！

现在你看到我了

{{ todo.text }}

反转消息

Change it

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue!'
			}
		})
		var app2 = new Vue({
			el: '#app-2',
			data: {
				message: '页面加载于 ' + new Date().toLocaleString()
			}
		})
		var app3 = new Vue({
			el: '#app-3',
			data: {
				seen: false
			}
		})
		var app4 = new Vue({
			el:'#app-4',
			data:{
				todos:[
				 { text: '学习 JavaScript' },
  { text: '学习 Vue' },
  { text: '整个牛项目' }
				]
			}
			
		})
		var app5 = new Vue({
			el:'#app-5',
			data:{
				message:'hello world'
			},
			methods:{
				reverseMessage:function(){
					 this.message = this.message.split('').reverse().join('')
				}
			}
		})
		
		var obj = {
			foo:'bar'
		}

// Object.freeze(obj)
var app6 = new Vue({
el:’#app-6’,
data:obj

		})
		
		var vm = new Vue({

el: ‘#demo’,
data: {
firstName: ‘Foo’,
lastName: ‘Bar’,

},
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ’ ’ + this.lastName
},
// setter
// set: function (newValue) {
// var names = newValue.split(’ ')
// this.firstName = names[0]
// this.lastName = names[names.length - 1]
// }
}
}

})

	</script>
</body>

**Vue生命周期**

[Vue] 生命周期， created，mounted, methods , computed , watched, 通俗易懂

计算属性和监听器
computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，但是我们不能类似这样监控，