文章目录

• 学习目标：
• 学习内容：
• • • • 一、实例化Vue对象
      • • 1、作用域
        • 2、数据模型
        • 3、方法区
        • 4、钩子函数
      • 二、插值表达式
      • • 1、花括号{}
        • 2、v-text、v-html 单向绑定
        • 3、v-model 双向绑定
      • 三、事件
      • • 1、v-on/@
        • 2、v-for
        • 3、v-if、v-show
        • 4、v-bind
      • 四、计算属性
      • 五、监听
      • 六、组件化
      • • 1、全局组件
        • 2、局部组件
        • 3、父向子传递数据模型
        • 4、子向父通信
      • 七、路由
      • • 1、组件安装
        • 2、创建路由实例
        • 3、注册路由到父组件
        • 4、使用路由切换组件

学习目标：

• 掌握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>