vue选项 实例的属性值 el data methods computed filters watch

el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

在实例挂载之后，元素可以用 vm.$el 访问。

只在用 new 创建实例时生效。

data Vue 实例的数据对象。

Vue 将会递归将 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。

methods: vue实例的方法绑定

不能使用箭头函数

调用时使用this.func()

<template>
  <div class="hello">
    <div @click="pushFunc()">v-on语法糖</div>
    <div @click="pushFunc()">v-on</div>
  </div>
</template>

<script>


export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  methods: {
    pushFunc () {
      let arr = []
      arr.push('nnn')
      arr.push('mmm')
      arr.push('nnn')
      console.log(arr)
      return arr
    }
  },
  async created () {
    console.log(this.pushFunc())
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

computed 计算属性

可定义一些函数

只要data里面的数据发生变化computed会同步改变

缓存：如果data内的数据不发生变化，则无论渲染计算属性多少次都不会再次调用函数

引用时不要加  () ，直接使用名称，当普通属性使用

计算属性分为两个方法：
方法1：get(){}  属性最终的显示值。简写的时候，写的就是该方法中的代码
方法2：set(){}  当外部改变设置的计算属性值时，将掉用该方法。

简写：

<template>
  <div class="hello">
    <div>{{arrString}}</div>
    <div @click="setString()">点击运行set方法</div>
  </div>
</template>

<script>

// import { userLogin, userLoginPost } from '../service/api/user'

export default {
  name: 'HelloWorld',
  data () {
    return {
      userObj: {
        name: 'xuerengui',
        age: 23,
        unit: '岁'
      }
    }
  },
  methods: {
  	setString() {
  	  this.arrString = '张忠谋' // 虽然设置了this.arrString，但是最终显示结果仍旧以计算属性中的get方法为准
  	}
  },
  computed: {
    arrString () { // 简写
      // return Array.from(this.userObj).join('')
      return Object.values(this.userObj).join('')
    }
    // arrString: { // 全写
    //   get () {
    //     return Object.values(this.userObj).join('')
    //   }
    //   set () {
    //     console.log(21) // 当执行methods内的setString方法的时候，将打印21
    //   }
    // }
  },
  async created () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

filters 过滤器 用于对渲染到页面上的数据进行处理

语法：
<div>{{变量|func1(参数2,参数3,...)}}

filters: {
	func1(变量,参数2,参数3,...) {
		return 处理后的结果
	}
}

注：传参过程中，如果只需要进行变量传递，则 | 后的方法内不进行传参；；；如果需要传一个新得参数，则在 | 后的方法中传入参数值，并在方法接参过程中视为第二个

<!--  -->
<template>
<div>
  <ul>
    <li v-for="(val, key) in obj" :key="key">{{val|numToFixed(2)}}-{{key}}</li>
  </ul>
</div>
</template>

<script>
export default {
  name: 'VueBase',
  data () {
    return {
      obj: {
        name: 'sadas',
        name1: '',
        name2: 12,
        name3: 213.23,
        name4: '213.234',
        name6: undefined
      }

    }
  },
  filters: {  // 在这里定义过滤器
    numToFixed (val, num = 2) {
      val = Number(val)
      val = isNaN(val) ? 0 : val
      return val.toFixed(num)
    }
  },
  methods: {
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>

watch 监听数据的变化操作

1、在watch内定义方法，方法名与要监听的属性名一致
方法名(新值,旧值)

2、可以监听计算属性 即computed中的

<!--  -->
<template>
<div>
  <div>{{name}}</div> -->
  <label for="name">watch监听属性值的变化：<input type="text" id="name" v-model="name" /></label>
  <div>数据长度：{{length}}</div>
</div>
</template>

<script>
export default {
  name: 'VueOne',
  data () {
    return {
      name: '',
      length: 0
    }
  },
  watch: {
    name () {
      console.log(this.name)
      this.length = this.name.length
    }
  },
  methods: {
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>