1.padStart函数(字符串格式化)

padStartFunc(data) {	//可以写成过滤器,使用该函数必须data必须是字符串
	this.msg = data.padStart(2, '0');
}

2.单选框

<label class="radio-inline"> <input type="radio"  value="男" v-model="user.u_sex"> 男  </label> 
<label class="radio-inline"> <input type="radio" value="女" v-model="user.u_sex"> 女 </label>

3.自定义键盘修饰符

<!-- 当焦点在该按钮上时,按下f12(对应键盘码113)就可以出发show函数 -->
<button @click="clickMe" @keyup.113="show">点我弹窗</button>

<!-- 也可以自定义键盘码指令简化开发,配合js -->
<button @click="clickMe" @keyup.f2="show">点我弹窗</button>

//自定义键盘码
<script>
	Vue.config.keyCodes.f2 = 113;
</script>  

键盘码大全:https://blog.csdn.net/dyllove98/article/details/8728657

4.自定义指令与钩子函数(bind inserted updated …)

1)公共指令:

<!-- html代码,v-focus="msg"是自定义指令,其中注意msg是绑定在data里的变量,有别于v-focus="'msg'" -->
<input id="search" v-model="search" type="text" v-focus="msg" />

//js代码
//自定义全局指令
Vue.directive('focus', {
	bind: function (el, binding) {
    	el.style.color = 'red';
        el.value = binding.value;
        // 和样式相关的操作最好放在绑定函数
    },
    inserted: function (el, binding) {
        el.focus();
        //和js相关的操作最好放在插入函数,只触发一次
    },
    updated: function (el, binding) {
        //可多次触发
    }
});

2)私有指令:

var vm = new Vue({
	el: "#app",
    data: {
    	...
    },
    directives: { //定义私有指令
        'fontweight': {		//完整形式,因为bind和updated使用比较频繁,推荐使用下面的简写形式
        	bind: function (el, binding) {
            	el.style.fontWeight = binding.value;
            },
            inserted: function (el, binding) {
                el.style.fontWeight = binding.value;
            },
            updated: function (el, binding) {
                el.style.fontWeight = binding.value;
            }
        },
        'fontsize':function(el, binding){   //简写形式,相当于在bind和updated里都写了以下代码
            el.style.fontsize = parseInt(binding.value) + 'px';
        }

    }
});

5.生命周期函数(钩子函数)

<!-- html代码 -->
<div id="app">
	<h3 id="h3">{{msg}}</h3>
    <input type="button" value="修改msg" @click="msg = 'no'">
</div>

//js代码
var vm = new Vue({
	el: "#app",
	data: {
		msg: "ok"
	},
	methods: {
		show(data) {
			console.log(data + "执行show方法");
		}
	},
	beforeCreated() {
		//第一个生命周期函数(在el,data,methods等声明之前就会运行,vue实例初始化前运行的函数)
		//以下内容均不会被打印出来
		console.log("beforeCreated-" + this.msg);
		this.show("beforeCreated-");
	},
	created() { //常用
		//第二个生命周期函数(在el,data,methods等声明之后就会运行,vue实例初始化后运行的函数)
		//以下内容会被打印出来
		console.log("created-" + this.msg);
		this.show("created-");
	},
	beforeMount() {
		//第三个生命周期函数,页面模板已经在内存中编译完成,但是尚未渲染到页面中运行的函数
		//将会输出beforeMount-{{msg}}而并非页面中的值,无法取到页面中的元素,因为页面还未渲染,此时页面还是旧页面
		console.log("beforeMount-" + document.getElementById("h3").innerText);
	},
	mounted() { //常用
		//第四个生命周期函数,页面已渲染
		//页面已渲染,可以输出"mounted-ok",
		//如果要通过某些插件操作页面上的DOM节点,最早要在mounted中进行
		console.log("mounted-" + document.getElementById("h3").innerText);
	},
	beforeUpdate() {
		//第五个生命周期函数,运行阶段触发的函数,会根据data改变(数据被更新)触发0-∞次
		//点击按钮修改msg的值,会输出beforeUpdate-ok,而此时msg会被更改为no,故输出的是旧数据
		console.log("beforeUpdate-" + document.getElementById("h3").innerText);
	},
	updated() {
		//第六个生命周期函数
		//点击按钮修改msg的值,updated-no,输出的是新数据
		console.log("updated-" + document.getElementById("h3").innerText);
	},
	beforeDestroy() {
		//第七个生命周期函数
		//销毁前执行,仍然可以使用vue里的所有组件
	},
	destroy() {
		//第八个生命周期函数
		//销毁后执行,vue里的所有组件都已经销毁了,不可使用
	}
});

5.模块化与组件(以登录组件和注册组件为例)

1) 全局组件

<!-- CSS代码-可以省略,这里作动画切换 -->
<style>
	<!-- 进入后和离开后的状态一致 -->
    .v-enter,
    .v-leave-to {		
        opacity: 0;
        transform: translateX(150px);
    }

	<!-- 进入过程和离开过程的状态一致 -->
    .v-enter-active,
    .v-leave-to {		
        transition: all 0.5s ease;
    }
</style>

<!-- HTML代码 -->
<div id="app">
	<!-- 引入方式1:使用占位符引入组件,这里的comName是变量需要定义 -->
	<!-- transition标签用来提供动画切换效果,mode属性设置切换方式 -->
	<transition mode="out-in">
        <component :is="comName"></component>
    </transition>

	<!-- 引入方式2:直接以标签形式引入 -->
	<login></login>
	<register></register>
</div>

<!-- HTML代码,组件模板必须在vue控制范围之外定义 -->
<template id="login">
    <h1>登陆组件</h1>
</template>
<template id="register">
    <h1>注册组件</h1>
</template>

//JS代码
<script>
	var vm = new Vue({		//vue控制块
        el: "#app",
        data: {
            comName: "login"	//默认显示登录组件
        }
    });

    Vue.component("login", {	//登录组件
        template: "#login",
		data() {	//组件拥有自己的数据,但是必须是以函数的形式表示并且配有返回值
            return {
                count: 0
            };
        },
        methods: {
            //组件拥有自己的方法
        }
    });
    Vue.component("register", {		//注册组件
        template: "#register"
    });
</script>

2) 私有组件

<!-- HTML代码 -->
<div id="app">
	<login></login>
</div>

//JS代码
<script>
    var vm = new Vue({
        el: "#app",
        data: {
			//...
        },
        methods: {
			//...
        },
        components: { //定义示例内部私有组件
            login: {
                template: '#temp'
            }
        }
	});
</script>

6.父子组件之间传值

<!-- HTML代码 -->
<div id="app">
	<!-- 在父区域使用子组件时,通过v-bind引用父变量名为msg的变量,通过v-on引用父方法名为show的方法 -->
    <com1 v-bind:parentmsg="msg" v-on:func="show"></com1>
</div>
<template id="tem1">
	<!-- 引用后,可以在该子组件使用刚刚赋予的parentmsg名称即父变量msg的值,而func也可作为方法在myclick方法调用 -->
    <div>
        <h1>这是子组件 --- {{parentmsg}}</h1>
        <input type="button" value="点击触发父组件传递过来的func方法" @click="myclick">
    </div>
</template>

//JS代码
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "这是父组件"
        },
        methods: {
            show(data1,data2) {		//子组件可以传两个值过来
                console.log("调用父组件show方法:"+data1+data2);
            }
        },
        components: {
            com1: {
                data() { //子组件自己的值,可读可写
                    return {
                        title: "123",
                        content: "qqq"
                    }
                },
                methods:{
                    myclick(){
                        //通过emit触发父组件传递过来的func方法来触发show方法,第二个参数开始是该子组件向父组件传过去的值
                        this.$emit("func",this.title,this.content);
                    }
                },
                template: "#tem1",
                props: ['parentmsg'] //父组件传递过来的值的名称,只读不可写
            }
        }
    });
</script>

7.$refs的使用

<!-- HTML代码 -->
<div id="app">
    <input type="button" value="获取元素" @click="getElement">

    <h3 id="myh3" ref="myh3">哈哈哈</h3>

    <login ref="login"></login>
</div>

//JS代码
<script>
    Vue.component("login", {
        data() {
            return {
                msg: "son msg"
            }
        },
        methods: {
            show() {
                console.log("son-showFunction");
            }
        }
    })

    var vm = new Vue({
        el: "#app",
        methods: {
            getElement() {
				//$refs可以获取DOM元素和组件
                console.log(this.$refs.myh3.innerText);
				//子组件的msg值
                console.log(this.$refs.login.msg);
				//子组件的show方法
                this.$refs.login.show();
            }
        }
    });
