通过创建第一个Vue应用，初步了解Vue.js的数据与方法

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。它有两大重要的组成部分：一个是视图，一个是脚本。

一、第一个Vue应用

下面我们来创建第一个Vue应用：

<!--视图-->
<div id="app">
    {{message}}
</div>

//脚本
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            message:'Hello Vue!'
        }
    });
</script>

以下是对这段代码的说明：

• {{message}}是Vue.js最常见的文本插值的方式
• var app = new Vue()声明了一个Vue.js的应用对象
• el：即element，元素属性，通过选择器的方式选定div
• data：数据属性，视图层中声明了哪些变量，就要在data中注册哪些变量并且赋初值

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

二、数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。举个例子：

<!--视图-->
<div id="app">
    {{a}}
</div>

//脚本
<script type="text/javascript">
    var data = {a:1};
    var vm = new Vue({
        el:"#app",
        data:data
    });
</script>

以下是对这段代码的说明：

• 属性data和变量data是不一样的，变量data用对象形式来表示的

• 分几种情况来讨论这段代码：

  • 如何在后面用data.a = "text"来修改a的值，可以达到响应式的效果。当这些数据改变时，视图会进行重渲染。

  • 如果用vm.a = "text"来修改b的值，也可以达到响应式的效果，而且data.a==vm.a

  • 值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。如果需要响应式的效果，必须先声明变量。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

    data: {
      newTodoText: '',
      visitCount: 0,
      hideCompletedTodos: false,
      todos: [],
      error: null
    }
    

• 如果使用Object.freeze(),会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

<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
})

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

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data 
vm.$el === document.getElementById('example') 

三、常用的实例属性和实例数据方法

1、实例属性

属性	描述
vm.$data	获取属性
vm.$el	获取实例挂载的元素
vm.$options	获取自定义选项/属性/函数
vm.$refs	获取通过ref属性注册的DOM对象

代码实例：

<div>
			<h1>{{msg}}</h1>
			<h2 ref='hello'>Hello</h2>
			<h2 ref='vue'>Vue</h2>
</div>

<script>
		let vm = new Vue({
				el : 'div',
				data : {
					msg : 'sikiedu'
				},
				username : 'joey',
				password : '123',
				login(){
					console.log("login");
				}
			});
			
			/*$.data*/
  		    console.log(vm.$data.msg);
			console.log(vm.msg);
			
			/*$el*/
			console.log(vm.$el);
			vm.$el.style.color = 'red';
 
			/*$options*/
			console.log(vm.$options.username);
			console.log(vm.$options.password);
			vm.$options.login();
			
			/*$refs*/
			console.log(vm.$refs);
			vm.$refs.hello.style.backgroundColor = 'yellow';
			
	</script>

2、实例数据方法

方法	描述
vm.$watch	观测数据变化
vm.$delete	删除属性值
vm.$set	设置属性值

delete和set方法的代码实例：

<div>
			Id：<span>{{user.id}}</span><br />
			用户名：<span>{{user.username}}</span><br />
			<button @click="changeUsername">changeUsername</button><br />
			<button @click="addId">addId</button><br />
			<button @click="delId">delId</button>
</div>

<script>
		let vm = new Vue({
				el : 'div',
				data : {
					user : {
						username : 'Joey'
					}
				},
				methods : {
					changeUsername(){
						this.user.username = 'sikiedu-Joey';
					},
					addId(){
						//this.$set(this.user, 'id', 1);  局部的
						//Vue.set(this.user, 'id', 1);   全局的
						
						if(this.user.id){
							this.user.id++;
						}else{
							Vue.set(this.user, 'id', 1);
						}
						console.log(this.user.id);
					},
					delId(){
						if(this.user.id){
							//this.$delete(this.user, 'id');
							Vue.delete(this.user, 'id');
						}
					}
				}
			});
			
	</script>

watch方法代码实例：

<div>
			<input type="text" v-model="msg" /><br />
			msg : <span>{{msg}}</span><br />
			
			<input type="text" v-model="num" /><br />
			num : <span>{{num}}</span><br />
			
			<button οnclick="unWatch()">unWatch</button>
			
</div>

<script>
		let vm = new Vue({
				el : 'div',
				data : {
					msg : 'Joey',
					num : 1,
					user : {
						id : '01',
						username : 'sikiedu'
					}
				},
				watch : {
					num : function(newValue, oldValue){
						console.log("修改了num 旧值= " + oldValue + "   新值= " + newValue);
					}
				}
			});
			
			let unwatch = vm.$watch('msg', function(newValue, oldValue){
					console.log("修改了msg 旧值= " + oldValue + "   新值= " + newValue);
			});
			
			function unWatch(){
				unwatch();
				console.log("点击了unwatch按钮")
			}
			
</script>