欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

学习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 子组件向父组件传参

学习vue.js

4.2 父组件向子组件传参

v-on:click-tell-me //父组件接收
$emit//子组件传参