(2)打鸡儿教你Vue.js

原创
2019/06/26 22:51
阅读数 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

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

image.png

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


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

官方微信公众号

吹逼交流群:711613774

吹逼交流群

本文同步分享在 博客“程序员哆啦A梦”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部