Vue学习

下载Vuejs

//开发版本:
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//生产版本:
	<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue生命周期

# Vue生命周期总结
		【1.初始化阶段】
		beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例【仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性】
            console.log("beforeCreate: "+this.msg);
        },
        created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经【初始化了data属性和methods中相关方法】
            console.log("created: "+this.msg);
        },
        beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将【El中指定作用范围作为模板编译】,如还没解析{{}}
            console.log("beforeMount: "+document.getElementById("sp").innerText);
        },
        mounted(){//4.生命周期中第四个函数,该函数在执行过程中,【已经将数据渲染到界面中并且已经更新页面】，如已经解析了{{}}中获取的值
            console.log("Mounted: "+document.getElementById("sp").innerText);
        }
        
		【2.运行阶段】
		beforeUpdate(){//5.生命周期中第五个函数,该函数是【data中数据发生变化时】执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的【依然是原始数据】
            console.log("beforeUpdate:"+this.msg);
            console.log("beforeUpdate:"+document.getElementById("sp").innerText);
        },
        updated(){    //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  【页面中数据已经和data中数据一致】
            console.log("updated:"+this.msg);
            console.log("updated:"+document.getElementById("sp").innerText);
        },
        
		【3.销毁阶段】
		beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中【所有数据 methods component 都没销毁】
        },
        destoryed(){ //8.生命周期的第八个函数,该函数执行时,【Vue实例彻底销毁】
        }

定义Vue实例

<body>
    <div id="app">
        {{ name }} <br>
        {{ pwd }} <br>
      
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //定义Vue实例
        const app = new Vue({
            el:"#app", //element 这个属性，给Vue实例定义一个作用范围
            data:{      //用来给Vue实例定义一些相关数据
                name:"Hello Vue!!!",
                pwd:"123456"
            } ,
        });
    </script>
</body>

定义数组、对象

 <script>
        const app = new Vue({
           el:"#app",
            data:{
               msg:"hello vue",
               // 可定义 数组，对象
               user:{name:"w",age:"21"},
               lists:["杭州","南京","苏州"],
               users:[{name:"小白",age:"18"},{name:"小黑",age:"18"}]

            }
        });
    </script>

1.vue实例(对象)中el属性: 代表指定Vue的作用范围
2.vue实例(对象)中data属性: 定义变量，用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出
3.在使用{{ }}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器

v-text

用来获取data中数据将数据以文本的形式渲染到指定标签内部，类似于javascript 中 innerText

<body>
    <div id="app">
        <!--通过 {{ }} 获取data属性中的变量-->
        <span>{{ msg }}</span>
        <br>
        <!--通过 v-text属性 来获取data属性中的变量，也可以在里面使用表达式、运算符等 -->
        <span v-text="msg+ '!' "></span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
           el:"#app",
            data:{
                msg:vue"
            }

        });
    </script>
</body>

【 {{}}(插值表达式)】和【v-text】获取数据的区别在于
       a.使用【v-text取值】会将标签中【原有的数据覆盖】

                 使用插值表达式的形式不会覆盖标签原有的数据
       b.使用v-text可以避免在【网络环境较差】的情况下出现【插值闪烁】

v-html

用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部解析标签，类似于javascript中 innerHTML

	<div id="app">
    
        <!--不会解析标签-->
        <span>{{message}}</span>
        <br>
        <!--不会解析标签-->
        <span v-text="message"></span>
        <br>
        <!--会解析标签-->
        <span v-html="message"></span>
 
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"<a href=''>vue</a>"
            }
        })
    </script>

v-on事件绑定

