# vue

**Repository Path**: hackjiyi/vue

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-01
- **Last Updated**: 2021-09-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# svue知识点

## 模板语法

- 双向绑定(view到data, data到view)
  - [ ] DOM监听

    DOM原始变化监听修改data中的值

  - [ ] 数据绑定

    data中值变化绑定的view也跟着变化

![](https://gitee.com/hackjiyi/vue/raw/master/img//微信图片_20210701112243.png)

- 双大括号表达式

  ```vue
  {{var_name}}等价v-text或者v-html
  
  ```

  

- 强制数据绑定

  ```vue
  # v-bind: 或者 :
  <img v-bind:src="imgUrl">
  ```

  

- 绑定事件监听

  ```vue
  #v-on:事件名="方法名" 或 @事件名="方法名"
  <button v-on:click="test"></button>
  <button @click="test(msg)"></button>
  
  methods: {
      test: function (msg) {
          alert(msg);
      }
  }
  ```

  

## 计算属性和监视

- 计算属性

  - [ ] 说明

    一个属性自己本身或者其他属性且需要进行加工或者计算的都应该用计算属性, 它在初始化和依赖属性值发生变化时调用，属性不需要在data定义, 该属性具有缓存的效果

    

  - [ ] 示例

    ```vue
    // 单向
    computed: {
    	fullname1 () {
    		return this.firName + ' ' + this.lastName;
    	}
    }
    
    // 双向(fullname1改变了也要改变firName和lastName)
    computed: {
    	fullname1: {
    		get() {
    			return this.firName + ' ' + this.lastName;
    		},
    		set(value) {
    			let names = value.split(' ');
    			this.firname = names[0];
    			this.lastName = names[1];
    		}
    	}
    }
    ```

    

- 监视

  - [ ] 说明

    指定要监听的属性,属性改变的时候将该属性的监视方法, 且将改变前和改变后的值传入回调方法方法, 属性名必须在data提前定义

  - [ ] 示例

    ```
    watch: {
    	firstName: function(newValue, oldValue) {
    		this.fullName = newValue + ' ' + this.lastName;
    	},
    	lastName: function(newValue, oldValue) {
    		this.fullName = this.lastName + ' ' + newValue;
    	}
    }
    ```

    

## class与style绑定

- class
  - [ ] 说明

    使用:class绑定class, 值可以为字符串、对象、数组

  - [ ] 示例

    ```vue
    <style>
        .red {color: red}
        .font {font-size : 14px}
    </style>
    
    <p :class="A"></p>
    <!--属性为类名, 值为bool, true才启用-->
    <p :class="{red: true, font: false}"></p>
    <p :class="['red', 'font']"></p>
    <p :class="B"></p>
    data: {
    	A: "red",
    	B: {
    		red: true,
    		font: true
    	}
    }
    ```

    

- style
  - [ ] 说明

    使用:style绑定样式

  - [ ] 示例

    ```vue
    <div id="app">
    		<div>
    			<p :class="A">测试的文字</p>
    			<p :class="{red: false, font: true}">测试的文字</p>
    			<p :class="B">测试的文字</p>
    			<p :class="['font', 'red']">测试的文字</p>
    			<p :class="C">测试的文字</p>
    		</div>
    		<div>
    			<p :style="{color:'red'}">测试的文字</p>
    			<p :style="{color:D}">测试的文字</p>
    			<p :style="E">测试的文字</p>
    		</div>
    	</div>
    
    		data: {
    				A: 'red',
    				B: {
    					red: false,
    					font: true
    				},
    				C: ['font', 'red'],
    				D: 'red',
    				E: {
    					'color': 'red',
    					'font-size': '50PX'
    				}
    			}
    ```

    

## 条件渲染

- v-if
  - [ ] 说明

    用于判断属性

  - [ ] 示例

    ```vue
    <p>
        <span v-if="result == 1">结果1</span>
        <span v-else>结果2</span>
    </p>
    
    	data: {
    				result: 2,
    			}
    ```

    

- v-show
  - [ ] 说明

    是否显示，display: none

  - [ ] 示例

    <p>
        <span v-if="result == 1">结果1</span>
        <span v-else>结果2</span>
    </p>

    	<p>
    	    <span v-show="result1">结果1</span>
    	    <span v-show=" ! result1">结果2</span>
    	</p>
    	
    		data: {
    					result1: 0,
    				}

## 列表渲染

- v-for数组

  - [ ] 说明

    以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 `key` attribute

    vue重写了数组的方法, 让他数据项变化的时候重新渲染页面数据, 例如persons[index] = updatePersons是不更新页面的;

    - `push()`
    - `pop()`
    - `shift()`
    - `unshift()`
    - `splice()`
    - `sort()`
    - `reverse()`

    替换数组, 以下函数总会返回一个新的数组地址，不会变更原始数组

    - `filter()`
    - `concat()`
    - slice()

  - [ ] 示例

    ```vue
    <p v-for="(item, key) in persons">
    		<span>{{item.id}}</span>
    		-----------
    		<span>{{item.name}}</span>
    		-----------
    		<span>{{item.age}}</span>
    	</p>
    	
    	
    	data: {
    			persons: [
    				{id: 1, name: 'jack', age: 19},
    				{id: 2, name: 'pert', age: 21},
    				{id: 3, name: 'jams', age: 28},
    				{id: 4, name: 'krly', age: 30}
    			]
    		}
    ```

    

- v-for对象

  - [ ] 说明

    在遍历对象时，会按 `Object.keys()` 的结果遍历，但是**不能**保证它的结果在不同的 JavaScript 引擎下都一致

  - [ ] 示例

    ```vue
    <div v-for="(value, name, index) in object">
      {{ index }}. {{ name }}: {{ value }}
    </div>
    ```

    

## 事件处理

- 绑定监听
  - [ ] 说明

    $event一个特殊的变量, 指的是事件对象,如果方法没有传任何参数则会自动将$event作为参数传入

  - [ ] 示例

    ```vue
    <p>
    	<button @click="test1">测试1</button>
    	<button @click="test2">测试2</button>	
    	<button @click="test3($event)">测试3</button>	
        <button @click="test4('123', $event)">测试4</button>	
    </p>
    
    
    methods: {
    			test1: function() {
    				alert('1111');
    			},
    			test2: function(event) {
    				alert(event.target.nodeName);
    			},
    			test3: function(event) {
    				alert(event.target.nodeName);
    			},
    			test4: function(name, event) {
    				alert(event.target.nodeName);
    			}
    		}
    ```

    

- 事件修饰符
  - [ ] 说明

    默认情况下, 内部的事件也会触发外部事件, 事件冒泡机制, 使用@事件名.stop终止事件冒泡, 使用@事件名.prevent终止事件的默认行为

  - [ ] 示例

    ```vue
    	<div id="app">
    		<!---->
    		<div style="width: 200px; height: 200px; background-color: red" @click="test1">
    			<div style="width: 100px;height: 100px;background-color: blue" @click.stop="test2"></div>
    		</div>
            
            <a href="www.baidu.com" @click.prevent="test3">测试</a>
    	</div>
    	
    	methods: {
    				test1: function() {
    					alert('out');
    				},
    				test2: function() {
    					alert('inner');
    				},
    				test3: function() {
    					alert('test3');
    				}
    			}
    ```

    

- 按键修饰符
  - [ ] 说明

    @keyup和@keydown可以通过.keyCode实现对某个特点键的监听

  - [ ] 示例

    ```vue
    <input type="text" @keyup.13="test">
    
    methods: {
    				test: function (event) {
    					alert(event.target.value);
    				}
    			}
    ```

    

## 表单输入绑定

- 表单数据自动收集
  - [ ] 说明

    使用v-model实现数据双向绑定

  - [ ] 示例

    ```vue
    
    <form @submit.prevent="submitHandle">
    		<p>
    			<span>用户名:</span>
    			<span><input type="text" v-model="formData.userName"></span>
    		</p>
    		<p>
    			<span>密码:</span>
    			<span><input type="text" v-model="formData.pwd"></span>
    		</p>
    		<p>
    			<span>性别:</span>
    			<span>
    				<input type="radio" value="男" v-model="formData.sex">男
    				<input type="radio" value="女" v-model="formData.sex">女
    			</span>
    		</p>
    		<p>
    			<span>爱好:</span>
    			<span>
    				<input type="checkbox" value="足球" v-model="formData.likes">足球
    
    				<input type="checkbox" value="篮球" v-model="formData.likes">篮球
    
    				<input type="checkbox" value="看书" v-model="formData.likes">看书
    			</span>
    		</p>
    
    		<p>
    			<span>城市:</span>
    			<span>
    				<select v-model="formData.cityId">
    					<option value="0">请选择</option>
    					<option :value="item.id" v-for="(item, index) in allCitys" :key="index">{{item.text}}</option>
    				</select>
    			</span>
    		</p>
    
    		<p>
    			<span>备注:</span>
    			<span>
    				<textarea v-model="formData.remark"></textarea>
    			</span>
    		</p>
    
    		<p>
    			<button type="submit">提交</button>
    		</p>
    	</form>
    
    
    data: {
    	formData: {
    		userName: '',
    		pwd: '',
    		sex: '男',
    		likes: [],
    		cityId: 0,
    		remark: ''
    	},			
    	allCitys: [
    		{id: 1, text: "北京"},
    		{id: 2, text: "上海"},
    		{id: 3, text: "深圳"}
    	],
    },
    methods: {
    	submitHandle: function() {
    		console.log(this.formData);
    	}
    }
    
    ```

    

## Vue实例_生命周期

- 说明

  Vue的生命周期分为三个阶段初始化(created、beforeMount、mounted)、更新(beforeUpdate、updated)、销毁(beforeDestroy、destroyed)

  ![image-20210705094230665](https://gitee.com/hackjiyi/vue/raw/master/img//image-20210705094230665.png)

## 过滤&动画

- 过渡

  - [ ] 示例

    ```vue
    <style type="text/css">
    	.fade-enter-active, .fade-leave-active {
      		transition: opacity .5s;
    	}
    	.fade-enter, .fade-leave-to {
      		opacity: 0;
    	}
    </style>
    
    <div id="demo">
    	<button v-on:click="show = !show">
    	   Toggle
    	</button>
    	<transition name="fade">
    	   <p v-if="show">hello</p>
    	</transition>
    </div>
    
    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
    ```

    

- 动画

  - [ ] 示例

    ```vue
    <style type="text/css">
    	.bounce-enter-active {
            animation: bounce-in .5s;
    	}
    	.bounce-leave-active {
    	  	animation: bounce-in .5s reverse;
    	}
    	@keyframes bounce-in {
    	  0% {
    	    transform: scale(0);
    	  }
    	  50% {
    	    transform: scale(1.5);
    	  }
    	  100% {
    	    transform: scale(1);
    	  }
    </style>
    
    <div id="demo">
      	<button @click="show = !show">Toggle show</button>
      	<br />
    	<transition name="bounce">
        	<p v-if="show" style="display: inline-block;">Lorem ipsum dolor sit amet</p>
      	</transition>
    </div>
    
    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
    ```

    

## 过滤器

- 自定义过滤器

  ```vue
  <div id="app">
  	<p>时间: {{date}}</p>
  	<p>
  		完整版{{date | dataString}}
  	</p>
  	<p>
  		年月日{{date | dataString('YYYY-MM-DD')}}
  	</p>
  	<p>
  		时分秒{{date | dataString('HH:mm:ss')}}
  	</p>
  </div>
  
  // 自定义过滤器
  Vue.filter('dataString', function(value, format) {
  	var formatStr = format != undefined? format: 'YYYY-MM-DD HH:mm:ss';
  	return moment(value).format(formatStr);
  });
  
  var vm = new Vue({
  	el: '#app',
  	data: {
  		date: new Date()
  	}
  });
  ```

  

## 指令

- 内置指令

  - [ ] v-text

    更新元素的textContent

  - [ ] v-html

    更新元素的innerHTML

  - [ ] v-if

    如果为true, 当前标签才会输出到页面

  - [ ] v-else

    如果为false,当前标签才会输出到页面

  - [ ] v-show

    通过控制display样式来控制显示/隐藏

  - [ ] v-for

    遍历数组/对象

  - [ ] v-on

    绑定事件监听

  - [ ] v-bind

    强制绑定解析表达式

  - [ ] v-model

    双向数据绑定

  - [ ] ref

    指定唯一标识, vue对象通过$refs属性访问这个元素对象

  - [ ] v-cloak

    防止闪现, 与css配合:[v-cloak]{display:none}

- 自定义指令

  ```vue
  <div id="app">
  	<p v-upper-text="msg"></p>
  </div>
  	
  Vue.directive('upper-text', function(el, binding){
  	el.textContent = binding.value.toUpperCase();
  });
  
  var vm = new Vue({
  	el: '#app',
  	data: {
  		msg: 'I Love Like Book'
  	}
  });
  ```

  

## 插件

- 自定义插件

  ```vue
  // 调用MyPulgin.install方法
  Vue.use(MyPulgin);
  
  // 调用全局方法
  Vue.myGlobalMethod();
  
  var vm = new Vue({
  	el: '#app',
  	data: {
  		msg: 'I Love Like Book'
  	}
  });
  
  // 调用实例方法
  vm.$myMethod();
  		
  		
  (function(){
  	// 定义一个实例对象
  	const MyPulgin = {};
  
  	// 实现install方法
  	MyPulgin.install = function(Vue, options) {
  
  		// 定义全局方法
  		Vue.myGlobalMethod = function() {
  			// 调用全局方法
  			console.log("调用全局方法myGlobalMethod");
  		}
  
  		// 定义指令
  		Vue.directive('upper-text-plugin', function(el, binding){ 
  			el.textContent = binding.value.toUpperCase();
  		})
  
  		// 实例方法
  		Vue.prototype.$myMethod = function() {
  			console.log("myMethod");
  		}
  	}
  
  	window.MyPulgin = MyPulgin;
  })()
  		
  		
  ```

  

## 其他

参考资料

​	视频地址

​		尚硅谷：https://www.bilibili.com/video/av59658020?p=2&spm_id_from=pageDriver