Vue学习笔记入门篇——安装及常用命令介绍上海

 .capture属性

加多风浪监听器时采用事件捕获格局,即元素自个儿触发的事件先在这里边管理,然后才交由个中因素进行管理,当点击最尾部成分<div>触发事件时,先物色带有监听器的因素,依照节点优先级先触发带有该修饰符的要素,然后触发本人事件,最终发滋事件冒泡。

本示例中先触发打字与印刷伯公节点,然后触发打字与印刷父节点,然后打字与印刷自己节点,最后触发打字与印刷曾外祖父节点,示例代码和结果如下:

上海时时乐走势图官网 1上海时时乐走势图官网 2

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1" v-on:click="click3">
 5       {{msg3}}<br/>
 6       <div class="div1" v-on:click.capture="click2">
 7         {{msg2}}<br/>
 8         <div class="div1" v-on:click.capture="click1">
 9           {{msg1}}<br/>
10           <div v-on:click="click0">{{msg}}</div>
11         </div>
12       </div>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   export default {
19     name: 'v-on',
20     data() {
21       return {
22         title: 'v-on指令学习',
23         msg: '我是div内部子节点',
24         msg1: '我是div父节点',
25         msg2: '我是div爷爷节点',
26         msg3: '我是div曾祖父节点'
27       }
28     },
29     methods:{
30       click0(){
31         console.log("打印子节点");
32       },
33       click1(){
34           console.log("打印父节点");
35       },
36       click2(){
37         console.log("打印爷爷节点");
38       },
39       click3(){
40         console.log("打印曾祖父节点");
41       }
42     }
43   }
44 </script>
45 
46 <style scoped>
47   .title1 {
48     text-align: left;
49   }
50   .div1{
51     float: left;
52   }
53 </style>

View Code

上海时时乐走势图官网 3

原创博文,转发请评释出处
回来目录
下一节:Vue学习笔记入门篇——数据及DOM

 var vm = new Vue({
   el: "#app",
   methods: {
     div_click: function () {
       console.log("div click...");
     },
     stop_click: function () {
       console.log("stop_click...");
     }
   }
 });

 前言

上一篇作品以v-on指令绑定click事件为例介绍了v-on指令的应用办法,本文介绍一下v-on绑定事件的有的品质的采取情势。

v-show

v-show也是基准渲染指令,和v-if指令不一样的是,使用v-show指令的要素始终会被渲染到HTML,它只是简短地为成分设置CSS的style属性。譬如:

<div id="app-show">
    <p v-show="age > 25">Age:{{age}}</p>
</div>

    var app_show = new Vue({
        el:'#app-show',
        data:{
            age:28
        }
    })

运作结果如下:

上海时时乐走势图官网 4

同样,即使在调节台修改app_show.age的值,假诺age>25的结果为false的话,分界面中的文本也会未有不见。

上海时时乐走势图官网 5

.self属性

只当在event.target是这段时间成分本身时接触管理函数,即事件不是从内部因素触发的。通俗点说独有一点点击成分本人的时候接触事件,当点击父成分触发事件或然点击子成分发惹事变冒泡时并不触发成分本人事件。
本示例点击父节点照旧子节点时并不打印本身成分事件,示例代码和实例结果如下:

上海时时乐走势图官网 6上海时时乐走势图官网 7

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1" v-on:click="click3">
 5       {{msg3}}<br/>
 6       <div class="div1" v-on:click.self="click2">
 7         {{msg2}}<br/>
 8         <div class="div1" v-on:click="click1">
 9           {{msg1}}<br/>
10           <div v-on:click="click0">{{msg}}</div>
11         </div>
12       </div>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   export default {
19     name: 'v-on',
20     data() {
21       return {
22         title: 'v-on指令学习',
23         msg: '我是div内部子节点',
24         msg1: '我是div父节点',
25         msg2: '我是div爷爷节点',
26         msg3: '我是div曾祖父节点'
27       }
28     },
29     methods:{
30       click0(){
31         console.log("打印子节点");
32       },
33       click1(){
34           console.log("打印父节点");
35       },
36       click2(){
37         console.log("打印爷爷节点");
38       },
39       click3(){
40         console.log("打印曾祖父节点");
41       }
42     }
43   }
44 </script>
45 
46 <style scoped>
47   .title1 {
48     text-align: left;
49   }
50   .div1{
51     float: left;
52   }
53 </style>

