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>

二.安装node运行环境：

1，下载 

双击运行，一直下一步 完成安装 。

关闭终端命令窗口，在打开 输入npm  显示详细信息，就是运行环境安装成功。

2安装vue/cli 脚手架，一键/自动构建项目结构的工具

使用命令：npm install -g @vue/cli

运行如下：

3，创建Vue项目

在想建项目的文件夹上 直接打Cmd进入终端创建

创建vue项目的命令：vue create vue-demo

vue-demo是项目名

按空格是选中，再按空格就是取消选中

2.X

回车安装。

4.运行项目

进到项目所在的文件夹里，启动运行项目！

Local：地址在浏览器打开得到如下图：        

5.退出运行状态

Ctrl +C