Vue.js

vue.js 开发环境搭建

npm 安装检测是否成功

安装node,git和淘宝镜像之后

1. 全局安装 vue-cli --> cnpm install --global vue-cli
2. 创建一个基于webpack模板的新项目 --> vue init webpack my-project
3. 安装依赖包 --> cd my-project --> cnpm install --> npm run dev

生命周期函数

在Vue.js的生命周期中，可以分为6个阶段，也就是6个函数代表6个阶段，不管顺序如何变，还是会按照以下顺序去执行代码： beforeCreate（创建前）——>created（创建后）——>beforeMount(载入前)——>mounted（载入后）——>beforeDestroy（销毁前）——>destroyed（销毁后）

export default {
    data(){
        return {
        }
    },
    // 生命周期函数
    beforeCreate(){
        console.log('beforeCreate');
    },
    created(){
        console.log('created');
    },
    beforeMount(){
        console.log('beforeMount');
    },
    mounted(){
        console.log('mounted');
    },
    beforeDestroy(){
        console.log('beforeDestroy');
    },
    destory(){
        console.log('destory');
    }
}

选项数据 demo1

1. Data
2. computed
3. methods

模板语法 demo2

模板中直接嵌入js代码,指令 v-html v-on v-bind、计算属性、过滤器

1. v-html: 将data中设置的标签作为自己的子标签显示
2. v-on 可以动态设置div的class属性
3. v-bind 动态绑定一个或多个特性
4. 缩写 原始写法 v-bind:class 缩写 :class
5. 计算属性，在模板中放入太多的逻辑会让模板过重且难以维护，计算属性下所有函数可以放到computed中

style 绑定 demo3

1. 绑定1： {color:activeColor, fontSize:'16px'}
2. 绑定2: styleObject
3. 绑定3: [baseStyles, overridingStyles]

条件渲染 demo4

1. v-if
2. v-if v-else-if v-else
3. v-show

列表渲染 demo5

v-for 指令

1. 用法一：v-for="item in items" 数组
2. 用法二：v-for="(item,index) in items" 数组
3. 用法三：v-for="(value,key) in object" 对象

注意：vue中列表循环需加:key="唯一标识"唯一标识可以是item里面id，index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件key的作用，主要是为了高效的更新虚拟DOM。

表单控件绑定

v-model 指令在表单名控件元素上创建双向数据绑定，复选框、多个勾选框、选择列表

自定义组件-倒计时

组件写到components文件加夹下，定义一个倒计时组件。组件基本要素：props、$emit等， 通过important导入自定义组件。

Vue中DOM操作

$.refs获取dom节点，dom操作要在mounted函数中进行操作

过渡效果 demo12

过渡 transition，过渡样式名写进name，transition以标签的形式写在模板中， 通过样式方式写过渡

路由 vue-ruter扩展 demo13

页面跳转：router-link，npm install 引入vue-router包

1. 用法一：demo1
2. 用法二：to:"{name:'demo9', params:{userId: 123}}"
3. 用法三： this.$router.push({ path:'/demo1 })
4. 用法四：this.$router.push({name: 'demo1',params:{userId: 123} })

状态管理 vuex--插件 demo14

1. npm install 引入vuex包
2. 安装：cnpm install vuex --save
3. src下创建文件store/index.js
4. src/main.js -- 引入import store from './store/'
5. 全局状态管理，所有页面共享数据(避免多页跳转传数据的麻烦)
6. 设置数据：this.$store.dispatch('increment',100000)
7. 获取数据：this.$store.state.num
8. vue中的状态管理vuex，可以通过vuex去获取并修改公共数据，使用vuex，需要在src中创建store文件，然后在main.js中去将store文件引入进来

slot插槽 demo15

常用于组件调用

vue-resource请求 demo16

1. npm install 引入 vue-resource包
2. cnpm install vue-resource --save
3. main.js引入：import VueResource from 'vue-resource'
4. main.js 全局应用：Vue.use(VueResource);
5. this.$http.get('/someUrl)
6. this.$http.post('/someUrl',{foo:'bar})
7. 官网地址： github.com/pagekit/vue…
8. 请求数据的函数应写到 mounted里9.

移动组件库Mint UI demo17

官网：mint-ui.github.io/docs/#/zh-c…

1. cnpm install mint-ui --save
2. main.js引入：import MintUi from 'mint-ui'
3. Vue.use(MintUi);
4. demo17引入组件 import { Toast } from 'mint-ui';
5. methods 插入Toast('提示信息');
6. main.js引入 import 'mint-ui/lib/style.css'