码迷,mamicode.com
首页 > Web开发 > 详细

Vue.js 实战教程 V2.x(5)Vue实例

时间:2019-08-17 14:49:43      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:数据对象   style   http   net   回调   改变   hellip   name   html   

 技术图片

5 Vue实例
5.1创建一个 Vue 实例
创建 Vue 实例:
 
var vm = new Vue({
 
  // ...
 
})
 
5.2数据与方法
// 我们的数据对象
 
var data = { a: 1 }
 
// 该对象被加入到一个 Vue 实例中
 
var vm = new Vue({
 
  data: data
 
})
 
// 获得这个实例上的属性
 
// 返回源数据中对应的字段
 
vm.a == data.a // => true
 
// 设置属性也会影响到原始数据
 
vm.a = 2
 
data.a // => 2
 
// ……反之亦然
 
data.a = 3
 
vm.a // => 3
 
当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性,比如:
 
vm.b = ‘hi‘
 
那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。比如:
 
data: {
 
a: 1,
 
b: ‘‘
 
}
 
这里唯一的例外是使用 Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。
 
var obj = {
 
  foo: ‘bar‘
 
}
 
Object.freeze(obj)
 
new Vue({
 
  el: ‘#app‘,
 
  data: obj
 
})
 
<div id="app">
 
  <p>{{ foo }}</p>
 
  <!-- 这里的 `foo` 不会更新! -->
 
  <button v-on:click="foo = ‘baz‘">Change it</button>
 
</div>
 
除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:
 
var data = { a: 1 }
 
var vm = new Vue({
 
  el: ‘#example‘,
 
  data: data
 
})
 
vm.$data === data // => true
 
vm.$el === document.getElementById(‘example‘) // => true
 
// $watch 是一个实例方法
 
vm.$watch(‘a‘, function (newValue, oldValue) {
 
  // 这个回调将在 `vm.a` 改变后调用
 
})
 
5.3实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
 
比如 created 钩子可以用来在一个实例被创建之后执行代码:
 
new Vue({
 
  data: {
 
    a: 1
 
  },
 
  created: function () {
 
    // `this` 指向 vm 实例
 
    console.log(‘a is: ‘ + this.a)
 
  }
 
})// => "a is: 1"
 
5.4 生命周期图示
 
技术图片

 
 
完整代码:
 
5 Vue实例1.html
 
<!DOCTYPE html>
 
<html>
 
<head>
    
<title>Vue实例</title>
    
 
</head>
 
<body>
<div id="app">
  
  {{ message }}
 
</div>
 
<script>
    
var app = new Vue({
      
  el: ‘#app‘,
      
  data: {
        
    message: ‘Hello Vue!‘
      
  }
    
})
 
</script>
 
</body>
 
</html>
5 Vue实例2.html
 
<!DOCTYPE html>
 
<html>
 
<head>
    
<title>Vue实例</title>
    
 
</head>
 
<body>
 
<div id="app">
  
</div>
 
<script>
 
var data = { 
  a: 1,
  b: ‘‘
}
 
var vm = new Vue({
      
  el: ‘#app‘,
      
  data: data
    
})
 
// alert(vm.a == data.a);
 
vm.a = 2
 
// alert(data.a);
 
data.a = 3
 
// alert(vm.a);
 
vm.b = ‘hi‘
 
alert("vm.b=" + vm.b);
 
alert("data.b=" + data.b);
 
</script>
 
</body>
 
</html>
5 Vue实例3.html
 
<!DOCTYPE html>
 
<html>
 
<head>
    
<title>Vue实例</title>
    
 
</head>
 
<body>
 
<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新! -->
  <button v-on:click="foo = ‘baz‘">Change it</button>
</div>
 
<script>
 
var obj = {
  foo: ‘bar‘
}
 
Object.freeze(obj)
 
new Vue({
  el: ‘#app‘,
  data: obj
})
 
</script>
 
</body>
 
</html>
5 Vue实例4.html
 
<!DOCTYPE html>
 
<html>
 
<head>
    
<title>Vue实例</title>
    
 
</head>
 
<body>
 
<div id="example">
</div>
 
<script>
 
var data = { a: 1 }
 
var vm = new Vue({
  el: ‘#example‘,
  data: data
})
 
// alert(vm.$data === data) // => true
// alert(vm.$el === document.getElementById(‘example‘)) // => true
// $watch 是一个实例方法
vm.$watch(‘a‘, function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
  console.log(‘newValue: ‘ + newValue)
  console.log(‘oldValue: ‘ + oldValue)
})
 
vm.a = 2
 
</script>
 
</body>
 
</html>
5 Vue实例5.html
 
<!DOCTYPE html>
 
<html>
 
<head>
    
<title>Vue实例</title>
    
 
</head>
 
<body>
 
<script>
 
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log(‘a is: ‘ + this.a)
alert(‘a is: ‘ + this.a)
  }
})
 
</script>
 
</body>
 
</html>

欢迎观看视频教程:https://ke.qq.com/course/432961?tuin=36914f34,如有疑问,请加QQ群665714453交流讨论。
 

Vue.js 实战教程 V2.x(5)Vue实例

标签:数据对象   style   http   net   回调   改变   hellip   name   html   

原文地址:https://www.cnblogs.com/daqiang123/p/11368384.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!