（2）打鸡儿教你Vue.js

女爷i 2021-09-20 12:40 334阅读 0赞

var obj = {}
    Object.defineProperty(obj, 'msg', {
      // 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值
      set: function (newVal, oldVal) {  },
      // 读取 obj.msg 时get方法会被系统调用
      get: function ( newVal, oldVal ) {}
    })

Vue双向绑定  
![image.png][]

语法：v-bind:title=“msg”  
简写：:title=“msg”

<a v-bind:href="url"></a>
    
    <a :href="url"></a>

<a v-on:click="doSomething"></a>
    
    <a @click="doSomething"></a>

![image.png][image.png 1]

key属性  
![image.png][image.png 2]

\-class和style  
![image.png][image.png 3]

提升性能：v-pre  
提升性能：v-once

过滤器 filter  
文本数据格式化

{
       {}}和 v-bind 表达式

全局过滤器

Vue.filter('filterName', function (value) {
      // value 表示要过滤的内容
    })

![image.png][image.png 4]

局部过滤器  
![image.png][image.png 5]

按键值修饰符  
![image.png][image.png 6]

watch是一个对象，键是需要观察的表达式，值是对应回调函数  
![image.png][image.png 7]

文本数据格式化：  
filter

全局过滤器  
局部过滤器

显示的内容由过滤器的返回值决定

Vue.filter('filterName',function(value){
    }

<div>{
       { dataStr | date }}</div>
    <div>{
       { dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>
    
    <script>
    Vue.filter('date',function(value,format){
     // value 要过滤的 字符串内容
     // format 过滤器的参数
     })
    </script>

局部过滤器

{ 
     data: {},
     // 通过 filters 属性创建局部过滤器
     filters: {
      filterName: function(value, format){}
     }
    }

修饰键，鼠标按键修饰符

@keyup.13="submit"
    @keyup.enter="add"
    
    Vue.config.keyCodes.f2 = 113
    @keyup.enter.f2 = "add"

监视数据变化  
watch  
watch是一个对象，键是表达式，值是回调函数

new Vue({
     data: {
      a: 1,
      b: {
       age: 100
      }
     },
     watch: {
     a: function(val, oldVal){
      // val 表示当前值
      // oldVal 表示旧值
     },

计算属性：

var vm = new Vue({
     el: '#app',
     data: {
      firstname: '',
      lastname: ''
     },
     computed: {
     fullname() {
      return this.firstname + this.lastname
     }
     }
    })

computed中的属性不能与data中的属性同名，否则会报错

组件的生命周期函数  
事件

钩子函数 - beforeCreate() - 实例初始化之后  
钩子函数 - created() - 发送请求获取数据  
钩子函数 - beforeMounted() - 在挂载开始之前被调用  
钩子函数 - mounted() - vue实例已经挂载到页面中  
钩子函数 - beforeUpdated()  
钩子函数 - updated()  
钩子函数 - beforeDestroy()  
钩子函数 - destroyed()

axios  
封装ajax，用来发送请求，异步获取数据  
基于Promise的HTTP客户端，用于浏览器和node.js  
[https://github.com/axios/axios][https_github.com_axios_axios]

![image.png][image.png 8]

// 在浏览器中使用，直接引入js文件使用下面的GET/POST请求方式即可
    // 1 引入 axios.js
    // 2 直接调用axios提供的API发送请求
    created: function () {
      axios.get(url)
        .then(function(resp) {})
    }
    
    ---
    // 配合 webpack 使用方式如下：
    import Vue from 'vue'
    import axios from 'axios'
    // 将 axios 添加到 Vue.prototype 中
    Vue.prototype.$axios = axios
    
    ---
    // 在组件中使用：
    methods: {
      getData() {
        this.$axios.get('url')
          .then(res => {})
          .catch(err => {})
      }
    }
    
    ---
    // API使用方式：
    
    axios.get(url[, config])
    axios.post(url[, data[, config]])
    axios(url[, config])
    axios(config)

组件  
父组件到子组件  
props

![image.png][image.png 9]

$on()：绑定自定义事件  
内容分发  
通过 标签指定内容展示区域

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][1240]

吹逼交流群：**711613774**

![吹逼交流群][1240 1]

[image.png]: /images/20210724/4db08646660546169fb99983ef92e360.png
[image.png 1]: /images/20210724/372e0245f8794792b684deefa5007d63.png
[image.png 2]: /images/20210724/fa4dec50451b47699af8f736fc262d30.png
[image.png 3]: /images/20210724/60b30689ebda4b4f8a3f6091a8360816.png
[image.png 4]: /images/20210724/28f9203c1932449f91c75fd40c3fef16.png
[image.png 5]: /images/20210724/0f75876cc17f43b3a21438c2baaa995c.png
[image.png 6]: /images/20210724/4d3f98a68db840749645e2b0dd873c75.png
[image.png 7]: /images/20210724/57cf0a47f9fd4718abcbf0ddb55514f5.png
[https_github.com_axios_axios]: https://github.com/axios/axios
[image.png 8]: /images/20210724/9a4e29ce105b40d5aedad8924c4b7b1c.png
[image.png 9]: /images/20210724/31d66d3a9a7e4b449741c40c00cc3adc.png
[1240]: /images/20210724/00cff419f500485bb78be5b409990662.png
[1240 1]: /images/20210724/b8dd0342aaf44095b77b70f6bff85100.png