vue小白入坑筆記

時間 2019-11-08

標籤 vue 筆記简体版

原文原文鏈接

VUE知識體系

數據
- data：類型：Object|function；在組件中只能接受函數也就是 data () {……}
- props：數組或者對象，用於接收來自父組件傳的數據
- computed：計算屬性，結果會被緩存，會加入到Vue中
- methods：方法
DOM
- el ：Vue 實例掛載目標，掛載以後能夠經過$el訪問
- template：字符串模版，被使用後會代替掛載元素
- render：字符串模版的替代方案
實例屬性
- vm.$data：數據對象
- vm.$props：組件接收到的props對象
- vm.$el：實例使用的根DOM元素
- vm.$slots：訪問被插槽分發的內容
- vm.refs：引向子組件
- is特性：添加一個字符串模版
API
- Vue.extend(options):建立一個構造器
- Vue.set(target, key,calue):設置對象的屬性
- Vue.directive(id,[definition]):註冊或獲取全局指令
- Vue.filter(id,[definition]):註冊或獲取全局過濾器
- Vue.component(id,[definiton]):註冊或獲取全局組件，註冊還會自動使用給定的id設置組件名稱
生命週期鉤子(函數)
- beforeCreate：實例初始化以後
- created：實例建立完成以後被調用
- beforeMount：在掛載開始以前被調用
- mounted：el被新建立的vm.$el替換，掛載到實例上
- beforeUpdate：數據更新前調用
- updated：數據更新後調用
- beforeDestory：實例銷燬前調用
- destoryed：實例銷燬後調用
指令
- v-if
- v-for
- v-on（簡寫@）
- v-bind（簡寫：）
- v-moudel
- v-show

一個簡單的vue實例

new Vue() ----->   設置數據data ----->   掛載元素 ----- > 成功渲染
複製代碼

代碼：javascript

<body>
  <div id="app">
    {{ message }}
  </div>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script> new Vue({ el:'#app', data:{ message:'hello' } }) </script>
複製代碼

自定義指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>自定義指令</title>
<meta name="description" content="">
<meta name="keywords" content="">

</head>
<body>
    <p v-tack class='p'>
     I will now be tacked noto the page
     <input v-focus type='text'>
     <input v-border type='text'>
   </p>
    
</body>
<script type="text/javascript" src='js/vue.min.js'></script>
<script type="text/javascript"> // 自定義全局指令 Vue.directive('border',{ bind(el){ el.style.border='1px red solid' } }) new Vue({ el:'.p', //自定義局部指令 directives:{ tack:{ inserted(el){ el.style.color='red' } }, focus: { // 指令的定義 inserted: function (el) { el.focus() } } } }) </script>
</html>
複製代碼

vue組件

Vue.component('myarticl',{
  props:[],
  template:'',
  render:function(){},
  data:function(){},
  computed:{},
  components:{},
  methods:{}
  watch:{},
  mounted:{},
  filters:{}
})
複製代碼

vue實例

new Vue({
  //實例掛載目標
  el:'#app',
  //設置數據對象
  data:{
  },
  //計算屬性
  computed:{
  },
  //方法
  methods:{
  }
  //監聽 觀察
  watch:{
  },
  //生命週期鉤子函數
  mounted:{
    
  },
  //自定義局部組件
  directives:{
    
  },
  //局部註冊組件
  components:{
    
  }
  //過濾器
  fillters:{
    
  }
})
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。