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>
