Vue学习笔记

Posted on
  • v-model 修饰符
  • v-model.lazy 作用是input的内容同步会变慢
  • v-model.trim 去除无用的空格
  • v-model.number 将input中的字符串转换成数字
  • vue中的组件一般的是局部变量,比较少应用于全局中

这个html

1
2
3
4
5
6
7
<div id="seg1">
     <alert></alert>
 </div>

 <div id="seg2">
        <alert></alert>
    </div>

js中组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
首先定义一个组件模块并且赋予它一个方法

var alert_component = {
    template: '<button @click="on_click"> 叼叼叼 </button>',
    
    methods:{
        on_click:function(){
            alert('Yo');
        }
    }
}

之后应用在域中

new Vue({
    el: '#seg1',
    components : {
        alert: alert_component
    }
});

v-for 应用

1
2
3
4
5
6
7
8
html
 <div id="app-4">
     <ol>
         <li v-for="todo in todos">
            {{ todo.text }}
         </li>
     </ol>
 </div>
1
2
3
4
5
6
7
8
9
10
11
在js中
var app4 = new Vue({
    el: '#app-4',
    data: {
        todos:[
            {text : '学习JavaScript'},
            {text : '学习Vue'},
            {text : '整个牛项目'}
        ]
    }
})