接触vue
公司项目开始需要前后端分离,选用Vue学习成本相对较低,
在此记录下笔记
Vue实例对象代理data数据
var data ={a:1,b:2,c:3}
var vm = new Vue({data:data})
vm.a === data.a //true
//2者改变其一数据都会发生改变
Vue实例的实例属性及方法
vm.$data === data //true
vm.$el === document.getElementById("app")
//变量监听
vm.$watch("a",function(新值, 旧值){ })
vue 的指令
//都是实时更新的
v-if="变量" //可通过变量来控制元素是否显示
v-else
v-bind:title="变量" //绑定属性 属性值不能用{{变量}} 这与ng不同 如果变量=false 表示移除属性
v-bind // 的缩写 :title="变量"
v-for="list in lists" //因为是实时的 所以增减 lists 比如lists.push()
v-on:"methods" //绑定事件 缩写@on:click="meth"
<input v-model="message"> //利用 v-model 双向绑定表单输入值
v-once //数据一次性插入 当变量改变 数据也不会改变
<span v-once>This will never change: {{ msg }} </span>
vue 组件函数
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
//创建一个组件 利用props 拿到父传下的参数
vue 的周期函数
var app = new Vue({
created:function(){ }, // 实例已经创造
beforeCompile:function(){}, // 模板编译之前
compiled:function(){}, //模板编译之后
ready:function(){}, //插入到文档中时
beforeDestroy:function(){}, // 册除之前
destroyed:function(){} //册出之后
})
销毁vue对象函数
app.$destroy();
vue({})参数对象里已有属性
var vm =new vue({
el:"###id",
data:data
computed:{ //计算属性默认
xxx:funcation(){} // 处理data在渲染 *注意必修在依赖的属性发生改变时 才会执行函数* 所以methods 里的方法不能代替此方法
}
filters:{
xxx:function(){} //过滤器函数
}
})
methods:{
xxx:function(){}
}
watch:{
xxx:function(val){} // 监听
}
vue修饰符
<form v-on:submit.prevent="onSubmit"></form> // .prevent取消默认行为
vue特殊函数
_.debounce(function(){},500) //等待500ms 渲染
vue对象与数组语法来定义样式
>对象
//直接
<div v-bind:style='{active:isActive,error:isError}'></div>
//存对象
<div v-bind:style='styleObject'></div>
style:{active:true,error:fasle}
//存计算属性
<div v-bind:style='styleObject'></div>
computed:{
styleobject:function(){
return {active:true,error:false}
}
}
>数组
//2种 1只能直接存变量
<div v-bind:style='[activeclass,errorclass]'></div>
dsata:{
activeclass:'active',
errorcalss:'error'
}
//数组里包含 三目运算 多个以逗号隔开
<div v-bind:style='[isActive?active:"" ,"error"]'></div>
//组件标签 定义的class 子类都会继承
vue v-if v-else-if v-else
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
//在组建判断时 input加 key键可标示 唯一性
<input placeholder="Enter your username" key="username-input">
// v-show 与 v-if 的区别就是 v-show 产生的是 display:none 效果 v-if是直接未生成或未插入 频繁切换使用v-show
<h1 v-show="ok">Hello!</h1>
vue v-for
//可接受 第二个参数 为插入的 索引index
ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
//可接受三个参数
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
//还可自动解析循环对象
ul id="repeat-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>