Disclaimer: If you have any objection to this article, then please write your comments in the article comments at. If you find this article interesting, please share and forward, or you can look at, you acknowledge and encouragement of our articles. Wish everyone in the programming this road, farther and farther. https://blog.csdn.net/weixin_44369568/article/details/91488844

VIEW

1, Vue What is that?

Vue javascript is a progressive development framework, the final combination of components through the development component, the combined assembly forms page
Constructor (the constructor)
Automated build tools

advantage

Component-based development
Single page in the router
Rich Api method
Two-way data binding
Unidirectional data flow
Ease of libraries in conjunction with other third

Shortcoming

Eco-system is not perfect
Scalability somewhat less

1, the global installation npm install -g vue-cli

2. Create a project vue init webpack myprojuct

3, the installation dependencies 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, taken dom element

  ref="aaa"   this.$refs.aaa

6, FIG rotation 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');

7、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'
    }]
})

8 view-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 
<img class="item-pic" v-lazy="newItem.picUrl"/>

9, slot

<slot></slot>

两端对齐：
vertival-align:sub

10, cached page

用这个标签包裹起来

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

11, event modifier

.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>

12, modifier keys

.enter

.tab

.delete (capture "Delete" and "backspace" key)

.esc

.space

.up

.down

.left // detect the left mouse button

.right

.ctrl

.alt

.shift

.meta

13, forms modifiers

.lazy
.number
.trim

vue advantages, disadvantages and some common methods vue