Vue实例的生命周期结构图

最新推荐文章于 2022-11-14 11:07:42 发布

一杯水一支笔

最新推荐文章于 2022-11-14 11:07:42 发布

阅读量281

点赞数

分类专栏：前端 vue

前端同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

Vue实例暴露的接口

而Vue提供了几个暴露的接口：

接口（假设实例为vm）	效果
vm.$data	是vm的data属性
vm.$el	是vm的el属性所指向的dom结点
vm.$watch	示例： vm.$watch(“a”,function(newVal, oldVal){}) 当data里的a变化时，会触发回调函数

更多的可以查看

http://cn.vuejs.org/api/

搜索 $　作为关键词来查看。

$mount()手动挂载

当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；

假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如：

<div id= "app">
{{a}}
< /div>
<button οnclick="test()">挂载</button>
<script>
var obj = { a: 1}
var vm = new Vue({
data: obj
})
function test() {
vm.$mount( "#app");
}

初始，显示的是{{a}}

当点击按钮后，变成了1

用Vue的v-for写一个表格

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  > 
 

 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "utf-8" 
   /> 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "IE=edge" 
  > 
 
 
  < 
  title 
  >Page Title 
  </ 
  title 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1" 
  > 
 
 
  < 
  script 
  src= 
  "https://cdn.bootcss.com/vue/2.2.2/vue.min.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  id= 
  "app" 
  > 
 
 
  < 
  button 
  onclick= 
  "load()" 
  >点击挂载表格 
  </ 
  button 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  style 
  > 
 
 
  table { 
 
 
  border-collapse: 
  collapse; 
 
 
  border-spacing: 
  0; 
 
 
  border-left: 
  1px 
  solid 
  #888; 
 
 
  border-top: 
  1px 
  solid 
  #888; 
 
 
  background: 
  #efefef; 
 

   } 
 
 
 
 
  th, td { 
 
 
  border-right: 
  1px 
  solid 
  #888; 
 
 
  border-bottom: 
  1px 
  solid 
  #888; 
 
 
  padding: 
  5px 
  15px; 
 

   } 
 
 
 
 
  th { 
 
 
  font-weight: 
  bold; 
 
 
  background: 
  #ccc; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  < 
  script 
  > 
 
 
  var 
  obj = { 
 
 
  grid: [ 
 

   { 
  id: 
  "ID", 
  name: 
  "名字", 
  description: 
  "描述", 
  clickButton: 
  "点击事件"}, 
 

   { 
  id: 
  "1", 
  name: 
  "a", 
  description: 
  "amorous", 
  clickButton: 
  "点击弹窗"}, 
 

   { 
  id: 
  "2", 
  name: 
  "b", 
  description: 
  "beautiful", 
  clickButton: 
  "点击弹窗"}, 
 

   { 
  id: 
  "3", 
  name: 
  "c", 
  description: 
  "clever", 
  clickButton: 
  "点击弹窗"}, 
 

   { 
  id: 
  "4", 
  name: 
  "d", 
  description: 
  "delicious", 
  clickButton: 
  "点击弹窗"}, 
 

   ] 
 

   } 
 
 
  var 
  vm = 
  new 
  Vue({ 
 
 
  data: 
  obj, 
 
 
  template: 
  '<table><tr v-for="(row,index) in grid">' + 
 
 
  '<td>{{row.id}}</td>' + 
 
 
  '<td>{{row.name}}</td>' + 
 
 
  '<td>{{row.description}}</td>' + 
 
 
  '<td><button v-on:click="alert(index)">{{row.clickButton}}</button></td>' + 
 
 
  '</tr></table>', 
 
 
  methods: { 
 
 
  alert 
  : 
  function ( 
  index) { 
 
 
  alert( 
  "该行是第" + 
  index + 
  "行") 
 

   } 
 

   } 
 

   }) 
 
 
  function 
  load() { 
 
 
  vm. 
  $mount( 
  "#app"); 
 

   } 
 
 
  < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 

视图：

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  script 
  type= 
  "text/javascript" 
  src= 
  "../assets/js/vue.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  < 
  title 
  >构造器的声明周期 
  </ 
  title 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  h1 
  >构造器的声明周期 
  </ 
  h1 
  > 
 
 
  < 
  hr 
  > 
 
 
  < 
  div 
  id= 
  "app" 
  > 
 

   {{message}} 
 
 
  < 
  p 
  >< 
  button @ 
  click= 
  "jia" 
  >加分 
  </ 
  button 
  ></ 
  p 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  button 
  onclick= 
  "app.$destroy()" 
  >销毁 
  </ 
  button 
  > 
 

 
  < 
  script 
  type= 
  "text/javascript" 
  > 
 
 
  var 
  app= 
  new 
  Vue({ 
 
 
  el: 
  '#app', 
 
 
  data:{ 
 
 
  message: 
  1 
 

   }, 
 
 
  methods:{ 
 
 
  jia 
  : 
  function(){ 
 
 
  this. 
  message ++; 
 

   } 
 

   }, 
 
 
  beforeCreate 
  : 
  function(){ 
 
 
  console. 
  log( 
  '1-beforeCreate 初始化之后'); 
 

   }, 
 
 
  created 
  : 
  function(){ 
 
 
  console. 
  log( 
  '2-created 创建完成'); 
 

   }, 
 
 
  beforeMount 
  : 
  function(){ 
 
 
  console. 
  log( 
  '3-beforeMount 挂载之前'); 
 

   }, 
 
 
  mounted 
  : 
  function(){ 
 
 
  console. 
  log( 
  '4-mounted 被创建'); 
 

   }, 
 
 
  beforeUpdate 
  : 
  function(){ 
 
 
  console. 
  log( 
  '5-beforeUpdate 数据更新前'); 
 

   }, 
 
 
  updated 
  : 
  function(){ 
 
 
  console. 
  log( 
  '6-updated 被更新后'); 
 

   }, 
 
 
  activated 
  : 
  function(){ 
 
 
  console. 
  log( 
  '7-activated'); 
 

   }, 
 
 
  deactivated 
  : 
  function(){ 
 
 
  console. 
  log( 
  '8-deactivated'); 
 

   }, 
 
 
  beforeDestroy 
  : 
  function(){ 
 
 
  console. 
  log( 
  '9-beforeDestroy 销毁之前'); 
 

   }, 
 
 
  destroyed 
  : 
  function(){ 
 
 
  console. 
  log( 
  '10-destroyed 销毁之后') 
 

   } 
 


   }) 
 
 
  < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 