View Code

上海时时乐走势图官网 8

常用命令

Vue.js的授命是以v-开首的,它们效用于HTML成分,指令提供了有的破例的性状,将下令绑定在要素上时,指令会为绑定的目的成分增加一些区别日常的行事,大家能够将下令看作特殊的HTML个性(attribute)。
Vue.js提供了部分常用的嵌入指令,接下去大家将介绍以下多少个放置指令:

为了能鲜明的观察绑定属性值的成形,须求在Chrome浏览器中设置Vue Devtools扩大程序。当查看Vue开拓的页面时,按F12就能够在开垦者工具里观望Vue页签。这里须求在意,只有在援引Vue的支付版本文件,即vue.js文件时,Vue Devtools工具能力健康使用。

.once属性

点击事件将只会接触贰遍,通俗点说正是因素自个儿事件只可以动用一次,第叁次点击成分时候并不接触事件,不过不阻碍事件冒泡。
本示例中首先次点击时打字与印刷子节点和父节点,第一回点击时并不打字与印刷子节点,依旧打字与印刷父节点及以上节点,示例代码和实力结果如下:

上海时时乐走势图官网 9上海时时乐走势图官网 10

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1" v-on:click="click3">
 5       {{msg3}}<br/>
 6       <div class="div1" v-on:click="click2">
 7         {{msg2}}<br/>
 8         <div class="div1" v-on:click="click1">
 9           {{msg1}}<br/>
10           <div v-on:click.once="click0">{{msg}}</div>
11         </div>
12       </div>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   export default {
19     name: 'v-on',
20     data() {
21       return {
22         title: 'v-on指令学习',
23         msg: '我是div内部子节点',
24         msg1: '我是div父节点',
25         msg2: '我是div爷爷节点',
26         msg3: '我是div曾祖父节点'
27       }
28     },
29     methods:{
30       click0(){
31         console.log("打印子节点");
32       },
33       click1(){
34           console.log("打印父节点");
35       },
36       click2(){
37         console.log("打印爷爷节点");
38       },
39       click3(){
40         console.log("打印曾祖父节点");
41       }
42     }
43   }
44 </script>
45 
46 <style scoped>
47   .title1 {
48     text-align: left;
49   }
50   .div1{
51     float: left;
52   }
53 </style>

View Code

上海时时乐走势图官网 11

v-for

v-for指令基于八个数组渲染叁个列表,它和JavaScript的遍历语法相似:

v-for="item in items"

items是贰个数组,item是时下被遍历的数组成分。举例:

<div id="app-for">
    <ul v-for="item in items">
        <li>{{item}}</li>
    </ul>
</div>
var app_for = new Vue({
    el:'#app-for',
    data:{
        items:[
            'Vue',
            'Angular',
            'React'
        ]
    }
})

运转结果:

上海时时乐走势图官网 12

 <div class="row">
   <h2>v-on.prevent</h2>
   <form @submit.prevent="form_submit">
     <button type="submit">Submit</button>
   </form>
   <hr />
 </div>

.prevent属性

该格局将通报 Web 浏览器不要实施与事件涉及的暗中认可动作(假使存在这里么的动作),注意若是 伊芙nt 对象的 cancelable 属性是 fasle,那么就从不暗中同意动作,大概不能够挡住暗中认可动作,无论哪一类意况,调用该属性都没有效力。

回顾示比如下,在页面from表单中<input type=''"/> 假若 type 属性是 "submit"

若果未有一点点名prevent,点击事件自动触发from表单action跳向钦赐的网址,示例代码和实例结果如下:

上海时时乐走势图官网 13上海时时乐走势图官网 14

 1  <template>
 2      <div>
 3       <p class="title1">{{title}}</p>
 4        <div class="div1">
 5          <form action="http://www.baidu.com" v-on:submit="clickme">
 6           <button type="submit">{{msg}}</button>
 7          </form>
 8          <!--<a href="http://www.baidu.com"   v-on:click.prevent="banclickme">点我去百度</a>-->
 9        </div>
