Vue入门

Vue快速入门

下载脚本文件

vue 的本质就是一个JavaScript的框架，非常的便于开发，我们首先可以去官网下载一个vue.js用于本地编程
https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
下载之后就可以进行script的引入
这里vue的结构和java中的类的结构非常的相似，Vue主要有3个部分，代码如下

<script>
    var app = new Vue({
        el : '#app',
        data:{
            name:"vue",
            count: 0
        },
        methods:{
            test(){
                this.name = "vue is very good"
            },
            test2(){
                this.count++;
            }
        }
    })
</script>

三个模块

首先Vue有3个模块，
第一个是el 这是element的缩写，代表着我们这个Vue选中了html中的那个css选择器，这里一般都把vue定为在某个div中，因为在一个html中，我们只能拥有一个Vue 的对象，就是只能new一个出来；
el 也就是相当于这个Vue的作用域，所有的Vue语法，也只能在这个el对应的div中生效(或者说是css选择器)
第二个是data 简单理解就是类中属性 ，用｛｝包起来就是代表这个范围都是属性吧，好看一点；然后里面的所有属性都是以K：V 这样的键值对进行存储的；如果我们想在html中读取或者说使用这个属性，一共用三种方式，分别是

1. ｛｛Key｝｝我们可以采用这样的凡事进行属性的读取，这种表达的方式我们可以认为是一种字符串，因为它可以完成当前属性值和其他text文本的拼接功能
2. v-text 这个就类似于thymeleaf中的渲染了，使用位置是在html的标签中，但是这样的话，会使原本出现在标签内的text文本直接失效；
3. v-html这个在v-text的功能基础上，增加了标签解析的功能，也就是说，我们可以通过读取属性值来在html页面中加一个html标签，而不是直接把这个属性当成字符串来进行读取；、

以上就是我们Vue读取属性的方式了，对于不同的属性类型，如字符串，数组，对象，我们可以直接采用 key.properity的方法来调用；
第三个是methods 这是方法部分，我们可以在Vue中声明一些方法，来操作属性，或者打印一些字符串之类的操作，格式就是： 方法名（有参数就写参数）｛方法体｝，相应的调用就是在html的标签中声明 @事件的发生条件 = “方法名称”，下面是一个调用Vue的展现

<div id="app">
<h3>{{ name }}</h3>
<h3 v-text = "count"></h3>
<button @click = "test">点击</button>
<button @click = "test2">点击</button>
<!--vue要注意的事，一定一定要在div这个选择器的作用域里面去写-->
</div>

然后要说明的一个事情就是Vue具有双向绑定机制的，如果我们Vue中的属性进行了变化，对应的html中读取的属性值也会同时出现变化；

Vue中的标签

在Vue中有很多提供好的v-xxx指令来更加快速的开发 ；

v-if v-show

v-if 和 v-show 都是用来判断要不要显示当前所在的html标签的

