- <!DOCTYPE>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- vue
- </title>
- <script type="text/javascript" src="../vue.js">
- </script>
- </head>
- <body>
- <!-- 利用了Vue的双向数据绑定 v-on 是vue的指令 ":"后面的click 是指令的参数 v-on:click 是监听click事件
- v-on:click 还可以缩写 @click -->
- <div id="example-1">
- <button v-on:click="counter += 1">
- 增加 1
- </button>
- <p>
- 这个按钮被点击了{{counter}}次
- </p>
- </div>
- <script type="text/javascript">
- var example1 = new Vue({
- el: "#example-1",
- data: {
- counter: 0
- }
- })
- </script>
- <!-- 很多事件逻辑比较复杂 不能在像counter +=1 一样写在指令内 所以可以定一个方法名 像下面的greet -->
- <div id="example-2">
- <!--greet 是下面方法定义的方法名-->
- <button v-on:click="greet">
- Greet
- </button>
- </div>
- <script type="text/javascript">
- var example2 = new Vue({
- el: "#example-2",
- data: {
- name: "Vue.js"
- },
- methods: {
- greet: function(event) {
- alert('hello' + this.name + ' ! ') alert(event.target.tagName)
- }
- }
- })
- //也可用这种方式调用greet方法
- //example2.greet();
- </script>
- <!--内联绑定方法-->
- <div id="example-3">
- <button v-on:click="say('hi')">
- Say hi
- </button>
- <button v-on:click="say('hello')">
- Say Hello
- </button>
- </div>
- <script type="text/javascript">
- var example3 = new Vue({
- el: "#example-3",
- methods: {
- say: function(message) {
- alert(message);
- }
- }
- })
- </script>
- <!-- 按键修饰符 监听键盘事件 这个很方便 可以做一些回车提交什么的 按键别名有:.enter .tab .delete .esc .space
- .up .down .left .right 可以通过全局 config.keyCodes 对象自定义按键修饰符别名: Vue.config.keyCodes.f1=1
- 12 -->
- <div id="example-4">
- <input v-on:keyup.enter="copy" placeholder="请输入" v-model="value">
- <p style="color:red">
- {{value}}
- </p>
- </div>
- <!-- 通过键盘修饰符 响应方法copy 弹出 输入框输入的 值-->
- <script type="text/javascript">
- var example4 = new Vue({
- el: "#example-4",
- data: {
- value: "hello"
- },
- methods: {
- copy: function() {
- alert(this.value);
- }
- }
- })
- </script>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-1953685.html