10      </div>
11  </template>
12 
13 <script>
14     export default {
15          name: 'v-on',
16          data() {
17            return {
18                title: 'v-on指令学习',
19              msg: 'form表单默认点击打开百度'
20            }
21          },
22        methods:{
23            clickme(){
24                console.log("页面重新加载了");
25              }
26          // banclickme(){
27          //     console.log("去不了百度吧")
28          // }
29          }
30      }
31    </script>
32 
33  <style scoped>
34     .title1 {
35          text-align: left;
36        }
37   .div1{
38               float: left;
39             }
40 </style>

View Code

上海时时乐走势图官网 15

设若内定prevent,点击事件则不会触发from表单action跳向内定的网址,示例代码和实例结果如下:

上海时时乐走势图官网 16上海时时乐走势图官网 17

 1  <template>
 2      <div>
 3       <p class="title1">{{title}}</p>
 4        <div class="div1">
 5          <form action="http://www.baidu.com" v-on:submit.prevent="clickme">
 6           <button type="submit">{{msg}}</button>
 7          </form>
 8          <!--<a href="http://www.baidu.com"   v-on:click.prevent="banclickme">点我去百度</a>-->
 9        </div>
10      </div>
11  </template>
12 
13 <script>
14     export default {
15          name: 'v-on',
16          data() {
17            return {
18                title: 'v-on指令学习',
19              msg: 'form表单默认点击打开百度'
20            }
21          },
22        methods:{
23            clickme(){
24                console.log("去不了百度吧");
25              }
26          // banclickme(){
27          //     console.log("去不了百度吧")
28          // }
29          }
30      }
31    </script>
32 
33  <style scoped>
34     .title1 {
35          text-align: left;
36        }
37   .div1{
38               float: left;
39             }
40 </style>

View Code

上海时时乐走势图官网 18

v-if

v-if是规范渲染指令,它依趣事明式的真真假假来删除和插入成分,它的基本语法如下:

v-if="expression"

expression是贰个回到bool值的表达式,说明式能够是叁个bool属性,也足以是贰个重回bool的运算式,如以下代码:

<div id="app-if">
    <p v-if="seen">你可以看见我</p>
</div>

    var app_if = new Vue({
        el:'#app-if',
        data:{
            seen:true
        }
    })

运作结果如下:

上海时时乐走势图官网 19

要是你在控制台设置 app_if.seen=false 则"你能够望见笔者"字样就可以灭亡不见

上海时时乐走势图官网 20

v-on绑定指令属性

CDN

https://unpkg.com/vue, 会保持和 npm 发表的新星的版本一样。可以在 https://unpkg.com/vue/ 浏览 npm 包能源。代码中直接引用以下代码:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
 var vm = new Vue({
   el: "#app",
   methods: {
     once_click: function () {
       console.log("once click...");
     }
   }
 });

.passive属性

滚动事件的暗许行为 (即滚动行为) 将会即时触发,而不会等待onScroll完毕,这里面蕴涵event.preventDefault()的情景

小结:关于终极贰本性质passive作者亦非很熟稔,假若须求请咱们再也查阅资料。

v-on

绑定事件监听器。事件类型由参数钦定。表明式能够是贰个主意的名字或贰个内联语句,若无修饰符也能够简轻易单。可缩写为@

用在通常成分上时,只可以监听 原生 DOM 事件。用在自定义成分组件上时,也能够监听子组件触发的自定义事件。

在监听原生 DOM 事件时,方法以事件为独一的参数。假若选用内联语句,语句能够访问三个$event 属性: v-on:click="handle('ok', $event)"
修饰符:

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 增加事变侦听器时使用 capture 方式。
.self - 只当事件是从侦听器绑定的要素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根成分的原生事件。
.once - 只触发一回回调。
.left - (2.2.0) 只当点击鼠标左键时接触。
.right - (2.2.0) 只当点击鼠标右键时接触。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 方式加上侦听器

事必躬亲代码:

<div id="app-on">
    <p>{{message}}</p>
    <button @click="setMessage">Set Message</button>
</div>
var app_on = new Vue({
    el:'#app-on',
    data:{
        message:''
    },
    methods:{
        setMessage:function () {
            this.message='hello world';
        }
    }
})

