Vue入门

v-text 用来获取data中的数据将数据以文本的形式渲染到指定标签的内部,类似于js中的innerTEXT
       v-text会覆盖原有标签中的值

v-html  用来获取data中的数据将数据中含有html标签先解析在渲染到指定标签的内部

在vue中绑定事件是通过v-on指令来完成的,  v-on:事件名 如;v-on:click
在vue中事件的函数统一定义在vue的methods中
@符号形式可以简化v-on:的事件绑定

在vue中事件定义存在两种写法 一种是 函数名:function(){} 推荐 一种是 函数名(){}推荐

v-show:用来控制页面中某个元素是否展示  底层控制的是标签display属性
v-if :也是用来控制页面中的标签元素是否展示 底层通过对dom树节点进行添加和删除来控制显示和隐藏                  --效率低
v-bind : 用来给页面中标签元素绑定相应的属性
v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)  
        v-for:="u in user" or v-for:="u,index in user"
在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key
v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制
所谓双向数据绑定 表单中数据变化导致vue实例data数据变化  vue实例中data数据的变化导致表单中数据变化 称之为双向数据绑定

事件修饰符
.stop 用来阻止事件冒泡  @click.stop
.prevent 用来阻止事件的默认行为  如防止a标签跳转 @click.prevent
.self  用来针对于当前标签的事件触发 只触发自己标签上的特定动作的事件
.once 让指定的事件只触发一次

按键修饰符 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符
.enter 用来在触发回车按键之后触发的事件 @keyup.enter="###"
.tab
.delete


Axios是一个异步请求,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染  页面局部更新技术 Ajax
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

        // get方式请求
        // axios.get("http://localhost:8080/vue/findAll").then(function (response){
        //     console.log(response);
        // }).catch(function (err){
        //     console.log(err)
        // });

        // post方式请求
        // axios.post("http://localhost:8080/vue/save",{
        //     id: "22",
        //     name: "兔子",
        //     address: "狗窝"
        // }).then(function (response){
        //     console.log(response.data)
        // })

        // axios的并发请求
        // 并发请求:将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果
        //axios.all([findAll(),save()]).then(
        //           axios.spread(function (res1,res2){
        //               console.log(res1.data);
        //               console.log(res2)
        //           })
        //       );


vue的生命周期函数
1.beforeCreate 生命周期中的第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods
2.created 生命周期中的第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
3.beforeMount 生命周期中的第三个函数,该函数在执行时Vue将EL中指定作用范围作为模板编译
4.Mounted 生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
5.beforeupdate 生命周期中第五个函数,该函数时data中数据发生变化时执行,这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始的数据
6.Updated 生命周期的第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化 页面中数据已经和data中数据一致

Vue组件
组件作用:用来减少Vue实例对象中代码量,日后在使用Vue开发中,可以根据业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于vue进行开发时页面管理,方便开发人员维护
全局组件的开发
全局组件注册给vue实例,日后可以在任意vue实例的范围内使用该组件
开发全局组件  -->  
Vue.component('login',{
        template: '<div><h1>用户登录</h1></div>'
});
使用全局组件  -->  <login></login>
注意:
1.Vue.compnent用来开发全局组件 参数一: 组件的名称 参数二: 组件配置{} template中必须有且只有一个root元素
2.使用时需要在vue的作用范围之内根据组件名称使用全局组件
3.如果在注册组件过程中使用 驼峰命名组件的方式 在使用组件时 必须将驼峰的所有单词小写加入-线进行使用


局部组件注册
说明:通过将组件注册给对应Vue实例中一个component属性来完成组件之间注册,这种方式不会对Vue实例造成累加
第一种开发方式
  let login = {
        template: '<div><h2>用户登录</h2></div>'

    }

    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {
            login: login
        }

    })
第二种开发方式 template-模板标签(页面中不显示)
<template id="logintemplate">
    <h1>用户登录</h1>
</template>

<script>
    let login = {
        template: '#logintemplate'
    }

    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {
            login: login
        }

    })

</script>

prop的使用
作用:props用来给组件传递相应静态数据或者是动态数据的\
<login user-name="小陈"></login>

let login = {
        template: '<div><h1>欢迎:{{userName}}</h1><div>',
        props: ['userName']
    }

向子组件中传递事件并在子组件中调用
在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名')方式调用
<login @aaa="findall"></login>
<script>

    let login = {
        template: '<div><input type="button" @click="change" value="点我"><div>',
        methods: {
            change(){
                this.$emit('aaa');
            }
        }

    }
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {
            findall(){
                alert("掉我点我")
            }
        },
        components: {
            login : login
        }
    })

</script>


路由
根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理
作用:

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
步骤;
1.引入路由
<script src="js/vue2.js"></script>
<script src="js/vue-router1.js"></script>
2.创建组件对象
 const login = {
        template: '<h1>登录</h1>'
    };
3.定义路由对象的规则
let router = new VueRouter({
        routes: [
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    })
4.将路由对象注册给Vue实例
const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router: router
    })
5.在页面中显示路由
<a href="#/login">登录</a>

router-link
    作用:用来替换我们在切换路由时使用a标签切换路由
好处:"就是可以自动给路由路径加入"
    <router-link to="/login" tag="button">登录</router-link>

嵌套路由
1.声明最外层和最内层路由
<template id="product">
    <div>
        <h1>商品管理</h1>
        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/edit">商品编辑</router-link>
        <router-view></router-view>
    </div>
</template>
2.创建路由对象含有嵌套路由
let router = new VueRouter({
        routes: [
            {path: '/product', component: product,children:[
                    {path: 'add', component: add},
                    {path: 'edit', component: edit},
                ]},
        ]
    })