vue基础:

1,一个VUE项目往往是由多个vue实例对象组成的,
2,组件也是vue的实例对象
3,vm.$xxx //xxx是vue实例对象中的属性或方法

初始化实例对象:

new vue({
el:'#app'
data:{}
methods:{}
1.是方法，主动调用
2.每次需要重新加载
3.无缓存性
watch:{}
1.是观察的动作，自动执行
2.应用：监听props， $emit或本组件的值执行异步操作 3.无缓存性，页面重新渲染时值不变化也会执行 set get computed:{} 1.是计算值，自动执行 2.应用：就是简化tempalte里面{{}}计算和处理props或$ emit的传值
3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

指令:

v-for='item in list'
v-on:click="绑定事件" 简写@click
v-model='双向数据绑定'
v-bind:content="item" 赋值?
v-text='name1'
v-html="name2+'hahA'" 解析html
{{name+'haha'}}
以上三个表达式中可拼接字符串

条件渲染:

1v-if='' 值控制是否存在dom
2v-show='' display:none 没有dom操作,相对性能高
3v-if v-else 便签必须连在一起写 (if值为false时显示else的内容)
v-if v-else-if v-else
当input内值被复用时,用不同的key值区别,防止复用bug,唯一标识

列表渲染:

<div v-for='(item,index) of info' :key='item.id'>
给info添加新值时:set方法:
对象:vue. $set(info,'键','值') 数组:vue.$ set(info,index,item)

样式绑定:

1对象法:class='{activated:isactivated}'
//控制data中的isactivated
2数组法
:class='[activated,changed,,]'
3:style="[c1,{background:'yellow'}

组件:

注册组件:

1组件名字,驼峰命名,,在使用时需将大写字母变为'-'+'小写'
2引用父组件加props
3

组件相关用法:

一:is属性: is="组件名"
解决模板命名与html标签嵌套规则冲突的时候可能会产生bug的情况
例如;<tabel><tr> <ul><li> <ol><li> <dl><dt><dd> <select><option>

<aa-a><aa-a>
方法一:
注册全局组件 :
Vue.component('组件名aaA',{})

方法二:
注册局部组件
var zujian={
props:['content'] //要接受的父组件的?值
template:"<li>{{content}}<li>"
}

组件传值:

父传子:props:[]
子传父:

生命周期钩子:

beforeCreate 实例初始化后,数据观测事件监听未被配置之前
created数据观测事件监听配置后,实例创建完成,未挂载el
beforeMount挂载el到html前,相关render函数被调用,读取模板
mounted挂载el后
beforeDestroy实例销毁前
destoryed实例销毁后
beforeUpdated 数据有更新,未被渲染前
updated数据更新渲染后

VUE basic