本文主要记录学习vue的一些基础内容及常用知识点的记录。原文参加个人博客:[vue基础](http://webhmy.com/2018/05/24/vue-base/)
1、脚手架命令
vue init webpack vue-demo
初始化
npm install
安装包依赖
npm run dev
启动可以实现热加载
2、常用参数
基本参数
data
:绑定的数据methods
:方法,this可以指向data中的数据components
:组件局部注册
监听属性
watch
:数据监听,监听data中的数据,如果对应的数据改变,则执行监听逻辑
计算属性
computed
:计算属性,根据其他的值计算出另一个结果。它的重要的特点是每次改变前使用缓存值,如果依赖的值没有改变则不计算。<div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <span>{{fullName}}</span> </div> <script> var vm = new Vue({ el:'#app', data:{ firstName:'', lastName:'' }, computed:{ fullName(){ return this.firstName + this.lastName } } }) </script>
计算属性的getter 和 setter,可以处理双向更改
computed:{ fullName:{ get(){ return this.firstName + this.lastName }, set(val){ var valArr = val.split(','); this.firstName = valArr[0]; this.lastName = valArr[1] } } }
3、vue指令
简单指令
- 数据渲染:
v-text
v-html
- 控制隐藏:
v-show
(操作css) - 事件绑定:
v-on:click
或者@click
后面是methods中的方法,可以写一些键盘事件,比如@keyup.enter
- 属性指令:
:class="{red: isRed}"
:class="[classAName,{classB: isB}]"
其中,classAName
就是类名,但是isB
是布尔值 - 表单指令:
v-model
循环指令
基本使用:v-for="(item,index) in items"
在每条数据的事件绑定可以将数据放在方法里,
例如:v-on:click=cancelEvt(item)
- 1.结合使用
:key="item.id"
提升渲染的性能,key必须是唯一性标注 - 2.不可通过下标的方法改变数据值(数据变化但视图不变),尽量使用数组的原生方法(push/pop/shift/unshift/splice)或者直接改变整个数据的引用或者使用set方法,
例如:vm.$set(vm.items,2,{...})
3.渲染的内容必须在一个dom节点里,可以使用
template
的占位符,用于包裹元素,不可与key同用了~<div id="app"> <div v-for="(item,index) of list" :key="item.id"> <p>{{index+1}}:{{item.title}}</p> <span>{{item.content}}</span> </div> </div>
条件指令
v-if
根据条件显示或隐藏(操作的是dom),一般结合v-else
使用,必须紧贴一起使用
<div id="app">
<div v-if="char === 'a'">This is A</div>
<div v-else-if="char === 'b'">This is B</div>
<div v-else>This is Other</div>
</div>
注意:vue在渲染dom的时候会尝试复用已经存在的dom,如果不需要这样,可以给对应的dom元素在上
key
值,表示唯一性。
4、组件注册
全局注册
<div id="box">
<my-component></my-component>
</div>
<script>
// 全局注册组件
Vue.component('my-component', {
template: '<p>Hi! vue</p>'
})
// 创建根实例
new Vue({
el: '#box'
})
</script>
显示结果
<div id="box">
<p>Hi! vue</p>
</div>
局部注册
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
components: {
'my-component': Child
}
})
5、组件模板
直接定义
Vue.component('myheader',{ template:'<div></div>', data(){...} })
模板定义
<script type="text/x-template" id="myheader"> //这里的模板中的数据必须包含在一个父级标签中 </script>
Vue.component('name',{ template:'#myheader', //这里可以直接写html代码,也可以写模板的ID data(){...} })
6、组件通信
1.父元素向子元素传递数据(通过props
选项):
父组件中使用
<!-- 父组件将值放在属性中--> <mySun mumtell="你是我的儿子"></mySun>
子组件定义
//在.vue的文件中`export default{}` 会自动实例化一个`new Vue({})` export default { props: ['mumtell'],//子获取父的值,然后通过this.mumtell就可以获取对应的值了 };
单向数据流:子组件不可以随意的修改从父组件传过来的参数,防止引用数据的共同改变。可以直接在子组件里复制一份父传来的值
2.子元素向父元素传递数据(通过$emit
事件传送):
父组件中使用
<!-- 父组件使用子组件 --> <mySun v-on:myboy="youson"></mySun> <p>{{sonmsg}}</p>
import mySun from './mySun.vue' export default { data() { return { sonmsg:"" }; }, methods: { youson(msg){ this.sonmsg = msg; } }, components: { mySun } };
子组件定义
export default { data() { return { msg: "我是app的子组件" } }, methods: { subClick() { //儿子告诉爸爸的话用事件触发 this.$emit('myboy',this.msg) } } }
7、动态组件
动态组件,是利用is
属性改变组件的渲染方向,比如
<component v-bind:is="currentTabComponent"></component>
如果这个时候currentTabComponent
值决定渲染的组件名,一般可结合计算属性一起使用。is属性也可以放在特定的嵌套的标签中,保证渲染不出错。
<table>
<tr is="subItem"></tr>
</table>