点击按键后,结果如下:

上海时时乐走势图官网 21

因为 div_click 事件被修饰符绑定,唯有在平昔点击到父成分 div ,即石绿区域内,事件才会被触发。

      .stop属性

阻拦单击事件继续进步传播(不难点说就是不让父节点及父节点以上的节点事件触发),本示譬若无stop属性,父节点和祖父节点事件将会触发,并在支配台出口内容,示例代码和示范结果如下:

上海时时乐走势图官网 22上海时时乐走势图官网 23

 1  1 <template>
 2  2   <div>
 3  3     <p class="title1">{{title}}</p>
 4  4     <div class="div1">
 5  5       <div v-on:click="clickme0">
 6  6         {{ msg1}}
 7  7         <div v-on:click="clickme">
 8  8           {{msg2}}<br/>
 9  9           {{msg3}}
10 10         </div>
11 11       </div>
12 12     </div>
13 13   </div>
14 14 
15 15 </template>
16 16 
17 17 <script>
18 18   export default {
19 19     name: 'v-on',
20 20     data() {
21 21       return {
22 22         msg1: '我是爷爷节点',
23 23         msg2: '我是父节点',
24 24         msg3: '测试click属性',
25 25         title: 'v-on指令学习'
26 26       }
27 27     },
28 28     methods:{
29 29       clickme0(){
30 30         console.log("我是爷爷节点");
31 31       },
32 32       clickme(){
33 33         console.log("我是父节点");
34 34       },
35 35       clickthis(){
36 36         console.log("不打印父节点事件内容!")
37 37       }
38 38     }
39 39   }
40 40 </script>
41 41 
42 42 <style scoped>
43 43   .title1 {
44 44     text-align: left;
45 45   }
46 46   .div1{
47 47     float: left;
48 48   }
49 49 </style>

View Code

上海时时乐走势图官网 24

借使加多stop属性,则不会触发父节点和祖父节点事件,不会在决定台出口相应事件原委,示例代码和演示结果如下:

上海时时乐走势图官网 25上海时时乐走势图官网 26

 1 1 <template>
 2  2   <div>
 3  3     <p class="title1">{{title}}</p>
 4  4     <div class="div1">
 5  5       <div v-on:click="clickme0">
 6  6         {{ msg1}}
 7  7         <div v-on:click="clickme">
 8  8           {{msg2}}<br/>
 9  9           {{msg3}}
10 10         </div>
11 11       </div>
12 12     </div>
13 13   </div>
14 14 
15 15 </template>
16 16 
17 17 <script>
18 18   export default {
19 19     name: 'v-on',
20 20     data() {
21 21       return {
22 22         msg1: '我是爷爷节点',
23 23         msg2: '我是父节点',
24 24         msg3: '测试click属性',
25 25         title: 'v-on指令学习'
26 26       }
27 27     },
28 28     methods:{
29 29       clickme0(){
30 30         console.log("我是爷爷节点");
31 31       },
32 32       clickme(){
33 33         console.log("我是父节点");
34 34       },
35 35       clickthis(){
36 36         console.log("不打印父节点事件内容!")
37 37       }
38 38     }
39 39   }
40 40 </script>
41 41 
42 42 <style scoped>
43 43   .title1 {
44 44     text-align: left;
45 45   }
46 46   .div1{
47 47     float: left;
48 48   }
49 49 </style>

View Code

上海时时乐走势图官网 27

v-bind

v-bind指令能够在其名前段时间面带三个参数,中间放二个冒号隔开分离,这些参数平时是HTML成分的天性(attribute),比如:v-bind:class

v-bind:argument="expression"

修饰符:

.prop - 被用来绑定 DOM 属性。(what’s the difference?)
.camel - (2.1.0 ) 将 kebab-case 性子名转移为 camelCase. (从 2.1.0 起先帮衬)
.sync (2.3.0 ) 语法糖,会扩展成二个更新父组件绑定值的 v-on 侦听器。
演示代码:

<div id="app-bind">
    ![](img_url)
</div>
var app_bind = new Vue({
    el:'#app-bind',
    data:{
        img_url:'https://cn.vuejs.orglogo.png'
    }
})

运维结果:

上海时时乐走势图官网 28

