Vue.js 实战教程 V2.xVue实例

Posted daqiang123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js 实战教程 V2.xVue实例相关的知识,希望对你有一定的参考价值。

 技术图片

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.xVue实例的主要内容,如果未能解决你的问题,请参考以下文章

Vue基础入门到项目实战教程 —— Vue.js下载与安装

Vue.js 实战教程 V2.x模板语法

Vue.js 实战教程 V2.x第一个Vue.js程序

热烈庆祝《Vue.js 实战教程 V2.x基础篇》上线了!

最新vue.js完整视频教程12套

Vue.js 实战教程(附demo)