VUE系列二：vue基础

发布时间：2020-12-16 23:19:57 所属栏目：百科来源：网络整理

导读：一、组件嵌套 1. 新建一个组件Users.vue ="user in users" 2. 全局注册组件 2.1. 在main.js里面引入组件Users.vue Vue from 'vue' App from './App' = span style="color: #008000"// span style="color: #008000"全局注册组件Users.vue span style="color:

一、组件嵌套

1. 新建一个组件Users.vue

2. 全局注册组件

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

Vue from 'vue' App from './App' =

//全局注册组件Users.vue
Vue.component("users",Users);

/ eslint-disable no-new /
new Vue({ //实例化一个vue对象
el: '#app',//index.html的根元素app
components: { App },//注册根组件App.vue才能使用
template: ''//VUE模板使用，可以是组件、html标签等
})

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

//2. 行为：处理逻辑

//3. 样式：解决样式

3、局部注册组件

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

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

//2. 行为：处理逻辑

//3. 样式：解决样式

4、页面呈现效果

?二、组件CSS的作用域

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

App.vue

App //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

users

</div>
</template>

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

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

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

?App.vue的样式：

?Users.vue的样式：

?页面效果：

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

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

App.vue

App //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

users

</div>
</template>

}
}
</script>

?页面效果：

?四、事件传值（子组件把数据传递给父组件）

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

</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>

在父组件里面实现事件titleChanged

v-on:titleChangedApp //2. 行为：处理逻辑
<script>
//局部注册组件Users.vue
import Users from './components/Users'//导入组件Users.vue

export default {
name: 'App',data () {
return {
people:["henry","emily"],title : "父组件的"
}
},methods : {
updateTitle (msg){
this.title=msg;
}
}
}
</script>

五、传值和传引用

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

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

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

六、生命周期（钩子函数）

1. 生命周期的作用

2. 生命周期的流程图：

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

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

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

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

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

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

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

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

beforeDestroy：生命周期结束之前

destroyed：生命周期结束

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

?Users.vue

users
</div>
</template>


<script>
export default {
name: 'users',methods : {
changeTitle : function(){
//注册一个事件titleChanged
this.$emit("titleChanged","子向父传值");
}

}, beforeCreate:function(){
alert("组件实例化之前执行的函数");
},created:function(){
alert("组件实例化完毕,但页面还未显示");
},beforeMount:function(){
alert("组件挂载前,页面仍未展示,但虚拟Dom已经配置");
},mounted:function(){
alert("组件挂载后,此方法执行后,页面显示");
},beforeUpdate:function(){
alert("组件更新前,页面仍未更新,updated:function(){
alert("组件更新,beforeDestory:function(){
alert("组件销毁前");
},destoryed:function(){
alert("组件销毁");
}
}
</script>


<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

import Vue from 'vue' import App from './App' = / eslint-disable no-new /
new Vue({ //实例化一个vue对象
router,//使用路由
el: '#app',//注册根组件App.vue才能使用
template: ''//VUE模板使用，可以是组件、html标签等
})

?新建一个Home.vue

home
</div>
</template>


<script>
export default {
name: 'home',"emily"]
}
}
}
</script>


<style scoped>
h1
{
width: 1000px;
height: 100px;
background-color: aqua;
color: green;
}
</style>

?Users.vue

users
</div>
</template>


<script>
export default {
name: 'users',data () {
return {

}

}
}
</script>


<style scoped>
h1
{
width: 1000px;
height: 100px;
background-color: aqua;
color: green;
}
</style>

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

//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了

import Vue from 'vue' import VueRouter from 'vue-router' import App from './App' import Users from './components/Users' import Home from './components/Home' = const router = {path:"/" {path:"/Users" mode : "history"/ eslint-disable no-new /
new Vue({ //实例化一个vue对象
router,//使用路由
el: '#app',//注册根组件App.vue才能使用
template: ''//VUE模板使用，可以是组件、html标签等
})

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

home
</div>
</template>


<script>
export default {
name: 'home',"emily"]
}
}, created(){
this.$http.get("http://jsonplaceholder.typicode.com/users")
.then((data) => {
console.log(data);
// this.users = data.body;
 })
}
}
</script>


<style scoped>
h1
{
width: 1000px;
height: 100px;
background-color: aqua;
color: green;
}
</style>

?请求结果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!