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>
表单修饰符
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的生命周期函数
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)
})
}
})
