Vue.js入门与实例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44864879/article/details/108491429

1、html文件引入Vue

<!-- 复制任意一个，贴在html页面head标签中 -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2、数据与方法
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。

<body>
	<div id="app">
	  <!-- {{ }}(双大括号)是 Mustache语法，用于插值 -->
	  {{ a }} 
	</div>
<body>

<script>
	//定义一个对象
	var data = { a: 1 }
	
	// 该对象被加入到一个 Vue 实例中
	var vm = new Vue({
		el: '#app'
	  	data: data	//这里两个data意义不一样，后面的data指的是上面定义的data对象
	})
	// ①
</script>

运行上述代码，页面出现的值是1，当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

//以下代码写在上一块代码块的 ①处的位置
// 设置 property 也会影响到原始数据
vm.a = 2
console.log(data.a)			//结果也是2;也可以先改变data.a的值，然后去打印vm.a，结果跟data.a的值一样
console.log(vm.a==data.a)	//结果是true

值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的，如果你添加一个新的property，比如： vm.b = 4,那么对 b 的改动将不会触发任何视图的更新

Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

<div id="app">
	<p>{{ foo }}</p>
	<!-- 这里的 `foo` 不会更新！ -->
	<button v-on:click="foo = 'baz'">Change it</button>
</div>

var obj = {
	foo: 'bar'
}

Object.freeze(obj)

new Vue({
	el: '#app',
	data: obj
})

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：

var str = { a: 1}
var app2 = new Vue({
	el: '#app2',
	data: str
})
//查看前后改变的值
app2.$watch('a',function (newvalue,old){
	console.log(newvalue);	//4
	console.log(old);		//1
})
app2.a = 3
app2.a = 4
console.log(app2.$data)

3、实例生命周期钩子

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

Vue简单实例