VUE系列二:vue基础

vue

一、组件嵌套

1. 新建一个组件Users.vue

<template>

<div class="users">

<ul>

<li v-for="user in users">

{{user}}

</li>

</ul>

</div>

</template>

<script>

export default {

name: 'users',

data () {

return {

users:["henry", "bucky", "emily"]

}

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

</style>

2. 全局注册组件

2.1. 在main.js里面引入组件Users.vue

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue' //导入vue

import App from './App' //导入根组件App.vue

import Users from './components/Users'//导入组件Users.vue

Vue.config.productionTip = false

//全局注册组件Users.vue

Vue.component("users",Users);

/* eslint-disable no-new */

new Vue({ //实例化一个vue对象

el: '#app', //index.html的根元素app

components: { App },//注册根组件App.vue才能使用

template: '<App/>'//VUE模板使用,可以是组件、html标签等

})

2.2. 在根组件App.vue里面使用组件users

// 1. 模板:html结构 有且只有一个根标签

<template>

<div id="app">

<HelloWorld/> <!--使用组件HelloWorld -->

<users></users><!--使用组件users -->

</div>

</template>

//2. 行为:处理逻辑

<script>

//导入组件HelloWorld.vue

import HelloWorld from './components/HelloWorld'

export default {

name: 'App',//组件App.vue的名字

components: {

HelloWorld, //注册组件HelloWorld才能使用

}

}

</script>

//3. 样式:解决样式

<style>

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>

3、局部注册组件

3.1. 删除main.js里面注册的全局组件users

3.2. 在根组件app.vue里面局部注册和使用组件

// 1. 模板:html结构 有且只有一个根标签

<template>

<div id="app">

<users></users><!--使用组件users -->

</div>

</template>

//2. 行为:处理逻辑

<script>

//局部注册组件Users.vue

import Users from './components/Users'//导入组件Users.vue

export default {

name: 'App',//组件App.vue的名字

components: {

"users" : Users //注册组件Users.vue才能使用

}

}

</script>

//3. 样式:解决样式

<style>

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>

4、页面呈现效果

 二、组件CSS的作用域

1. 分别在在组件App.vue和Users.vue里面定义一个h1的样式

App.vue

// 1. 模板:html结构 有且只有一个根标签

<template>

<div id="app">

<h1>App</h1>

<users></users><!--使用组件users -->

</div>

</template>

//2. 行为:处理逻辑

<script>

//局部注册组件Users.vue

import Users from './components/Users'//导入组件Users.vue

export default {

name: 'App',//组件App.vue的名字

components: {

"users" : Users //注册组件Users.vue才能使用

}

}

</script>

//3. 样式:解决样式

<style>

h1

{

color:purple;

}

</style>

Users.vue

<template>

<div class="users">

<h1>users</h1>

</div>

</template>

<script>

export default {

name: 'users',

data () {

return {

users:["henry", "bucky", "emily"]

}

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style >

h1

{

color: green;

}

</style>

查看页面效果可以发现App.vue里面的h1的样式被Users.vue里面的样式给覆盖了

 

 那么我们要他们各自使用自己的h1的样式怎么办呢?

我分别给他们加上scoped就可以了

 App.vue的样式:

//3. 样式:解决样式

<style scoped>

h1

{

color:purple;

}

</style>

 Users.vue的样式:

<style scoped>

h1

{

color: green;

}

</style>

 页面效果:

三、属性传值props(父组件把数据传递给子组件)

把父组件App.vue的数据传递给子组件Users.vue使用

App.vue

// 1. 模板:html结构 有且只有一个根标签

<template>

<div id="app">

<h1>App</h1>

<users v-bind:users="people"></users><!--使用组件users的时候把父组件的数据people传递给它 -->

</div>

</template>

//2. 行为:处理逻辑

<script>

//局部注册组件Users.vue

import Users from './components/Users'//导入组件Users.vue

export default {

name: 'App',//组件App.vue的名字

components: {

"users" : Users //注册组件Users.vue才能使用

},

data () {

return {

people:["henry", "bucky", "emily"]

}

}

}

</script>

//3. 样式:解决样式

<style scoped>

h1

{

color:purple;

}

</style>

 Users.vue

<template>

<div class="users">

<h1>users</h1>

<ul>

<!-- 遍历父组件传递过来的users -->

<li v-for="user in users">

{{user}}

</li>

</ul>

</div>

</template>

<script>

export default {

name: 'users',

// props:["users"],//获取父组件传递过来的users

props:{

users:{

type:Array,

required:true

}

},

data () {

return {

}

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1

{

color: green;

}

</style>

 页面效果:

 

 四、事件传值(子组件把数据传递给父组件)

 在子组件Users.vue的方法changeTitle里面注册一个事件titleChanged并传递一个参数值:"子向父传值"

<template>

<div class="users">

<h1 v-on:click="changeTitle">users</h1>

<ul >

<!-- 遍历父组件传递过来的users -->

<li v-for="user in users">

{{user}}

</li>

</ul>

</div>

</template>

<!--

传值: string、number、boolean

传引用:Array、Object

-->

<script>

export default {

name: 'users',

// props:["users"],//获取父组件传递过来的users

props:{

users:{

type:Array,

required:true

}

},

data () {

return {

}

},

methods : {

changeTitle : function(){

//注册一个事件titleChanged

this.$emit("titleChanged","子向父传值");

}

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1

{

width: 1000px;

height: 100px;

background-color: aqua;

color: green;

}

</style>

在父组件里面实现事件titleChanged

// 1. 模板:html结构 有且只有一个根标签

<template>

<div id="app">

<p v-on:titleChanged="updateTitle($event)">App</p>

{{title}}

<users v-bind:users="people"></users><!--使用组件users的时候把父组件的数据people传递给它 -->

</div>

</template>

//2. 行为:处理逻辑

<script>

//局部注册组件Users.vue

import Users from './components/Users'//导入组件Users.vue

export default {

name: 'App',//组件App.vue的名字

components: {

"users" : Users //注册组件Users.vue才能使用

},

data () {

return {

people:["henry", "bucky", "emily"],

title : "父组件的"

}

},

methods : {

updateTitle (msg){

this.title=msg;

}

}

}

</script>

//3. 样式:解决样式

<style scoped>

h1

{

color:purple;

}

</style>

五、传值和传引用

传值: 传递的是string、number、boolean,多处地方使用,改变一处的值,其他的地方的值不会受影响

传引用:传递的是Array、Object,多处地方使用,改变一处的值,其他的地方的值会受影响

传值和传引用类似于C语言中的传值和传址

六、生命周期(钩子函数)

1. 生命周期的作用

1. 在开发过程中定位问题
2. 解决需求问题,即什么需求应该写在生命周期的哪个阶段

2. 生命周期的流程图:

流程图里面的钩子函数说明:

beforeCreate : 实例化vue对象之前做的一些动作,这里有一些事件的初始化,在这里可以做页面的loading

create:在这里vue对象已经实例化完毕,事件也初始化完毕,在这里可以做网络接口数据的请求、结束beforeCreate里面的loading

    create之后检查有没有el元素,如果有就继续看有没有template,如果这两个都没有,生命周期就结束了;如果有template就里面是一个组件还是一个html元素

beforeMount:在这个方法之后进行虚拟dom的渲染,注意:此时只是进行虚拟dom的渲染,页面还没显示出来

mounted :执行这个方法之后页面就显示出来了

beforeUpdate:页面进行更新之前要做的事

updated:这个方法执行完成之后页面修改的数据已改变

beforeDestroy:生命周期结束之前

destroyed:生命周期结束

3. 生命周期钩子函数的示例

 Users.vue

<template>

<div class="users">

<h1 v-on:click="changeTitle">users</h1>

<ul >

<!-- 遍历父组件传递过来的users -->

<li v-for="user in users">

{{user}}

</li>

</ul>

</div>

</template>

<!--

传值: string、number、boolean

传引用:Array、Object

-->

<script>

export default {

name: 'users',

// props:["users"],//获取父组件传递过来的users

props:{

users:{

type:Array,

required:true

}

},

data () {

return {

}

},

methods : {

changeTitle : function(){

//注册一个事件titleChanged

this.$emit("titleChanged","子向父传值");

}

},

beforeCreate:function(){

alert("组件实例化之前执行的函数");

},

created:function(){

alert("组件实例化完毕,但页面还未显示");

},

beforeMount:function(){

alert("组件挂载前,页面仍未展示,但虚拟Dom已经配置");

},

mounted:function(){

alert("组件挂载后,此方法执行后,页面显示");

},

beforeUpdate:function(){

alert("组件更新前,页面仍未更新,但虚拟Dom已经配置");

},

updated:function(){

alert("组件更新,此方法执行后,页面显示");

},

beforeDestory:function(){

alert("组件销毁前");

},

destoryed:function(){

alert("组件销毁");

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1

{

width: 1000px;

height: 100px;

background-color: aqua;

color: green;

}

</style>

七、路由和http

路由

路由和a标签一样实现页面的跳转,和a标签最大的不同是路由的性能更好,原因是a标签点击多次就跳转多次性能很低,而路由的话不管你点击多少次都只跳转一次

要使用路由先安装路由:
安装路由之前要先停止项目:ctrl+c
安装路由的命令:npm install vue-router --save-dev
安装完路由之后启动项目:npm run dev

 

路由使用示例:

main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue' //导入vue

import VueRouter from 'vue-router' //引入路由

import App from './App' //导入根组件App.vue

import Users from './components/Users'//导入组件Users.vue

import Home from './components/Home'//导入组件Users.vue

Vue.config.productionTip = false

//引入路由后使用路由

Vue.use(VueRouter)

//配置路由

const router = new VueRouter(

{

routes : [

//配置路由跳转到Home这个组件

{path:"/",component:Home},

//配置路由跳转到Users.vue这个组件

{path:"/Users",component:Users}

],

//去掉地址栏的"/#/"

mode : "history"

}

)

/* eslint-disable no-new */

new Vue({ //实例化一个vue对象

router,//使用路由

el: '#app', //index.html的根元素app

components: { App },//注册根组件App.vue才能使用

template: '<App/>'//VUE模板使用,可以是组件、html标签等

})

 新建一个Home.vue

<template>

<div class="home">

<h1 >home</h1>

<ul >

<!-- 遍历父组件传递过来的users -->

<li v-for="user in users">

{{user}}

</li>

</ul>

</div>

</template>

<!--

传值: string、number、boolean

传引用:Array、Object

-->

<script>

export default {

name: 'home',

data () {

return {

users:["henry", "bucky", "emily"]

}

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1

{

width: 1000px;

height: 100px;

background-color: aqua;

color: green;

}

</style>

 Users.vue

<template>

<div class="users">

<h1 >users</h1>

</div>

</template>

<!--

传值: string、number、boolean

传引用:Array、Object

-->

<script>

export default {

name: 'users',

data () {

return {

}

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1

{

width: 1000px;

height: 100px;

background-color: aqua;

color: green;

}

</style>

 在根组件App.vue里面使用路由

// 1. 模板:html结构 有且只有一个根标签

<template>

<div id="app">

<!-- 使用路由实现跳转 注意:to里面写的是路由的名字 -->

<ul>

<li><router-link to="/">home</router-link></li>

<li><router-link to="/Users">Users</router-link></li>

</ul>

<!-- 进入首页默认加载的路由 -->

<router-view></router-view>

</div>

</template>

//2. 行为:处理逻辑

<script>

export default {

name: 'App',//组件App.vue的名字

data () {

return {

}

}

}

</script>

//3. 样式:解决样式

<style scoped>

h1

{

color:purple;

}

</style>

 页面效果:

首页

 

 点击Users跳转到Users组件

点击home跳转到Home组件

 

 使用http

要使用http要先安装vue-resource
安装路由之前要先停止项目:ctrl+c
安装路由的命令:npm install vue-resource --save-dev
安装完路由之后启动项目:npm run dev

 

http使用示例:

在main.js里面引入vue-resource就可以在任何组件中使用了http了

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue' //导入vue

import VueRouter from 'vue-router' //引入路由

import VueResource from 'vue-resource' //引入vue-resource

import App from './App' //导入根组件App.vue

import Users from './components/Users'//导入组件Users.vue

import Home from './components/Home'//导入组件Users.vue

Vue.config.productionTip = false

//引入路由后使用路由,这样就可以在任何组件中使用路由了

Vue.use(VueRouter)

//引入vue-resource后使用vue-resource,这样就可以在任何组件中使用http了

Vue.use(VueResource)

//配置路由

const router = new VueRouter(

{

routes : [

//配置路由跳转到Home这个组件

{path:"/",component:Home},

//配置路由跳转到Users.vue这个组件

{path:"/Users",component:Users}

],

//去掉地址栏的"/#/"

mode : "history"

}

)

/* eslint-disable no-new */

new Vue({ //实例化一个vue对象

router,//使用路由

el: '#app', //index.html的根元素app

components: { App },//注册根组件App.vue才能使用

template: '<App/>'//VUE模板使用,可以是组件、html标签等

})

 在Home.vue组件中发送http请求

<template>

<div class="home">

<h1 >home</h1>

<ul >

<!-- 遍历父组件传递过来的users -->

<li v-for="user in users">

{{user}}

</li>

</ul>

</div>

</template>

<!--

传值: string、number、boolean

传引用:Array、Object

-->

<script>

export default {

name: 'home',

data () {

return {

users:["henry", "bucky", "emily"]

}

},

created(){

this.$http.get("http://jsonplaceholder.typicode.com/users")

.then((data) => {

console.log(data);

// this.users = data.body;

})

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1

{

width: 1000px;

height: 100px;

background-color: aqua;

color: green;

}

</style>

 请求结果:

 

以上是 VUE系列二:vue基础 的全部内容, 来源链接: utcz.com/z/377133.html

回到顶部