vue简介

VUE

1、Vue是什么?
Vue是一个渐进式的javascript开发框架，通过组件的开发，最后进行组件的组合，合并组件形成页面
构造器(构造函数)
自动化构建工具
优点
组件化开发
单页面路由
丰富的Api方法
双向的数据绑定
单向数据流
易于结合其他第三库
缺点
生态系统不够完善
可扩展性稍差
1、全局安装 npm install -g vue-cli

2、创建项目 vue init webpack myprojuct

3、安装依赖包 npm install

下包：

 cnpm i --save-dev vue

CDN:内容分发网络/智能虚拟网络
v-on:click 缩写 @click
v-on:click="alert($event)" // 阻止默认行为
v-on:click.prevent="alert" // 利用修饰符阻止默认行为

指令

v-show
v-html
v-text
v-bind:src="list.img"  // 绑定属性  所有属性都可以
v-for="list in lists"  // 循环

插值

{{message}}
v-html="message"  // 可以解析html元素
v-text="message"  // 只能解析字符串

<div id="app">
    {{message}}
    {{message+""}} // 表达式
    <input type="text" v-model="message">
    <button v-on:click="alert">点击</button>
</div>

let vm = new Vue({ 
    el:"#app",  // 挂载对象
    data:{ // 实例属性    // data是一个方法返回一个对象
        message:"世界您好!"
    }, 
    beforeCreate(){   // 创建
        // 挂载元素 实例属性 实例方法 都没有生成
    },
    created(){   // 创建完成
        // 挂载元素 还是没有被初始化
        // 实例属性 实例方法 编译出来
    },
    beforeMount(){  
        // 挂载元素 初始化了，但是模板还没有被编译，原样输出
        // 实例属性 实例方法 编译出来
    },
    mounted(){
        // 挂载元素 初始化 模板被编译
        // 属性 初始化
        // 方法初始化
    },
    beforeUpdate(){
        // 数据更新前
    },
    updated(){
        // 数据更新后
        // 当数据发生改变都会被updated捕获到
    }
    methods:{  // 方法
        alert(e){
            // e.preventDefault();
            alert(this.message)
        }
    }
})

2、app.vue
自动添加前缀

postcss-loader
autoprefixer
sass-loader
{
    loader:'postcss-loader',
    optiond:{
        sourceMap:true,
        config:{
            
        }
    }
}

vue init webpack-simple aaa
vue
vue-loader
vue-template-compiler 
vue-style-loader

<template>
    <div>
        <h1 v-bind:style="{fontSize:'12px'}">绑定样式</h1> // 直接赋值形式
        <h2 v-bind:style="styleObj">绑定样式</h2> // 对象形式
        <h3 v-bind:style="[obj1,obj2]">绑定样式</h3>  // 数组形式
        
        <p v-bind:class="['text-res':true]">绑定类</p>  // 数组形式
    </div>
</template>
<script>
    export default:{
        name:'app',
        data(){
            return{
                styleObj:{
                    fontSize:"20px",
                    color:"red"
                },
                obj1:{
                    color:"#dec"
                },
                 obj2:{
                    color:"green"
                }
            }
        },
        computed:{
            // computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter
            sum(){
                return Number(this.vall)+Number(this.val2)
            }
        },
        watch:{ // 监听新值和旧值
            slogin(){
                
            }
        }
    }
</script>
<style scoped> // 只在当前作用域里生效
    .text-red{
        color:red;
    }
</style>

3、ajax

• axios

4、取dom元素

1. ref=“aaa” this.$refs.aaa

5、轮播图 element-ui

main.js
import Element from 'element-ui'

Vue.use(Element)

页面
<el-carousel :interval="3000">
    <el-carousel-item v-for="(list,ind) in Imgs" :key="ind">
        <img :src="list.picUrl" class="img_res">
    </el-carousel-item>
</el-carousel>

style
 @import url('element-ui/lib/theme-chalk/index.css');

6、mock
下包：
mock-axios-adapter

import mockjs from 'mockjs';
import axios from 'axios';
import axiosAdapter from 'mock-axios-adapter'  // 拦截axios请求


const mock = new axiosAdapter(axios);

mock.onGet('地址').reply(200,{
    errCode:0,
    errMsg:'',
    result:[{
        url:'./static/img/banner.jpg'
    }]
})

7、vue-lazyload
1、安装插件

npm install vue-lazyload --save-dev

2. main.js引入插件：
   import VueLazyLoad from ‘vue-lazyload’
   Vue.use(VueLazyLoad,{
   error:’./static/error.png’,
   loading:’./static/loading.png’
   })

3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
   

8、插槽

<slot></slot>

两端对齐：

vertival-align:sub

9、缓存页面
用这个标签包裹起来

<keep-alive>
    <router-view/>
</keep-alive>

10、事件修饰符
.stop
.prevent
.capture
.self
.once

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

11、按键修饰符
.enter

.tab

.delete (捕获 “删除” 和 “退格” 键)

.esc

.space

.up

.down

.left // 检测鼠标左键

.right

.ctrl

.alt

.shift

.meta

12、表单修饰符
.lazy
.number
.trim