<body>
    <!--
        1、页面中提供按钮
        2、按钮绑定单击事件 onclick onmove onmouseover onkeyup ...
        3、单击事件中修改年龄的值，同时渲染页面
    -->
    <div id="app">
        <h2>{{msg}}</h2>
        <h2 v-text="msg"></h2>
        <h2>年龄： {{age}}</h2>
        <br>
        <!--通过v-on指令绑定事件-->
        <input type="button" value="点我改变年龄" v-on:click="changeage">
    //<input type="button" value="点我改变年龄" @click="changeage">
    </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                age:"21",
                msg:"hello,vue！",
            },
            methods:{ //methods 用来定义vue中的事件
                changeage:function (){
                    alert('单击触发');
                    //在函数中获取vue实例中data的数据，在事件函数中this就是vue实例
                    // this.age= this.age+1;
                    this.age++; //当前vue对象的age属性值++
                }
            }

        });
    </script>
    
</body>

事件三要素：
       -事件源:发生事件dom元素
       -事件: 发生特定的动作 click....
       -监听器发生特定动作之后的事件处理程序通常是js中函数

   1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名如 v-on:click
   2.在【v-on:事件名】的赋值语句中是当前时间触发调用的函数名
   3.在vue中事件的【函数统一定义】在Vue实例的【methods属性】中
   4.在vue定义的事件中this指的就是当前的Vue实例,可以在事件中通过使用this获取Vue实例中相关数据
5.v-on与@没有区别，就是简化写法

事件函数两种写法

 <script>
        const app = new Vue({
           el:"#app",
            data:{
                count:"1"
            },
            methods:{
    //第一种写法
                // changeageCount:function (){
                //     this.count++;
                // }
    //第二种写法            
                changeageCount(){
                    this.count++;
                }
            }
        });
    </script>

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

v-show

用来控制页面中某个标签元素是否展示底层使用控制是 display 属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。

<body>

    <div id="app">
        <h2 v-show="true">学vue</h2>
        <h2 v-show="show">这是vue中定义变量true！</h2>
        <input type="button" value="展示标签" @click="showmsg">

        <h2 v-show="age>=30">gogogoog</h2>
        <input type="button" @click="changeageAge" value="通过修改age值控制标签展示">

    </div>

    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
           el:"#app",
           data:{
               show:false,
               age:"21"
           },
           methods:{
               //通过取反，来控制标签展示
               showmsg(){
                   this.show=!this.show;
               },
               //通过变量控制标签展示和隐藏
               changeageAge(){
                   this.age++;
               }
           }
        });
    </script>

</body>

1.在使用v-show时可直接写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏
2.在v-show中可以通过boolean表达式控制标签的展示和隐藏

v-if

用来控制页面元素是否展示底层控制是DOM元素，可以减轻服务器的压力

v-bind

用来绑定标签的属性从而通过vue动态修改标签的属性

对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名

v-for

用来对对象进行【遍历】的(数组也是对象的一种)

<body>

<div id="app">

    <span>{{user.name}} , {{user.age}}</span><br>

    <!--
        通过v-for遍历对象
     -->
    <span v-for="(value,key,index) in user">
        {{index}} : {{key}} : {{value}}
    </span><br>

    <!--
        通过v-for遍历数组
    -->
    <ul>
        <li v-for="a,index in arr">{{index}} {{a}}</li>
    </ul>

    <!--
        通过v-for遍历数组中对象
        :key 便于vue内部做重用和排序
    -->
    <ul>
        <li v-for="user,index in users" :key="user.id">
            {{index}}==={{user.id}}==={{user.name}}===={{user.age}}
        </li>
    </ul>

</div>

<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user:{name:"w",age:21},
            arr:["南京","杭州","苏州"],
            users:[
                {id:"1",name:"小黑",age:16},
                {id:"2",name:"小白",age:16}
            ]
        },
        methods: {}
    });
</script>

</body>

v-model 双向绑定

用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

<body>

<div id="app">
    <input type="text" v-model="message">

    <span>{{message}}</span>
    <hr>
    <input type="button" value="改变Data值" @click="changeValue">

</div>

<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:""
        },
        methods: {
            changeValue(){
                this.message=5
            }
        }
    });
</script>