该修饰符表示绑定的事件只会被触发二回

安装

在页面包车型地铁 input 成分上加上指令

Hellow World示例

<div id="app">
    <p>{{message}}</p>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
    el:'#app',
    data:{
        message:'Hello word'
    }
})

运作结果:

上海时时乐走势图官网 29

此中app为Vue对象,el钦定作用在html的要素,即例子中<div id='app'></div>,data是数据对象,数据绑定最常见的样式正是使用 “Mustache” 语法(双大括号)的文件插值。

尽管点击了它的子成分触发了子成分的事件,依据事件冒泡原理,父成分的风浪应该被触发,不过因为事件的触发源并非事件绑定的成分本身,所以父成分事件不会被触发。

v-model

在表单控件或许零部件上成立双向绑定
修饰符:

.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤

示范代码:

<div id="app-model">
    <p>{{message}}</p>
    <input type="text" v-model="message">
</div>
var app_model = new Vue({
    el:'#app-model',
    data:{
        message:''
    }
})

在输入框输入内容时,其下边同步突显输入内容:

上海时时乐走势图官网 30

展开页面,并点击开关,查看调控台打字与印刷结果

介绍

Vue.js是马上很红的多少个JavaScript MVVM库,它是以数据驱动和组件化的考虑营造的。相比较于Angular.js,Vue.js提供了进一步简洁、更易于精通的API,使得我们能够高效地上手并采用Vue.js。

 v-model 是用来在表单表单成分上创制双向数据绑定的吩咐。在 <input> 和 <textarea> 上,暗中同意通过监听成分的 input 事件来更新绑定的属性值。

NPM

在用 Vue.js 塑造大型应用时推荐应用 NPM 安装, NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器同盟使用。 Vue.js 也提供配套工具来开拓单文件组件。

npm install vue
 var vm = new Vue({
   el: "#app",
   methods: {
     form_submit: function () {
       console.log("form submit!");
     }
   }
 });

v-else

能够用v-else指令为v-if或v-show增添二个“else块”。v-else成分必需立刻跟在v-if或v-show成分的背后——不然它不可能被辨认。
示范代码:

<div id="app-else">
    <p v-if="age > 18">{{name}}的年龄是{{age}}岁,已成年</p>
    <p v-else>{{name}}的年龄是{{age}}岁,未成年</p>
</div>

    var app_else = new Vue({
        el:'#app-else',
        data:{
            name:'chain',
            age:17
        }
    })

运作结果如下:

上海时时乐走势图官网 31

Vue会自动过滤掉前后的多个空格,最后属性值是左右未有空字符的字符串。

正文为转发,最早的文章:Vue学习笔记入门篇——安装及常用命令介绍

页面增多多个按键,绑定事件

该修饰符会阻止当前事变的私下认可行为。同理于调用event.preventDefault()方法

vm指标里增添三个测量试验方法

而当难题离开文本框时,属性值发生了变动并与文本框内容保持一致。从这么些事例能够见到.lazy修饰符延迟了一块创新属性值的机遇。将在原来绑定在input事件的一道逻辑变化为绑定在 change事件上。

 var vm = new Vue({
   el: "#app",
   methods: {
     enter_click: function () {
       console.log("enter click...");
     }
   }
 });

页面增添一个 input 成分,监听键盘事件

上海时时乐走势图官网 32

 var vm = new Vue({
   el: "#app",
   data: {
     input_lazy: ""
   }
 });

当开始输入数字时,属性值将实时更新成Number类型的数值。数字后输入任何非数字的字符,属性值将不再变化。

该修饰符用来机关过滤字符串前后的空字符。

上海时时乐走势图官网 33

而当开头输入非数字的字符串时,因为Vue不能够将字符串转变来数值,所以属性值将实时更新成同样的字符串。即便后边输入数字,也将被看成字符串。

将下面八个法子绑定到一组具有老爹和儿子关系的成分上

也得以自定义按钮名称

在页面中的 input 的要素上丰富指令

上海时时乐走势图官网 34

