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元素

发布了430 篇原创文章 · 获赞 415 · 访问量 925万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览