Vue框架；Vue中的选择和循环结构；Vue数据类型；Vue中的事件和动态属性；Vue子组件通过导入在主组件显示在网页；Vue中主组件向子组件传递数据

一，Vue简介

前端现在比较火的三大框架就是：vue ，React，Angular。在国内使用最多的还是：

vue >React >Angular

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue代码分割为三类， HTML、CSS 和 JavaScript，三部分的代码在各自带区域写；

且：Vue是渐进式的JavaScript框架。意味着它可以在你现有的应用程序当中去插入，也可以单独的完整的去创建一个拥有vue环境的项目。

1.0项目src下的结构

registerServiceWorker.js 是一个测试文件。（可以删除，在把对应的引用关系删除掉 import ‘./registerServiceWorker’ 在main.js文件里。）

Main.js 主入口文件基本上不用动，大部分用来导入文件。

组件化开发：

组件：由三种语法组成，html,css ,js

html部分：

 <template>
  <div>

    
  </div>
 </template>

js部分：

 <script>
 export default {
  
 }
 </script>

css部分：

<style type="text/css">
 
 </style>

2.0Vue中的选择和循环结构

书写形式和java有差别，但是含义相同

选择结构：

v-if=“条件”

v-else if

v-else

     <ol>
    <li v-if="boo">起床吃早餐</li>
    <li v-else>出发来上课</li>
    <li>下课来吃饭</li>
    <li>下课吃晚饭</li>
    <li v-show="boo">下课吃夜宵</li>
  </ol>
<!-- 如果boo为真，则“出发来上课” 不显示，反之只显示“出发来上课” -->

循环结构

<select >该部门下的所有员工
    <option v-for="(e,i) in names " :key="i">{{ e }}</option>
   
   <!--  循环 for v-for="(e,i) e是循环值 i是下标 -->
  </select>
<!-- names是含有多个名称的数组 -->

3.0Vue数据类型

Vue的数据要声明和初始化在Js块中：