.trim

 <div class="row">
   <h2>v-model.trim</h2>
   <input type="text" v-model.trim="input_trim" />
   <hr />
 </div>
 <div class="row">
   <h2>v-model.number</h2>
   <input type="text" v-model.number="input_number" />
   <hr />
 </div>
 <div class="row">
   <h2>v-on.stop</h2>
   <div @click="div_click">
     <button type="button" @click.stop="stop_click">StopPropagation</button>
   </div>
   <hr />
 </div>

因为父成分比它的子成分要长,所以左侧会有一对革命的父成分呈现出来。分别点击按键和革命区域,查看调控台打字与印刷结果

 var vm = new Vue({
   el: "#app",
   data: {
     input_trim: ""
   }
 });

如上正是本文的全体内容,希望对大家的求学抱有助于,也目的在于我们多多点拨脚本之家。

开荒页面,在文本框内输入内容,查看绑定属性值的浮动

 <div class="row">
   <h2>键值修饰符</h2>
   <input type="text" @keyup.="enter_click" />
   <hr />
 </div>

input上助长指令

 <div class="row">
   <h2>v-model.lazy</h2>
   <input type="text" v-model.lazy="input_lazy" />
 </div>

该修饰符用来将输入内容自动转变到数值。

.number

一、v-model的修饰符

鲁人持竿事件冒泡原理,点击按钮时,从近年来接触的因素开端,沿着它的父成分一向到根元素,都会挨个触发 click 事件。不过接纳了 .stop 修饰符后,将只会接触当前因素的 click 事件,并阻碍事件向上冒泡。

 // 自定义按键名称
 Vue.config.keyCodes.ent = 13;

 // 页面引用
 <input type="text" @keyup.ent="enter_click"/>

.one

.stop

.lazy

vm对象里扩展贰性子子,默感觉空字符串

首先在 vm目的中扩展内需绑定的性质

在上一篇中,介绍了 v-model 和 v-on 轻易用法。除了健康用法,这几个指令也支撑特殊措施绑定方法,以修饰符的方式完毕。平时都是在指令前面用小数点“.”连接修饰符名称。

该修饰符能够用来监听键盘事件

vm目的中增多贰个测量检验方法

当点击提交按钮时,会接触绑定的平地风波,况兼阻止表单提交并刷新当前页面包车型地铁暗中认可行为。

绑定的事件修饰符能够改换事件的触及格局。

您只怕感兴趣的作品:

  • vue事件修饰符和按钮修饰符用法总计
  • Vue input控件通过value绑定动态属性及修饰符的情势
  • 哪些精通Vue的.sync修饰符的选拔

开采页面

修改上边.stop的事例,在父成分 div上助长样式

 <div class="row">
   <h2>v-on.once</h2>
   <button type="button" @click.once="once_click">Button</button>
   <hr />
 </div>

vm目的里增加四个事件

上海时时乐走势图官网 35

.self

.prevent

该指令只当事件是从事件绑定的要素本人触发时才触发回调

开采页面,在文本框输入内容,并按回车,查看调控台打字与印刷结果

开发页面,在文本框输入内容,并在剧情前后增多多个空格

上海时时乐走势图官网 36

当在文本框输入内容,並且光标主题未有间隔文本框时,属性值未有实时爆发变化

页面增多二个 form 表单,并绑定表单的交付事件

 var vm = new Vue({
   el: "#app",
   data: {
     input_number: ""
   }
 });

该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation()方法

 <input type="text" @keyup.enter="enter_click"/>

二、v-on的修饰符

本篇将简介常用的修饰符。

开采页面,多次点击开关。唯有在第叁次点击时,事件才会触发。

上海时时乐走势图官网 37

键值修饰符

vm目的中加多二个测验方法

上海时时乐走势图官网 38

打开页面,开启Vue Devtools,在文本框中输入字符,查看属性值变化

vm目的中扩张贰个天性,默感到空字符串

通过 keyup.keyCode 的艺术来监听键盘特定开关的风浪。也足以透过按钮名称来监听

 <div class="row">
   <h2>v-on.self</h2>
   <div @click.self="div_click" style="display:inline-block; width: px; background-color:red;">
     <button type="button" @click="stop_click">Button</button>
   </div>
   <hr />
 </div>

本文由上海时时乐走势图发布于web前端,转载请注明出处:Vue学习笔记入门篇——安装及常用命令介绍上海

您可能还会对下面的文章感兴趣: