Vue第一节--入门基础篇

标题 一 Vue入门介绍

vue不提倡dom操作
提倡MVVM设计模式

M => model
V => View
VM => viewModel

标题二 解决插值表达式闪烁的问题

 [v-cloak]{
    display: none;
    }

标题三 常见指令

v-on:绑定方法
v-if:判断
v-for:循环
v-bind:绑定属性

标题四 事件修饰符

.once 只触发一次事件处理函数,之后就失效了
.self 只有点击当前元素时才会触发
.prevent 阻止标签默认行为的事件修饰符

     @click.prevent.once="aHandler"
     @click.self="divHandler"
     @click.prevent.stop="aHandler"

标题五 常见vue使用管理插件

Vue Router 是 vue 官方的路由
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
Vue Loader 是为 vue 文件定制的一个 webpack 的 loader
Vue Test Utils 是官方提供的一个单元测试工具
Vue Dev-Tools Vue 在浏览器下的调试工具
Vue Cli 是官方提供的一个 vue 项目脚手架 它帮你分装了大量的 webpack、babel 等其它配置
Vetur 是 VS Code 的插件. 如果你使用 VS Code 来写 vue 的话，这个插件是必不可少的

标题六 跑马灯效果

html

	<div id="app">
    <input type="button" value="浪起来" @click="start">
    <input type="button" value="低调" @click="stop">
    <h4 v-text="msg"></h4>
	</div>

js
viewModel

   new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育别浪~!,稳住我们能赢',
            intervalId: null
        },
        //想要调用对象中的方法或属性需要用this.调用
        methods: {
                start:function () {
                    if(this.intervalId == null) {
                        //设置定时器
                        //新的写法,内部的this与外部的this会保持同步
                        this.intervalId = setInterval(() => {
                            var start = this.msg.substring(0, 1)
                            var end = this.msg.substring(1)
                            this.msg = end + start
                        }, 100)
                    }
                    return
                },
                stop() {//函数的新写法
                    clearInterval(this.intervalId)
                    this.intervalId = null//清除定时器对象
                }
        }
    })

标题七 watch监听属性实现登录注册功能

1 导入包

    	<script src="../static/js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/vue-router.js" type="text/javascript" charset="utf-8"></script>

2 view视图

		<div id="app">
			<router-link to="/login" tag="button">登录</router-link>
			<router-link to="/register" tag="button">注册</router-link>
			<router-view></router-view>
		</div>

3 template

		<template id="login">
			<h2>登录页面</h2>
		</template>
		<template id="register">
			<h2>注册
		</template>

4 model业务层

		var login = {
			template: "#login"
		}
		var register = {
			template: "#register"
		}
		
		var router = new VueRouter({
			routes: [
				{
					path: "/login",
					component: login
				},
				{
					path:"/register",
					component:register
				}
			]

		})
		

5 viewmodel

var vm = new Vue({
			el:"#app",
			data:{},
			methods:{},
			router:router,
			watch:{
				//监听路由属性$router.path
				'$route.path':function(newVal,oldVal){
					if(newVal == '/login'){
						alert("欢迎进入登录页面")
					}
					else if(newVal == '/register'){
						alert("欢迎进入注册页面")
					}
				}
			}
			
		})