v-model的概念

v-model是什么
	1.双向数据绑定，既可以拿取data的数据，也可以写入数据
	2.v-model本身是一个语法糖，一般用于表单收集
	3.v-model自动绑定表单value值 v-model=""
	v-model原理
	1.使用v-bind绑定数据
	2.使用oninput传递数据

vue.js devtools扩展工具

directives局部自定义指令


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- v-model是什么1.双向数据绑定，既可以拿取data的数据，也可以写入数据2.v-model本身是一个语法糖，一般用于表单收集3.v-model自动绑定表单value值 v-model=""v-model原理1.使用v-bind绑定数据2.使用oninput传递数据 --><!-- vue.js devtools扩展工具 --><div><input type="text" :value="val" @input="func()">{{val}}<input type="submit" @click="fun1()"></div><hr><button @click="myfunc1()">点击</button><h1 v-nums="sum"></h1></div>
</body>
<script src="../vue.js"></script>
<script>Vue.config.productionTip = false;var vm = new Vue({el:"#app",data() {return {val:"我是默认数据",sum:10}},// directives局部自定义指令directives:{"nums":{bind(element,binding){console.log(element);console.log(binding);element.innerText = binding.value*10;console.log("-----------------");},inserted(element,binding){console.log(element);console.log(binding);element.innerText = binding.value*100;console.log("-----------------");},update(element,binding) {console.log(element);console.log(binding);},}},methods: {// window.event==e// 不同：e定义函数后不要加(),event可加可不加// 相同：取到操作元素的所有方法func(){console.log(11111111111);console.log(event);console.log(event.target);return this.val=event.target.value;},fun1(){// console.log(event);console.log(window.event);},myfunc1(){}},})
</script>
</html>