<h1 v-if = "count!=0">{{count}</h1>

指令里面的内容是布尔类型，我们可以写对应的表达式来完成判断；
这里我设想的场景是对于用户登录之后，根据用户的信息，来判断是管理员，还是普通用户，来决定要不要显示的一些页面元素；
然后具体来说说这两个标签的使用区别，对于v-if，它的适应场景一般都是对于页面变化少的，我们不会频繁的对页面上得某些元素进行显示或者隐藏，它的底层原理是Js的dom树，通过判断当前的条件来决策是否删除或者添加这个所在的结点；而v-show 是用于变化较多，变化快得场景，它的原理是通过判断当前的条件是否成立，来调用css选择器中的display标签来进行数据的显示或者隐藏的；

v-bind

这个标签的功能其实和v-if有一定的相同，功能是将vue中的某个属性和html中的某个属性进行绑定，通过Vue中属性值的改变，动态的更改视图；语法格式是

 <a :href = "href">link</a>
 var app = new Vue({
        el : '#app',
        data:{
            name:"vue",
            count: 0,
            href: "https://www.baidu.com"
        },

v-bind的简单写法就是，上面的代码的作用就是我们将a标签中的href属性和vue中的href进行了绑定，点击的结果就是自动跳转到百度了；

v-for

这也是一个非常使用的指令工具，我们可以借助它，在html中使用数组和对象这样的数据结构；举个例子

<div id="app">
    <h1>对象数组的显示</h1>
    <table border="1px">
        <tr>
            <td>名字</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr v-for = "user,index in userarr" :key = "user.name">
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.gender}}</td>
        </tr>
    </table>
</div>

解读：我们通过v-for来读取数组中元素，格式是v-for = “元素名，索引 in vue中的数组名”，然后我们这里指定key值没有什么用意，就是为了更好的帮助vue进行这个v-for操作，接着我们可以调用数组中元素来进行一些想要的操作就好了，比如获取这个对象的一些属性值等等；这里就很类似于我们后端返回的Json格式，然后调用v-for进行数据的显示。

v-model

这个是Vue的一个非常重要的东西，可以说我们不再需要用form表带来提交参数，将form中的各种属性值，作为vue这个对象的属性值进行数据的写入，举个例子:

axios

在之前我们对后端发起请求往往都是在用form表单提供的功能，在Vue中，引入axios，会让我们的请求变得可控，随便，任意的发送请求，且会自动的封装为Json格式

引入axios

axios是vue的第三方库，所以我们在vue中使用它就要引入其文件，下载地址为：

<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>

调用axios

调用axios的方式很简单，这里举2个例子，

针对于post方式，因为post一般都是要发送请求体的，所以在发送的过程中要携带json格式的文件
axios.post("url",{json})      这样就成功的发送了post
axios.get("url"+"?k=v&k=v")   这样就能够成功的向url发送一个携带参数的post请求了；
当然我们还需要对后端传回来的参数进行处理，所以需要在后面跟上
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
下面的两个方法分别是对于后端的response和error的操作

简单来说这就是axios的请求，我们的困难在于怎么在vue中使用axios ，要注意的是在axios中的两个相应处理中，我们在里面传入this.属性是不能识别的，所以要在函数重新定义一个变量等于当前的this

vue的生命周期

vue的生命周期主要有3个大的阶段，分别是初始化，运行时，和销毁
初始化主要有这几个生命周期函数，这些函数是我们不能进行改变的，会自动执行，但是我们可以在里面多写一些操作，来让vue在不同的实例化之前就执行，按照执行顺序分别是
初始化阶段
beforecreated( ) 这个方法用来进行准备工作，可以理解为准备初始化的环境
created( ) 这个方法在执行的过程中，会将vue中定义的data 和 methods，el 等等元素装进新建的vue实例中，可以说是真正的初始化，所以我们已经可以在这里调用我们的所有的数据和方法了，当然可以在这里调用axios来进行预加载一些后端数据回来
beforeMount( ) 这个方法是准备进行渲染操作，我们这个时候如果读取html中的｛｛ msg｝｝这样的操作是读不出来真正的数据的。
mounted( ) 这一步的结果就是将渲染完成，我们穿插在html中的vue中的属性开始生效了；
运行阶段，因为双向绑定的机制，在运行阶段的vue是一个循环加载的操作
beforeupdate( ) 这一步我们是改变了vue中的数据，但是渲染在html中的数据并没有任何的变化
update( ) 在这我们会把vue和和html中的数据进行统一；
销毁阶段
beforeDestory( ) 这一步是销毁的准备阶段
destoryed ( ) 这就是最终的销毁；

Vue组件

在vue中，我们不仅有el,data,methods,conputed 还有一个属性叫做component（组件）
component有2种一种叫做全局组件，另一种叫做局部组件，所谓全局，类似于类变量的方式，我们不需要去声明一个Vue的实例，就能调用这样一个组件，写法是Vue.component(里面是组件的内容)
语法格式是 Vue.component(“组件名”,{ templata: html语句 })这样进行声明即可，切记组价名要有引号。全局的组件只能每一次在括号中写一个组件，而局部组件就可以写多个了。
局部组件的声明方法 ,下面的代码是2种写法，第一种，我们直接在Vue实例的外部声明这样一个组件格式的变量，然后根据es6的新特性把的名放进去就可以了。另一种就是继续以K：V的格式进行书写配置

const login = {
        template: `<div><h1>我是一个组件</h1></div>`
    }
var app =  new Vue({
        el: "#no1",
        data: {
            msg:"我是vue"
        },
        methods:{
        },
        components:{
            login,
            login1:{
                template:`<div><h1>???</h1></div>`
            }
        }
    })

components中的属性
其实换个角度来看的话，我们声明的Vue实例也是一个组件，所以每一个组件都有类似于data methods computed components等对象的属性，举个例子：在组件中，我们只有data是采用了一个函数的形式，然后return了一个｛｝对象的形式来声明数据，其他的格式都个new Vue是一样的额，注意的是子组件只能传递一级，爷爷和孙子之间的标签是不能进行解析的。另外组件的生命周期也是和Vue实例相同的

  const login = {
        template: `<div><h1>我是一个组件</h1><button @click = "f">点我</button><login3></login3></div>`,
        data(){
            return {
                name:"zhangsan",
                age:32,
                job:"coder"
            }
        },
        methods: {
            f(){
                document.write(this.name+this.age+this.job)
            }
        },
        components: {
            login3:{
                template:`<div><h1>???</h1></div>`
            }
        }
    }

组件之间的数据传递（props）

数据传递从大题上分为2点，一种是父传子，一种是子传父；
首先说如何进行父传子，如果说从父亲这层个子组件传递一个静态的数据的话，我们只需要在自组件在html的标签上写上，属性名 = “属性值” ，在组件中如果想接收这个参数，就要声明一个新的对象属性:
props:[ ‘静态的属性的名’]
然后就可以和正常调用Vue一样调用这个参数了。
静态的使用是动态传递参数的基础：如果我们想把父类的data传递给子类，这种动态传递要使用到之前的v-bind
简单来说就是在静态传递参数的K=V前面写上一个：就可以了 ：代表v-bind k 代表要传回子组件中的数据名，V代表的是父组件的data中的属性名；子类就可以读取父类中的数据，同时随着父类的数据的变动，子类中的显示也会随着改变，但是子类中对数据进行修改并不会去影响父类中的数据。
子传父，我们选择使用事件传递，事件传递的在html中声明的格式是：@子类方法名 = 父类方法名
在子类组件中实现的方式是 在某个方法中声明 this. $emit(参数1 子类方法名 …父类方法中可以传入的参数)；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="no1">
    <login :msg1 = "msg" @aa = "f"></login>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    Vue.component("login2",{template:`<div><h2>我是全局组件</h2></div>`}
    )
    const login = {
        template: `<div><h1>我是一个组件{{msg1}}</h1><button @click = "f">点我</button><login3></login3></div>`,
        data(){
            return {
                name:"zhangsan",
                age:32,
                job:"coder"
            }
        },
        methods: {
            f(){
                this.$emit("aa");
            }
        },
        components: {
            login3:{
                template:`<div><h1>???</h1></div>`
            }
        },
        props:['msg1']
    }
    new Vue({
        el: "#no1",
        data: {
            msg:"我是vue"
        },
        methods:{
            f(){
                this.msg = this.msg+"?";
            }
        },
        components:{
            login,
            login1:{
                template:`<div><h1>???</h1></div>`
            }
        }
    })
</script>

路由Router

在Vue的核心思想就是万物皆是组件，一个网页有且只有一张html，但是这是和我本来的想法不一样的，就比如页面的跳转是不好实现的，怎么灵活的跳跃到另一个页面，这就是路由的作用
首先我们要知道Router是Vue的一个插件，所以想使用它就必须在Vue的基础上，所以在script的引用声明中，要确保Vue在Vue Router之上。
引入Router后，我们必须了解Router是用来干什么的，简单来说这个Router就是通过不同的URL的请求，来加载不同的Vue组件，这样我们就能够在一张html上展示不同的请求了。
所以我们就不用在Vue的实例上去声明components了，而是把所有的组件写到Router中，然后Router根据组件的功能和不同的Url来进行映射，最终把这个剩下的router装进Vue 就算是完成了路由的整合。
具体的代码:
配置的时候踩到的坑，在 new Vue中注入router的时候写成了route，结果一直会报错，另外要注意vue的版本问题。

<script>
    const component1 = {
        template:`<div><h1>hello vue</h1></div>`
    }
    const component2 = {
        template:`<div><h1>hello java</h1></div>`
    }
    //配置组件和url的映射关系，注意name是唯一的标识我们不能有重名的路由
    const router = new VueRouter({
        routes :[{path:"/",redirect:"/com1"},
            {path:"/com1",component:component1,name:"com1"},
            {path:"/com2",component:component2,name:"com2"}]
        }
    )
    const app = new Vue({
        el:'#app',
        data:{},
        methods:{},
        router
    })
</script>

我们根据传过来的Url就可以解析出来需要的组件了，但是我们还需要在html中声明我们的组件要展示位置，声明标签为这样就行了。

    <router-link to = "/com2">com2</router-link>
    <router-link to = "/com1">com1</router-link>
    <router-link :to = {name:'com1'}>com1</router-link>
    <router-link :to = {name:'com2'}>com1</router-link>

        methods:{
            f(){
                if (this.$route.name!="com1")
                    this.$router.push({name:"com1"})
        }},

在这里我们对于要参入的参数的url配置到route中
{path:"/com1/:id/:name",component:component1,name:"com1"}
如下，我们就可以通过这样的参数来获取到id 和 name 的问题了
接收参数的方法是在created这个钩子中写上 
this.$route.params.id/name 就能获取到了。

{path:"/com1",component:component1,name:"com3",children: [{
                path:"name",component:component3,name:"com4"
                }]},

Vue脚手架

1.使用Vue脚手架的命令 ：vue init webpack 项目名
2.在WebStorm中配置项目：将组件创建好后，写入Router下的js文件中即可。
3.element ui 一个快速布局的组件库，我们可以直接进行调用，方便开发。
element ui 的使用：
1.container

<el-container>
    <el-header>
      编写头部
    </el-header>
    <el-aside>
      编写菜单栏
    </el-aside>
    <el-main>
      编写主要展示内容
    </el-main>
    <el-footer>
      编写脚页
    </el-footer>
  </el-container>

2.radio：注意这个@change的特性是当我们的数据只要发生变化，就会立刻调用一次方法，如果简单的method并不会频繁的相应；

 <el-radio-group @change = "test" v-model="res">
    <el-radio-button label="100">100</el-radio-button>
    <el-radio-button label="1000">1000</el-radio-button>
    <el-radio-button label="5000">5000</el-radio-button>
  </el-radio-group>

3.