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:{
    
  }
})
复制代码