Vue.js 2.0学习笔记教程——2Vue实例

臧老伟

已于 2023-04-20 20:30:39 修改

阅读量174

点赞数

CC 4.0 BY-SA版权

分类专栏： vue2 文章标签： vue.js 学习笔记

于 2023-04-20 20:28:25 首次发布

本文链接：https://blog.csdn.net/zanglaowei/article/details/130274984

vue2 专栏收录该内容

2 篇文章

订阅专栏

这篇文章介绍了如何创建Vue实例，包括数据绑定、方法的使用，如`$watch`和`methods`内的函数。同时，探讨了Vue组件的生命周期，特别是实例的生命周期钩子函数，如`created`,`mounted`,`updated`，以及`Object.freeze`对数据对象的影响。

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

Vue 实例

学习Vue官方教程

https://v2.cn.vuejs.org/v2/guide/instance.html

创建一个vue实例

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成

数据与方法

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>学习Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app1">{{a}}
<button @click="change">change</button>
</div>

</body>
<script type="text/javascript">
//app1	
var dataObj = { a: 1 } 
var vm = new Vue({
  el:'#app1',
  data: dataObj,

  methods:{
  	change(){
  		this.a=5;
  	}
  }
})
  // $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
  console.log("调用方法")
  console.log(newValue,oldValue)
})

console.log(vm.$data === dataObj );// => true
console.log(vm.$el === document.getElementById('app1'))// => true


console.log(vm.a)
console.log(vm.a == dataObj.a)

vm.a = 2
console.log ("vm.a:"+dataObj.a) 

dataObj.a = 3
console.log (vm.a) 
console.log (vm.$data)
console.log (vm.$data.a)

vm.b="hi"
console.log(vm.b)
console.log(dataObj.b)
console.log (vm.$data.b)

</script>
<style type="text/css">
	p{color: red;}
</style>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>学习Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>


<h3>app2---methods方法，</h3>
<p>-----------------------------------------------</p>
<div id="app2">
	{{foo}}
	<button v-on:click="foo='Test'">Change It</button>
	<button v-on:click="changeItABC">用ChangeItABC</button>
	
</div>

<h3>app3---methods方法，验证Object.freeze 的效果</h3>
<p>-----------------------------------------------</p>
<div id="app3">
	{{dataA}}
	<button v-on:click="changeItXYZ">用ChangeItXYZ</button>
</div>



</body>
<script type="text/javascript">

//app2
var obj={
	foo:'bar'
}

//验证Object.freeze 的效果 

var vm1=new Vue({
	el: '#app2',
	data: obj,
	methods: {
		changeItABC: function(){
			this.foo="abc"
		},
		
	}
})

var freezeObj={
	dataA:'test'
}
Object.freeze(freezeObj)
var vm3=new Vue({
	el: '#app3',
	data: freezeObj,
	methods: {
		
		changeItXYZ:function(){
			this.dataA="XYZ"
		}
	}
})


</script>
<style type="text/css">
	p{color: red;}
</style>
</html>

实例声明周期钩子

<!DOCTYPE html>
<html>
<head>
	<title>实例生命周期钩子</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

	<h3>app3---生命周期的钩子</h3>
	<p>----------------------------------------</p>
	<div id="app3">
		{{v}}
		<button v-on:click="change">change</button>

	</div>

</body>
</html>
<script type="text/javascript">
	
//App3
var app3=new Vue({
	el: '#app3',
	data: {
		v:"Test1"
	},
	methods:{
		change:function(){
			this.v="改变Test"
		},

		
	},
	created: function(){
    	console.log('created 用法， V is: ' + this.v)
    },
    mounted: function () {
    	console.log('mounted 用法， V is: ' + this.v)
    },
    updated: function () {
    	console.log('updated 用法， V is: ' + this.v)
    }
})
</script>

生命周期图示

参照学习 https://blog.csdn.net/weixin_45791692/article/details/124045505

<!DOCTYPE html>
<html>
<head>
	<title>vue 生命周期</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app-1">
<span :model="msg"></span>
{{msg}}
</div>

</body>
</html>
<script type="text/javascript">
	var app=new Vue({
		el: '#app-1',
		data:{
			msg: 'msg',
		},
		beforeCreate() {
		    console.log('----beforeCreate----')
		    console.log(this.msg) //undefined
		    console.log(this.$el) //undefined
		},

		created() {
		    console.log('----created----')
		    console.log(this.msg)	//msg
		    console.log(this.$el)	//undefined
		 },

		beforeMount() {
		    console.log('----beforeMount----')
		    console.log(this.msg)	//msg
		    console.log(this.$el)	//undefined
		    for (var i = 0; i <= 5000; i++) {
		      console.log(1)
		    }
		},

		mounted() {
    		console.log('----mounted----')
    		console.log(this.msg)	//msg
    		console.log(this.$el)	//<div id="app"><span model="msg"></span></div>
  		},
  	});

</script>

<!DOCTYPE html>
<html>
<head>
 <title>vue 生命周期</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

  <div id="app">
    <div style="height:50px"
         ref="spanRef">{{msg}}</div>
    <button @click="clickBtn">update</button>
  </div>
</body>
</html>



<script>
var app=new Vue({
  el: '#app',
  data:{
      msg: 'msg',
  },

  methods: {
    clickBtn() {
      this.msg = 'newMsg'
    },
  },

  beforeUpdate() {
    console.log('----beforeUpdate----')
    console.log(this.$el)
    console.log(this.msg) //msg
    /**
    * 
    */

    for (var i = 0; i <= 10000; i++) {
      console.log(1)
    }
  },
  
  updated() {
    console.log('----updated----')
    console.log(this.$el)

    console.log(this.msg) //msg
  },
});
</script>