# vue

**Repository Path**: duyuankang/vue

## Basic Information

- **Project Name**: vue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-28
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue

### 三、vue常用指令

* v-model：双向绑定

* v-html：输出带有html标签的内容

* v-on：绑定事件

* v-for：循环操作

* v-show：代码的隐藏或展示（display：none）

* v-if：代码的隐藏或展示（会完全移除代码）

* v-cloak：在网络环境差时，使用此属性可以隐藏{{}}中的内容，优化用户体验，需要搭配css使用

  ```javascript
  [v-cloak] {display: none;}
  ```

* v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。**（双向绑定的元素，添加这个指令后，数据的改变不会引起dom端数据的改变）**
* v-pre：跳过此元素的编译，只显示原始Mustache标签

### 四、事件

* v-on可以在vue中简写为 @某某事件 如：@clikc=“事件名”

* vue事件对象：$event

* 事件的冒泡与捕获：

  1.原生js阻止冒泡：e.stopPropagation() （写在methods方法体内）

  2.vue方式阻止冒泡：@click.stop="阻止的事件名"

* 阻止默认事件：与阻止冒泡类似，方法为preventDefault，vue的方式为@click.prevent

### 五、属性

* 绑定属性的几种方式

  * v-bind：(v-bind可以省略不写)

    ```javascript
    <img v-bind:src="imgUrl">
    ```

  * 绑定css中写的

    ```javascript
    <div :class="style1">
    style1: "aa"(在data里写的)
    .aa{
        background-color: #69abff;
    }(写在css里的)
    ```

    

  * 绑定直接写在data中的

    ```javascript
    <div :style="style2">
    style2: "width: 100px;height: 100px;background: #69abff;margin-top: 10px"(在data里写的)
    ```

    

  * 绑定直接写在data中的（以对象形式写的）

    ```javascript
    <div :style="style3">
    style3: {background: "#69abff", marginTop: '10px', width: "100px", height: "100px"}(在data里写的)
    ```

### 六、过滤器

​			适用与vue2.0

* 全局过滤器-注册或获取过滤器

  ```javascript
  // 注册
  Vue.filter('my-filter', function (value) {
    // 返回处理后的值
  })
  
  // getter，返回已注册的过滤器
  var myFilter = Vue.filter('my-filter')
  
  //使用过滤器
   <p>{{imgWidth | my-filter}}</p> //可以直接写在标签中
  ```

* 局部过滤器

  ```javascript
   new Vue({
          el: '#box',
          data: {},
          methods: {},
          filters:{
              dateformat(value){
                  var date=new Date(value);
                  return date.getFullYear()
              }
          },
      });
  ```

### 七、http请求

* vue1.0:vue-resource
* vue2.0:推荐插件：axios

vue可以使用js、jQuery，所以可以使用ajax发送请求 $.get(" ")