|
|
@@ -0,0 +1,66 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <script src="./js/vue.js"></script>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <!-- v-model 指令可以实现数据的双向绑定 -->
|
|
|
+ <!-- 当输入框中的内容发生变化时 会自动更新到 msg 中的值中 -->
|
|
|
+ <!-- 当 msg 中的值发生变化时 会自动更新到输入框中去 -->
|
|
|
+ <!-- <input type="text" v-model="msg" @input="inputHandle"> -->
|
|
|
+ <!-- <input type="text" v-model="msg" @change="changeHandle"> -->
|
|
|
+ <!-- v-model 获取的值可以包含前后空格的 -->
|
|
|
+ <!-- <input type="text" v-model="msg"> -->
|
|
|
+ <!-- .trim 可以去掉字符串的前后空格 -->
|
|
|
+ <!-- <input type="text" v-model.trim="msg"> -->
|
|
|
+
|
|
|
+ <!-- v-model 默认获取的为字符串 -->
|
|
|
+ <!-- <input type="text" v-model="msg"> -->
|
|
|
+ <!-- .number 可以将输入的字符串转换为数字类型 -->
|
|
|
+ <!-- <input type="text" v-model.number="msg"> -->
|
|
|
+
|
|
|
+ <!-- .lazy v-model 可以实现懒加载 当文本框失去焦点时 才会更新到 msg 中的值中 （v-model才会工作） -->
|
|
|
+ <input type="text" v-model.lazy="msg">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <h1> 您输入的内容是：{{msg}}</h1>
|
|
|
+ <button @click="getVal">按钮</button>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ msg: ""
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getVal() {
|
|
|
+ console.log(this.msg);
|
|
|
+ // this.msg = "hello";
|
|
|
+ console.log(typeof this.msg);
|
|
|
+
|
|
|
+ },
|
|
|
+ // input事件 ：当文本框内的值发生变化的时候触发
|
|
|
+ // inputHandle(){
|
|
|
+ // console.log("input事件触发");
|
|
|
+ // },
|
|
|
+ // change事件 ：当文本框失去焦点的时候触发
|
|
|
+ // changeHandle(){
|
|
|
+ // console.log("change事件触发");
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