</body>

1.使用v-model指令可以实现【数据的双向绑定】
   2.双向绑定
   表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化称之为双向绑定

# MVVM架构双向绑定机制
   Model: 数据 Vue实例中绑定数据

    VM: ViewModel 监听器

   View: 页面页面展示的数据

事件修饰符

作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

# 1.常用的事件修饰符
   .stop //用来阻止事件冒泡
   .prevent //用来阻止标签的默认行为
   .capture
   .self //只触发标签自身的事件
   .once //指定事件只触发一次
   .passive

按键修饰符

# 按键修饰符
   .enter
   .tab
   .delete (捕获“删除”和“退格”键)
   .esc
   .space
   .up
   .down
   .left
   .right

 <input type="text" v-model="msg" @keyup.enter="keyups">

<input type="text" @keyup.tab="keytabs">

全局组件注册

//1.全局组件注册
    //Vue的component属性：（参数1：组件名称 ； 参数2：{组件配置对象} template属性：用来书写组件的html代码(注意：在template中必须只存放一个容器)
    Vue.component('login',{
        template:'<div><h1>用户登录</h1></div>'
    })

//2.使用全局组件  在Vue实例范围内【组件名 + 标签】
		<login></login>

   1.Vue.component用来开发全局组件参数1: 组件的名称参数2: 组件配置{} template:''用来书写组件的html代码 template中必须有且只有一个root元素
   2.使用时需要在Vue的作用范围内根据组件名使用全局组件
   3.如果在注册组件过程中使用【驼峰命名】组件的方式
       在使用组件时，必须将驼峰的所有单词小写加入-线进行使用

局部组件注册

    let login = {
        template:'<div><h1>用户登录<h1></div>'
    }

    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{  //用来注册局部组件
            login:login //注册局部组件
        }
    });

	 //局部组件使用 在Vue实例范围内
	 <login></login>

//1.声明局部组件模板  template 标签 注意:【在Vue实例作用范围外声明】
  <template id="loginTemplate">
      <h1>用户登录</h1>
  </template>

//2.定义变量用来保存模板配置对象
    let login ={   //具体局部组件名称
        template:'#loginTemplate'  //通过使用id选择器，使用自定义template标签选择器即可
    };

//3.注册组件	
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{  //用来注册局部组件
            login:login  //注册局部组件
            //如果组件名和保存模板配置对象名一样，可以直接使用名字即可
            //login
        }
    });

 //4.局部组件使用 在Vue实例范围内
	 <login></login>

Prop的使用

用来给组件传递相应静态数据或者是动态数据

<body>
    <div id="app">
        <!--0.5、使用组件
            1、给组件上定义name属性，值为'w'
        -->
        <login name="w" age="21"></login>
    </div>

    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //声明一个组件配置对象
        let login = {
            //3、通过{{name}}来获取，下面 通过props属性获取上面组件定义的name属性
            template:"<div><h1>欢迎{{name}},{{age}}</h1></div>",
            //2、通过props属性，通过数组，定义上面同名的name属性，用来接收
            props:['name','age']
        }

        const app = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components:{
                login //0、注册组件； 此处组件配置对象名和组件名一样，可以省略写为一个
            }
        });
    </script>
</body>

1.使用组件时可以在组件上定义多个属性以及对应数据
2.在组件内部可以使用props数组生命多个定义在组件上的属性名日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值

//1.声明组件模板对象
    const login = {
        template:'<div><h2>欢迎: {{ name }} 年龄:{{ age }}</h2></div>',
        props:['name','age']
    }
 
//2.注册局部组件
    const app = new Vue({
        el: "#app",
        data: {
            username:"w",
            age:21
        },
        methods: {},
        components:{
            login //注册组件
        }
    });

//3.使用组件
	 <login :name="username" :age="age"></login>  
	//使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化

prop的单向数据流

父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。

组件中定义数据和事件使用