<script>
/* 属性加前加： 表示动态属性：属性值为变量*/
export default {

  name: 'App', /**1.当前页面名字：App 逗号隔开第二个属性 */

  data(){/**  2.设置当前页面的显示变量*/
/*想将变量反到前端页面，相当于成员变量，变量写入return{}中*/
    return{  
      str:"123234",
      boo:true,
      boo1:false,
      username:'',
      pwd:'',
      sex:'',
      menu1:["农业新闻","教育新闻","天气新闻"],/** 数组*/
      menu2:["国际新闻","军事新闻","体育新闻","民生新闻"],
      aaa:"http://www.baidu.com/s",
      names:["ff","nn","tt","张三"],
      objs:[      /**引用数据类型 */
        {
          name:'LiMing',
          age:20,
          sex:"男"
        },
        {
          name:'XiaoMei',
          age:20,
          sex:"女"
        },
        {
          name:'XiaoFei',
          age:20,
          sex:"男"
        }
      ]


    }

数据调用在Html块中：

 <template>
  <div>
    <!-- 调用数据问文本时需要{{ }} 双层大括号嵌套使用 -->
    <a v-bind:class="{cla:boo1}" href="aaa">{{ str }}</a>
    <!-- 使用数组 -->
  <select @change="method1">该部门下的所有员工
    <option v-for="(e,i) in names " :key="i">{{ e }}</option>
   
   <!--  //循环for v-for="(e,i) e是循环值 i是下标 -->
  </select>
  <table>
    <tr >
      <td>编号</td>
      <td>姓名</td>
      <td>年龄</td>
      <td>性别</td>
    </tr> 
    <!--循环引用数据类型 
    v-on 设置事件，值写方法名 或者直接@+事件 无参数可以不写小括号  -->
    <tr v-for="(e,i) in objs" :key="i" v-on:click="show(e.name)">
      <td>{{i}}</td>
      <td>{{e.name}}</td>
      <td>{{e.age}}</td>
      <td>{{e.sex}}</td>
    </tr>
  </table>

  </div>
 </template>

4.0Vue中的事件和动态属性

动态属性：

<a v-bind:class="{cla:boo1}" href="aaa">{{ str }}</a>

.cla{
  color:red;
  font-size: 20px;
}

v-bind:class="{cla:boo1}"表示动态属性设置：将样式设为动态选择；bool是true则样式显示，反之样式不显示

并且v-bind可以省略简写为：

事件：

  <select @change="method1">该部门下的所有员工
    <option v-for="(e,i) in names " :key="i">{{ e }}</option>
   
   <!--  //循环for v-for="(e,i) e是循环值 i是下标 -->
  </select>
  <!-- names是含有多个名称的数组 -->

将方法写在JS块中：

<script>
export default {

  name: 'App', /**1.当前页面名字：App 逗号隔开第二个属性 */

  data(){/**  2.设置当前页面的显示变量*/
/*想将变量反到前端页面，相当于成员变量，变量写入return{}中*/
    return{  
     
  },

  methods:{ /**3 设置事件绑定函数 */
  
    method1(){
      alert("选择了新的选项")
    }
    }


  }
</script>

@change="method1" 是v-on:change=“method1” 时间的简写

v-on:可以简写为@

5.0Vue子组件通过导入在主组件显示在网页

子组件：（子组件名为Menu）

<template>
    <div>
        <ul>
        <!-- <li>4三大4</li>
        <li>555</li>
        <li>666</li> -->
        <li v-for="(e,i) in news" :key="i">{{ e }}</li>
        </ul>
        <input type="button" value="传值" @click="method1">
    </div>
</template>
<script>
export default {
    name:"Menu",
    props:{  //5，接受其他组件传来的数据,props中变量名等于其他组件引用时的属性名
      news:Array
    },
   data(){
    return{
       str:"我是Menu组件" 
    }
   },
   methods:{
    method1(){
        this.$emit("getVal",this.str);//$emit 子组件传递数据给主组件方法：第一个参为对方组件事件名，第二个参数为要传递的数据
    }
   }
}
</script>
<style>

</style>

主组件：

<template>
  <div>

    <Menu ></Menu>


  </div>
</template>
<script>

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



export default {
  name: 'App', 
  data(){
    return{  
  

  },

  methods:{ 


  },
  components:{
    Menu
  }

}
</script>

<style type="text/css">

</style>

6.0Vue中主组件向子组件传递数据

主组件：

<template>
  <div>

    <Menu :news="menu1" ></Menu>
<!-- news是自定义的子组件的接收到值后的数组名 -->

  </div>
</template>
<script>
import Menu from './components/Menu.vue'
export default {
  name: 'App', 
  data(){
    return{ 
 
       menu1:["农业新闻","教育新闻","天气新闻"]
//将menu1传入子组件

  },

  methods:{ 
    

  },
  components:{
    Menu
  }

}
</script>

<style type="text/css">

</style>

子组件：

<template>
    <div>
        <ul>
        <li v-for="(e,i) in news" :key="i">{{ e }}</li>

        </ul>
    </div>
</template>
<script>
export default {
    name:"Menu",
    props:{  //5，接受其他组件传来的数据,props中变量名等于其他组件引用时的属性名 ：后为所传数据类型
      news:Array  
    },
   data(){
    return{
       
    }
   },
   methods:{
 
   }
}
</script>
<style>

</style>

6.0Vue子组件向父组件传递数据：

子组件：

<template>
    <div>
        <input type="button" value="传值" @click="method1">
    </div>
</template>
<script>
export default {
    name:"Menu",
    props:{  //5，接受其他组件传来的数据,props中变量名等于其他组件引用时的属性名
      news:Array
    },
   data(){
    return{
       str:"我是Menu组件" 
//要传递的数据
    }
   },
   methods:{
    method1(){
        this.$emit("getVal",this.str);//$emit 子组件传递数据给主组件方法：第一个参为对方组件事件名，第二个参数为要传递的数据
    }
   }
}
</script>
<style>

</style>

主组件：

<template>
  <div>

    <Menu @getVal="getStr"></Menu>
    
    <!-- getStr是子组件设置的事件名 -->
  </div>
</template>
<script>

import Menu from './components/Menu.vue'


export default {
  name: 'App', 
  data(){
    return{  
  

  },

  methods:{ 
      getStr(str){
      alert("传递过来的值是"+str)
    }
  },
  components:{
    Menu
  }

}
</script>

<style type="text/css">

</style>