（2）打鸡儿教你Vue.js

达达前端

发布于 2019-07-03 10:53:25

5760

发布于 2019-07-03 10:53:25

文章被收录于专栏：达达前端

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

key属性

image.png

-class和style

image.png

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

过滤器 filter 文本数据格式化

{{}}和 v-bind 表达式

全局过滤器

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

image.png

局部过滤器

image.png

按键值修饰符

image.png

watch是一个对象，键是需要观察的表达式，值是对应回调函数

image.png

文本数据格式化： 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

image.png

// 在浏览器中使用，直接引入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)

const url = 'http://'

axios.get('/user?id=')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
  params: {
    id: 123
  }
})

组件父组件到子组件 props