学习笔记：VUE

Posted 2020-10-07 21270

https://cn.vuejs.org/v2/api/　　官网API

https://cn.vuejs.org/v2/guide/　　官网教程

http://www.runoob.com/vue2/vue-tutorial.html　　教程

 

CDN：　　https://unpkg.com/vue/dist/vue.js

# 查看版本
$ npm -v

#升级 npm
cnpm install npm -g

# 最新稳定版
$ cnpm install vue

# 全局安装 vue-cli
$ cnpm install --global vue-cli

# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project

#进入项目，安装并运行：
$ cd my-project
$ cnpm install
$ cnpm run dev
#成功执行以上命令后访问 http://localhost:8080/

 

 

 

 

 

 

---

 

 一、指令

v-model　　文本框输入后，模型也会变，双向

v-text　　文本渲染 {}

v-show　　dom有，只是显隐

v-if　　dom不存在

v-bind　　

v-for　　

v-on　　事件绑定

二、过滤器 filter

对接口返回的数据，过滤和战士，比如金额格式化、货币等

三、组件

component

页面头部、底部、轮播等

var vm = new Vue({
    el:"#app",
    data:{},//数据
    filter:{},//过滤器
    mounted:function(){},//相当于jquery的ready
    methods:{}
});

 

 

 

 

 

 

---

 

Vue.js 路由

Vue.js 路由需要载入 vue-router 库：　　https://github.com/vuejs/vue-router

中文文档地址：　　https://router.vuejs.org/zh-cn/

直接下载 / CDN　　https://unpkg.com/vue-router/dist/vue-router.js

cnpm install vue-router

 

 

 

..