1. 事件处理

v-on:click @click v-on:change @change
v-on:click="fn()"
v-on:click="fn($event)"
v-on:click="fn('params')
v-on:click="fn(msg)" msg为变量

2. 事件修饰符

阻止冒泡 v-on:click.stop="fn()"
阻止默认事件 v-on:click.prevent="fn"
阻止冒泡阻止默认事件 v-on:click.stop.prevent="fn"
.capture 添加事件监听器时使用事件捕获模式即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。

3. 按键修饰符

以前如果有一个表单输入框，当你输入之后敲回车想要打印值

<input onchange="fn(event)" id="name" />
if (event.keyCode === 13) {name.value}

vue

<input @change.enter="fn()" id="name" />
.tab
.delete
.esc
.space
.up
.down
.left
.right

4. 表单输入绑定

v-model

唯一特殊的就是 checkbox
如果初始值为数组，则表示多选框
如果初始值为 boolean，则表示真假 --- 购物车中的选择
04表单输入

<input type="text" v-model="username"> {{ username }} <br />
<input type="password" v-model="password"> {{ password }} <br />
<input type="radio" value="男" v-model="sex"> 男
<input type="radio" value="女" v-model="sex"> 女 {{ sex }}<br />
<input type="checkbox" value="篮球" v-model="hobby"> 篮球
<input type="checkbox" value="足球" v-model="hobby"> 足球
<input type="checkbox" value="排球" v-model="hobby"> 排球 {{ hobby }} <br />
<textarea v-model="note"></textarea>{{ note }}<br />
<select v-model="lesson">
<option value="一阶段">一阶段</option>
<option value="二阶段">二阶段</option>
<option value="三阶段">三阶段</option>
</select> {{ lesson }}<br />
<input type="checkbox" v-model="flag"> 已阅读协议<br />
<button @click="getData">记录信息</button>

image.png

表单修饰符
v-model.lazy 失去焦点或者按回车键时才会运算
v-model.trim 得到的值去除两端空格
v-model.number 唤起数字键盘
原生js如果要做正则的校验，失去焦点、键盘弹起时
vue 中可以使用侦听属性或者计算属性去做

5. 计算属性

任何复杂的业务逻辑，我们都应当使用计算属性。

在特定条件下，计算属性要优于方法

计算属性具有依赖性，计算属性依赖 data中的初始值，只有当初始值改变的时候，计算属性才会再次计算

计算属性一般书写为一个函数，返回了一个值，这个值具有依赖性，只有依赖的那个值发生改变，他才会重新计算 app.msg = "hello 1902"

也就是说：计算属性是具有依赖性的，它依赖于data中已经存在的数据，通过computed内所定义的函数来对data中的数据做出改变，而且只有当data中的那个数据发生变化时，computed才会重新计算。

原始数据： {{ msg }} <br />
计算属性的值： {{ computedMsg }} - {{ computedMsg }} -{{ computedMsg }} <br />
方法实现： {{ reversemsgfn() }} - {{ reversemsgfn() }}- {{ reversemsgfn() }}

computed: { // 计算属性 ，计算属性可以依据data中的初始数据转换而来，可以像data中的数据一样使用，一般为函数，返回一个值
computedMsg () {
    console.log('computed') // 执行一次
        return this.msg.split('').reverse().join('')
    }
},
methods: {
    reversemsgfn () {
        console.log('methods') // 执行3次
        return this.msg.split('').reverse().join('')
    }
}

6. 方法methods

methods也可以改变数据，是通过类似于click的方式改变数据，但是要在data中申明这个数据，否则页面获取不到

7. 侦听属性(监听属性)

侦听属性只监听数据变化，不会对页面产生渲染，渲染效果主要靠data, 在特定条件下，计算属性要优于侦听属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>方法</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="firstname">
    <input type="text" v-model="lastname">
    {{ fullname }}
  </div>
</body>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      firstname: 'wu',
      lastname: 'daxun',
      fullname: 'wu daxun'
    },
    watch: { // 侦听属性
      firstname (newval, oldval) {
        this.fullname = newval + this.lastname
      },
      lastname (newval, oldval) {
        this.fullname = this.firstname + newval 
      }
    }
  })
</script>
</html>

8. vue的生命周期函数

image.png

beforeCreate：开始初始化 vue实例的挂载元素el和数据对象data都为undefined
created：初始化完成 vue实例的数据对象data有了，el还没有，可以进行computed.watch监听之后询问是否有el或template
beforeMount：vue实例的el和data都初始化了，但还是虚拟的dom节点
mounted：vue实例挂载完成,data渲染完成
beforeUpdate：data发生变化时执行
updated：发生变化的data，重新渲染到dom元素上之后
beforeDestroy：销毁前 vm.$destroy();
destroyed：销毁完成 vue实例解除了事件监听以及和dom的双向绑定（无响应了），但DOM节点依旧存在

用的最多的还是mounted>created>updata>destoryed

9. axios

必须得安装之后才能使用 cnpm i axios
axios.get(url).then(res => {console.log(res.data)})
axios.post(url, {}).then(res => {console.log(res.data)})

  new Vue({
    el: '#app',
    mounted () {
      axios.get('https://www.daxunxun.com/banner').then(res => {
        console.log(res.data)
      })
      axios.post('https://www.daxunxun.com/users/login', {
        username:'17777777777',
        password: '1234567'
      }).then(res => {
        console.log(res.data)
      })
    }
  })

浅谈Vue_02