11.2vue(3)

2018-11-2 19:00:33

明天周末,又可以愉快整理博客啦!

越努力,越幸运!永远不要高估自己!!!

接着学vue 感觉好强大!

用这个组件的好处就是,不需要手动刷新,文件只要把保存就自动刷新!!!具体的还得看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  ==> 视图函数