首页 > 其他分享> 文章详细

前端-Vue-快速入门

2021-07-23 00:01:47 阅读：133 来源： 互联网

标签：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>

标签：Vue,入门,前端,数据模型,组件,属性,路由,函数
来源： https://blog.csdn.net/zuefeng/article/details/118973662

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9