前端-Vue-快速入门

学习目标:

  • 掌握Vue前端框架

学习内容:

一、实例化Vue对象

1、作用域
  • 用el:正则化匹配
2、数据模型
	data:{
		key: value
	}
3、方法区
	methods:{
		定义方法
	}
4、钩子函数
  • 生命周期:加载模板-》渲染-》更新-》销毁
  • 钩子函数:beforeCreate-》created-》beforeMounte-》amounted-》beforeUpdate-》updated-》beforeDestroy-》destoryed

二、插值表达式

1、花括号{}
  • {{数据名}}
  • {{函数名()}}
2、v-text、v-html 单向绑定
  • <span v-text="数据名">
  • <span v-html="<div>数据名</div>">
3、v-model 双向绑定
  • <input type="checkbox" value="java" v-model="language">java<br>
  • <input type="checkbox" value="ios" v-model="language">ios<br>
  • <input type="checkbox" value="php" v-model="language">php<br>
  • 您选择了:{{language.join(",")}}<hr>
  • 数据模型:language=[]

三、事件

1、v-on/@
  • 右键事件:v-oncontextMenu=“函数名”
  • 右键事件:@contextMenu=“函数名”
  • 按键事件:v-onkeyup.13=“函数名”(回车按键)
  • 按键事件:@keyup.enter=“函数名”(回车按键)
  • 组合按键事件:@keyup.enter.tab=“函数名”(按键可以无限加)
2、v-for
  • 循环操作获取数组或者对象属性
3、v-if、v-show
  • v-if不进行渲染
  • v-show进行渲染
4、v-bind
  • v-bind:class=”{active:boolean}”
  • 绑定样式,如果满足boolean条件则渲染active样式。
  • 可以与静态样式并存

四、计算属性

  • 计算属性中的函数不是传统意义上的函数,必须要有返回值,相当于数据模型
  • 引用计算属性时,直接用{{属性名}},不需要()
	computed:{
		func(){
			方法体;
			返回值;
		},
		...
	}

五、监听

  • 监听输入信息,进行对应操作
	<!-- HTML -->
	<input type="text" v-model="search">

	<!--数据模型:空字符串-->
	search:""	

	<!--监听器:执行相应操作,先打印新数据在打印旧数据-->
	watch:{
		search(newVal, oldVal){
			console.log(newVal, oldVal);
		}
	}

六、组件化

1、全局组件
  • 直接注册到Vue上,所有组件都可以使用
  • 不需要再父组件上调用该组件,直接在页面内容中使用
	<!--组件名:increment-->
	<!--组件模板:template-->
	<!--数据模型:data-->
	Vue.component("increment", {
        template: "<button @click='num++'>点我加一,{{num}}</button>",
        data(){
            return {
                num: 0,
            }
        }
    })
2、局部组件
  • 需要绑定到父组件进行使用
	<!--组件名:hello-->
	<!--组件模板:template-->
	<!--数据模型:data-->
	const hello = {
        template: "<div>我叫 {{name}}!!!</div>",
        data(){
            return {
                name: "Jim",
            }
        }
    }

	<!--父组件:app-->
	<!--绑定局部组件到父组件:components-->
	const app = new Vue({
        el: "#app",
        data: {
            num: 0,
        },
        components: {
            com0: hello,
        }
    })
3、父向子传递数据模型
  • 使用子组件时自定义属性接收父组件的数据模型
  • 子组件中用props接收自定义属性获得的数据模型
  • 自定义属性以:开头为动态属性,获取的是JS数据,而不是字符串
	<!--以上述子组件与父组件为例进行数据模型传输-->
	<!--第一步:在使用子组件时自定义属性接收父组件数据模型-->
	<increment :num1="num"> </increment>
	<!--第二步:子组件中用props接收数据模型-->
	props: [] <!--方式一:以数组方式接收-->
	props: {  <!--方式二:以对象方式接收-->
		num1: {
		type: Number,
		default: 0
		}
	}
4、子向父通信
  • 通过事件传递信息
  • 使用子组件时自定义事件接收父组件函数
  • 子组件中用$emit 接收父组件函数
	<!--使用子组件时自定义事件接收父组件函数-->
	<increment :num1="num" @incr1="incr"></increment>
	<!--子组件在函数内使用$emit()调用自定义事件-->
	Vue.component("increment", {
        template: "<button @click='subIncr'>点我加一,{{num1}}</button>",
        methods: {
            subIncr(){
                this.$emit("incr1");
            }
        },
        props: {
            num1:{
                type: Number
            }
        }
   }

七、路由

1、组件安装
  • npm install vue-router –save
  • 引入 <script src="node_modules/vue-router/dist/vue-router.js"></script>
2、创建路由实例
  • 创建路由实例
  • 绑定组件与路由地址
	const router = new VueRouter({
        routes: [
            {
                path: "/login",
                component: loginForm
            },
            {
                path: "/register",
                component: registerForm
            }
        ]
    })
3、注册路由到父组件
	const app = new Vue({
        el: "#app",
        router
    })
4、使用路由切换组件
  • 创建router-link标签使用路由地址
  • router-view标定路由展示位置
	<div id="app">
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <hr>
        <router-view></router-view>
    </div>


版权声明:本文为zuefeng原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。