1.【组件中定义事件和直接在Vue中定义事件基本一致】直接在组件内部对应的html代码上加入@事件名=函数名方式即可
2.在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this 指向的是当前组件的实例

向子组件中传递事件并在子组件中调用该事件

<body>
    <div id="app">

        <login :name="username" @aaa="findAll"></login>

    </div>

    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //组件声明
        const login = {
            template:"<div><h1>学vue，{{uname}}</h1><input type='button' @click='change' value='点我触发'></div>>",
            data(){
              return{
                  uname:this.name,
              }
            },
            props:['name'],
            methods: {
                change(){
                    //在login组件的函数change,去调用vue实例的函数
                    this.$emit('aaa');
                }
            }
        }

        const app = new Vue({
            el: "#app",
            data: {
                username:"w",
            },
            methods: {
                findAll(){
                    alert("vue实例中定义的函数")
                }
            },
            components: {
                //组件注册
                login
            }
        });
    </script>
</body>

路由(VueRouter)

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

用来在vue中实现组件之间的动态切换

引入路由

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  //vue 路由js

创建组件对象

//声明组件模板
const login ={
    template:"<div><h1>用户登录</h1></div>"
}
const register={
    template:"<div><h1>用户注册</h1></div>"
}

定义路由对象的规则

//创建路由对象
const router = new VueRouter({
    routes:[ //设置路由对象的规则
        //path： 请求路由的路径
        //component: 绑定组件（此处绑定后，就不需要在vue实例的components属性下绑定）
        {path:'/login',component:login},
        {path:'/register',component:register}
    ],
});

将路由对象注册到vue实例

    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {},
        router:router //设置路由对象
    });

在页面中显示路由的组件

<!--显示路由的组件-->
<router-view></router-view>

根据连接切换路由

<a href="#/register">点我注册</a>
<a href="#/login">点我登录</a>

router-link使用

用来替换我们在切换路由时使用a标签切换路由,可以自动给路由路径加入#不需要手动加入

<!--【router-link】
好处：书写路由路径不需要写 # 了
to属性： 用来书写要去的路径
tag属性： 将这个router-link标签渲染成你想要的，如下面的button
-->
<router-link to="/register" tag="button">我要注册</router-link>
<router-link to="/login" tag="button">我要登录</router-link>

默认路由

const router = new VueRouter({
    routes:[ //配置路由规则
        // 因为默认访问的是“/”，使用设置“/”，的component属性，就可以指定默认路由地址
        // { path:'/',component:login},

        //redirect: 用来当访问的是默认路由 "/" 时 跳转到指定的路由展示  【推荐使用】
        {path:"/",redirect:'/register'},

        {path:"/login",component:login},
        {path:"/register",component:register},
    ]
});

路由中参数传递

通过?号形式拼接参数

 <router-link to="/login?id=21&name=zhangsan">我要登录</router-link>

    const login = {
        template:"<div><h1>用户登录，{{this.$route.query.id}}，{{this.$route.query.name}}</h1></div>",
        data(){return{}},
        methods:{},
        created(){
            console.log("【id】==>"+this.$route.query.id+"，【name】==>"+this.$route.query.name);
        }
    }

传递参数 restful

<router-link to="/register/24/张三">我要注册</router-link>
var router = new VueRouter({
  routes:[
    {path:'/register/:id/:name',component:register}   //定义路径中获取对应参数
  ]
});

const register = {
    template:"<div><h1>用户注册，{{this.$route.params.id}},{{this.$route.params.name}}</h1></div>",
    created(){
        console.log("【id】==>"+this.$route.params.id+"，【name】==>"+this.$route.params.name);
    }
};

嵌套路由

//定义路由对象
const router = new VueRouter({
    routes:[
        {
            path:"/product",
            component:product,
            children:[ //设置这个路由中的【嵌套路由】
                {path:"add",component:add},
                {path:"update",component:update},
            ]
        },
    ]
});