VueJS学习笔记

v-bind单向数据绑定，结合class使用方式如下，根据数组中值选择使用不同的class。

v-for使用key增加dom节点和js数组的关联关系，可提升性能。可用于数组和对象的循环。

<ul>
<li v-for="(st,index) in stu" v-bind:class="{'A':'red','B':'blue'}[st.score]" :key="index">
 {{st.name}}
 {{st.score}} </li>
</ul>

v-bind:class 可简写：class, v-on:click简写为@click，函数定义：

<button v-on:click=”change()”>Click</button>

methods:{methods:{ change(){ this.stu.push({ name:'mick',score:'A' })}

组件使用：使用props传递值，data必须是一个函数

components:{
 'my-component':{ props:['message'],
 props:['message'],
 template:'<div>This is a Components{{lijian}}{{message}}</div>',
 data:function(){ return { lijian:'123456' } } } 
}
<my-component :message="test"></my-component>调用组件

v-on 可以绑定自定义事件，使用$on 监听事件，$emit触发事件

new Vue({
 el: '#app', 
data: { total: 0 }, 
methods: { incrementTotal: function() { this.total += 1 } },
components: { 
'button-counter': { template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
 data: function() { return { counter: 0 } }, 
methods: { incrementCounter: function() { this.counter += 1 this.$emit('increment') } } } }
})
<div id="app">
 <p>{{ total }}</p>
 <button-counter v-on:increment="incrementTotal"></button-counter>
 <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
按钮点击后，先执行incrementCounter，自身counter自增，然后通过$emit('increment')触发increment函数，
v-on:increment="incrementTotal"监听到执行incrementTotal函数，total自增.

<router-link :to=”{name:’music’,query:{id:1}}”>music</router-link>使用name做链接可修改性更强，query为查询字符串。

export default new Router({
routes: [

{
path:’/’,  匹配首页，使用redirect重定向页面指向
redirect:{
name:’music’
}
},
{
name: ‘hello’, //此处name在router-link中使用
path: ‘/hello’,
component: Hello
},
{
name:’music’,
path:’/music’,
component:Music，

children:[{

name:’music_china’,

path:’china’,

component:music_china

}]
},

{
path:’*’,
component:NotFound //匹配404界面
}
]
})

 

export default {
data(){
return{
}
},
created(){ 数据初始化，DOM没有生成，mounted将数据装载到DOM元素上，此时DOM已经生成。
console.log(this.$route.query);通过this.$route.query可以获取参数
}
}

移动端开发引入mint-ui

import MintUI from ‘mint-ui’
import ‘mint-ui/lib/style.css’
import App from ‘./App’
Vue.use(MintUI);

通过this.$refs.xxx获取DOM元素