VUE基础(window系统)

一、安装
  1. 安装vue脚手架 cnpm install -g vue-cli
  2. 安装完成后打印vue,可打印出相关信息打印出vue的信息
  3. 初始化项目 vue init webpack my-vue-project这里写图片描述
  4. npm install 安装所有的依赖(貌似项目本身有node_modules)
  5. npm run dev运行项目注意需要在项目所在目录下
二、自定义事件


  • 使用 $on( ) 监听事件
  • 使用 $emit( ) 在它上面触发事件
  • 使用 $dispatch( ) 派发事件,事件沿着父链冒泡
  • 使用 $broadcast( ) 广播事件,事件向下传导给所有的后代

v-on:click = ‘触发事件函数名 ’ click可以被任何的事件名替换
三、组件的使用

这里写图片描述
创建组件footer.vue和header.vue
先注册:

import Header from './header'
import footer from './footer'
new Vue({
    data:{
        isShow:true
    },
    components:[
        Header,Footer
    ]
})

页面中就可以使用了

<Header></Header>
<Footer></Footer>

props: ———组件之间的通信 (父组件向子组件传值)
这里写图片描述
子组件向父组件传值的需要使用 $on 、 $dispatch

四、localStorage存储

创建新文件store.js

const STORAGE_KEY = 'todos-vuejs'
export default {
    fetch () {
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')     
    },
    save (items){ 
        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
    }
}

在App.vue中引用

import Store from './store'
console.log(Store.fetch());
//侦听变化 (Store.fetch()是获取,Store.save()是设置保存,deep:true是深度监听,当key值发生变化时能够监听出来)
watch:{
    items:{
      handler:function(items){
        Store.save(items);
      },
      deep:true
    }
  }
阅读更多
个人分类: 前端总结
想对作者说点什么? 我来说一句

Linux与X Window系统基础

2011年12月25日 47.92MB 下载

vue学习代码

2017年06月13日 8.7MB 下载

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

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