VueJS学习笔记
来源:互联网 发布:软件c 编程代码 编辑:程序博客网 时间:2024/05/29 20:01
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元素
- vuejs学习入门笔记
- vuejs学习笔记
- Vuejs学习笔记 一
- VueJS学习笔记
- vueJs第二讲学习笔记
- vueJs 2.0学习笔记(一)
- vueJs的学习笔记(二)
- vueJs的学习笔记(四)
- vuejs笔记
- VueJs学习
- Vuejs的学习笔记1---------响应式原理
- 学习vuejs的第一天(vuejs)
- vuejs学习小记 单次插值
- Vuejs学习0
- Vuejs学习1--概述
- 学习vueJs第一
- vuejs路由学习(1)
- vueJS学习总结
- 【Struts2】1.类型转换和输入校验
- vue省市区三级联动mysql,js/json,html/jsp
- 根据电影名称,获取下载链接
- xargs命令详解,xargs与管道的区别
- Android---使用BottomTabBar实现底部导航页
- VueJS学习笔记
- Spring+SpringMVC+Mybatis+Maven+MySql框架搭建与分页实例
- request.getParameter() 和request.getAttribute() 区别
- 一个简单的input离焦事件验证
- postgresql 查看wal生成频率和大小
- ext使用
- iOS APP上架被拒重新提交审核教程
- 自定义view实现炸弹效果
- RxJava1.0的RxBus使用