VUE
案例：input自动获取焦点
1. DOM操作
<!-- DOM版 -->
<div id="app">
<input type="text" vimodel="val" ref="focusinput">
</div>
<script>
var vm = new Vue({
el: "#app",
mounted () {
this.$refs.focusinput.focus();
}
})
</script>
（1）ref属性表示对dom的引用，ref值自定义，但不能重复
2. 自定义指令 -- Vue.directive
<!-- Vue.directive版 -->
<div id="app">
<input type="text" vimodel="val" v-focus>
</div>
<script>
Vue.directive("focus", {
inserted(el, binding) {
el.focus();
}
})
var vm = new Vue({
el: "#app",
})
</script>
（1） Vue.directive（param1,param2）
param1 -- 1)自定义指令的名字 。2)全部小写，不能驼峰命名，可使用_或-
param2 -- 对象，表示配置项
（2） 命名不加v，focus | 使用要加v，v-focus
（3）inserted
自定义指令对象提供的钩子函数之一。绑定元素插入父节点时调用。
3. 过滤器 -- Vue.filter
<div id="app">
<!-- 使用：数据后 + 管道符| + 过滤器名(参数) -->
<p>{{ctime | formatTime("/")}}</p>
</div>
<script>
Vue.filter("formatTime", (ctime, sep) => {
let y = ctime.getFullYear();
let m = ctime.getMonth() + 1;
let d = ctime.getDate();
return y + sep + m + sep + d;
})
var vm = new Vue({
el: "#app",
data: {
ctime: new Date(),
}
})
</script>
（1） Vue.filter（param1,param2）
param1 -- 过滤器名
param2 -- 处理函数（参数1-即数据，参数2-自己设置）
（2） 使用：数据 + 管道符 | + 过滤器名（参数）
4. 计算属性 -- computed
<div id="app">
谁： <input type="text" v-model="person"> <br>
干嘛： <input type="text" v-model="motion"> <br>
<p>{{ sentence }}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
person: "",
motion: "",
},
computed: {
sentence () {
return this.person + this.motion;
}
}
})
</script>
（1） 计算属性的结果被缓存，只有相关依赖改变，计算属性才会改变。
5. 侦听属性 -- watch
<div id="app">
谁： <input type="text" v-model="person"> <br>
干嘛： <input type="text" v-model="motion"> <br>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
person: "",
motion: "",
},
watch: {
"person" (newVal, oldVal) {
console.log(newVal, oldVal);
}
}
})
</script>
（1）watch监听data中的数据，data数据变化，对应的监听函数立即执行
（2）watch会一直监听数据，性能消耗大。开发时，能用computed就不要用watch
（3）异步请求用watch
（4）监听数据为对象，要用深度监听，示例如下
<div id="app">
谁： <input type="text" v-model="user.person"> <br>
干嘛： <input type="text" v-model="user.motion"> <br>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
user: {person: "", motion: ""}
},
watch: {
"user.person": {
handler (newVal, oldVal) {
console.log(newVal, oldVal);
},
deep: true
}
}
})
</script>
6. 异步请求 -- axios
mounted() {
// axios的get请求
axios.get("GET接口")
.then(res => {
console.log(res.data);
})
.catch(err => {
console.log(err);
})
// axios的post请求
axios.post("POST接口", {
name: "McNeil", // post传参
})
.then(res => {
console.log(res.data);
})
.catch(err => {
console.log(err);
})
}
7. 动画
1.css类名
2.animate动画库
2.js钩子函数