</script>

8.路由基本使用与传值

<!-- 切换动画样式代码 -->
<style>
    .router-link-active {
        color: red;
        font-weight: 800;
        font-style: italic;
        text-decoration: underline;
    }

    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(140px);
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 0.5s ease;
    }
</style>

<!-- HTML代码 -->
<div id="app">
    <!-- 默认渲染为a标签,以下展示两种传值方式 -->
    <router-link to="/login?id=10">登录</router-link>
    <router-link to="/register/12/ls">注册</router-link>

    <!-- 这是vue-router提供的元素,占位符 -->
    <transition mode="out-in">
        <router-view></router-view>
    </transition>
</div>

//JS代码
<script>
    //组件模板对象
    var login = {
        template: "<h1>登录组件---{{$route.query.id}}</h1>",
        created(){
            console.log(this.$route.query.id);
        }
    }
    var register = {
        template: "<h1>注册组件---{{$route.params.id}}---{{$route.params.name}}</h1>",
        created(){
            console.log(this.$route.params.id);
        }			
    }

    //创建一个路由对象
    var router = new VueRouter({
        //routes 是路由匹配规则,必须有两个属性
        //属性1 是path,监听哪个路由链接地址
        //属性2 是component,表示path对应的component对应的那个组件,其属性值必须是一个模板对象不能是名称
        routes: [{
                path: "/",
                redirect: "/login"
            },
            {
                path: "/login",
                component: login
            },
            {
                path: "/register/:id/:name",
                component: register
            }
        ],
        //配置高亮类
        linkActiveClass: "btn btn-success"
    });

    var vm = new Vue({
        el: "#app",
        router //注册路由规则对象,监听url变化展示对应组件
    });
</script>

9.嵌套路由

<!-- HTML代码 -->
<div id="app">
    <router-link to="/account">ACCOUNT</router-link>
    <router-view></router-view>
</div>
<template id='account'>
    <div>
        <h1>这是ACCOUNT组件</h1>
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>

//JS代码
<script>
    //组件模板对象
    var account = {
        template: "#account"
    }
    var login = {
        template: "<h1>登录组件</h1>"
    }
    var register = {
        template: "<h1>注册组件</h1>"
    }

    //创建一个路由对象
    var router = new VueRouter({
        routes: [{
            path: "/account",
            component: account,
            children: [{	//在此嵌套孩子组件,采用相对寻址,不加斜杠!
                    path: "login",
                    component: login
                },
                {
                    path: "register/:id/:name",
                    component: register
                }
            ]
        }]
    });

    var vm = new Vue({
        el: "#app",
        router //注册路由规则对象,监听url变化展示对应组件
    });
</script>

10.watch监视属性(可以监视DOM之外的数据变化,例如下面监视了url的变化,参照第九点加上watch监视)

<script>
    var vm = new Vue({
        el: "#app",
        watch:{
            "$route.path"(newVal,oldVal){	//重点:以要监听的属性名作为函数名称即可监听该属性
                if(newVal == "/account/login"){
                    console.log("欢迎进入登陆界面");
                }else if(newVal == "/account/register"){
                    console.log("欢迎进入注册界面");
                }
            }
        },
        router //注册路由规则对象,监听url变化展示对应组件
    });
</script>

11.computed的使用

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            data1:"",
            data2:""
        },
        computed: {
            result(){
                //result的值随着data1和data2的改变而改变,同样result可以当作普通属性去绑定,如v-model="result"和{{result}}均可以直接在页面使用
                return this.data1+this.data2;
            }
        }
    });
</script>

12.webpack打包命令即ES6引入命令

webpack .\src\main.js -o .\dist\bundle.js
//导入jquery,ES6中导入模块的方式
import $ from 'jquery'

13.webpack配置文件webpack.config.js的编写

//node语法,webpack是由node.js编写的故都可通用node语法
const path = require('path');

module.exports = {  
    entry: path.join(__dirname,'./src/main.js'), //入口,表示要打包哪个文件
    output:{
        path: path.join(__dirname,'./dist'), //指定打包好的文件输出到哪个目录中去
        filename: 'bundle.js'   //打包后文件的名称
    }
}