11.2vue
Posted zhen1996
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了11.2vue相关的知识，希望对你有一定的参考价值。
2018-11-2 19:00:33
明天周末,又可以愉快整理博客啦!
越努力,越幸运!永远不要高估自己!!!
接着学vue 感觉好强大!
用这个组件的好处就是,不需要手动刷新,文件只要把保存就自动刷新!!!具体的还得看vue官网!
这个vue组件用着不难!主要是把 template ,scrip, style 三个部分全解耦啦!并且一个页面分成好几个子页面!!
明天老师带着做项目!好强大!
详情点击这个↓↓↓
vue-cli脚手架安装和webpack-simple模板项目生成
vue 创建项目步骤 1. cd 当前目录下 2. vue init webpack-simple name 3. 接下来根据提示操作 4. cd name目录 5. npm install (下载好node) 6. npm run dev 7. 只关心 src下的文件里面的文件
创建好一个vue项目的文件夹
只关心src就好!!!
下面演示一下如何在自己主要组间里面使用子组件
1.自定义个文件夹
Vcontent.vue
<!-- 一个组件有三部分组成 -->
<!-- 一个vue子文件 -->
<template>
<header class="wrap">
我是内容部分
<h3>身子</h3>
</header>
</template>
<script >
export default{
name : ‘Vcontent‘,
data(){
return {
}
}
}
</script>
<!-- 仅对当前文件style有效 -->
<style scoped>
h3{
color:red;
}
</style>
Vheader.vue
<!-- 一个组件有三部分组成 -->
<!-- 一个vue子文件 -->
<template>
<header class="wrap">
我是头部信息
</header>
</template>
<script >
export default{
name : ‘Vheader‘,
data(){
return {
}
}
}
</script>
App.vue
<!-- 一个组件有三部分组成 -->
<template>
<!-- 页面的结构-->
<!-- 一定要有个大标签包含所有的标签 -->
<div class="class">
<h3>{{msg}}</h3>
<Vheader></Vheader>
<Vcontent></Vcontent>
</div>
</template>
<script >
// 先引入子组件
import Vheader from ‘./components/Vheader.vue‘
import Vcontent from ‘./components/Vcontent‘
// 页面的业务逻辑
export default{
name : ‘App‘,
data(){
return {
msg: ‘hello 组件‘
}
},
methods:{
},
computed:{
},
// 挂载
components:{
Vheader:Vheader,
Vcontent:Vcontent,
}
}
</script>
<style >
/*页面的样式*/
</style>
贴上自己写的笔记!
1. {{}} 模板语法 插值 简单地运算 2. 指令系统 v-if v- show v-bind 绑定属性 简写 : v-on 绑定时间 @ v-for 遍历 v- html 解析html标签 v-model 只是用在表单空间 双向数据绑定的一个体现 数据驱动视图!! 数据带动视图的改变而改变! 双向数据绑定= 单向数据绑定 + UI 监听 computed 计算属性 // 计算数据的属性 data里面保存的数据 时时的监听!!! 默认只有getter 23 种设计模式 MVC MVVm MVT MVVM Model View ViewModel Model url ==> 视图函数
以上是关于11.2vue的主要内容，如果未能解决你的问题，请参考以下文章