学习vue.js
程序员文章站
2024-03-22 23:57:04
...
学习vue.js
1、vue文件由<template></template><script></script><style></style>
三部分组成
2、vue组件的重要选项
export default {
data : {
name: 'RSA加密',
options: [{
value: 'kaifa',
label: '开发'
}, {
value: 'uat',
label: '测试'
}],
value: ''
},
components: {
HeaderList,//注意如果是驼峰,标签调用组件时,将会被转成小写-,例:header-list
Side
}
//使用methods还是computed ,取决于是否需要缓存
methods:{//方法
doThis(){
console.log(this.name)
}
},
computed :{//计算
},
watch : {//监听
name:function(val) {
this.name = val;
}
}
}
3、vue模板指令
数据渲染v-text/v-html/{{}}
<p>{{name}}</p>
<p v-text="name"></p>
<p v-html="name"></p>
控制模块隐藏v-show/v-if
<p v-show="name"></p> //代码里可以看到
<p v-if="name"></p>
选择:v-show只是简单的css切换,无论条件都会被编译,适合频繁切换条件,v-if适合条件不经常改变的场景
渲染循环列表v-for
<ul>
<li v-for='option in options'>
<p>option.lable</p>
</li>
</ul>
事件绑定v-on
<button v-on:click="doThis"></button>
v-on的简写方式
<button @click="doThis"></button>
属性绑定v-bind
<div :class="{red:isRed}"></div>//当值为对象时,第一个参数是类的名
<div :class="[classA,classB]"></div>//当值为数组时,都为data的值,有两个class
4、vue组件之间的通信-props
4.1 子组件向父组件传参
4.2 父组件向子组件传参
v-on:click-tell-me //父组件接收
$emit//子组件传参